Java, UX, HTML, CSS, WEB-design

Вскрытие производительности веб-эффектов для изображений

Краткое описание по статье Вскрытие производительности веб-эффектов для изображений

Название: Вскрытие производительности веб-эффектов для изображений . Краткое описание: [ad_1] ⭐ Уна Кра . Дата публикации: 03.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Уна Кравец

  • 0 Комментарии

Вскрытие производительности веб-эффектов для изображений

  • 8 минут чтения

  • Кодирование, CSS, SVG, Адаптивные изображения, WebGL

Краткое резюме ↬

По мере того, как браузеры постоянно улучшают свои возможности графического рендеринга, возможность по-настоящему проектировать в них становится все более реальной. Несколько строк кода теперь могут оказать быстрое и впечатляющее визуальное воздействие, а обеспечить постоянство без больших усилий. И, как и в большинстве случаев в веб-разработке, часто существует множество способов добиться одного и того же эффекта. В этом посте мы рассмотрим один из самых популярных графических эффектов, оттенки серого, и оценим как простоту реализации, так и влияние на производительность холста HTML, SVG, фильтров CSS и режимов наложения CSS. Какой из них победит?

По мере того, как браузеры постоянно улучшают свои возможности графического рендеринга, возможность по-настоящему проектировать в них становится все более реальной. Несколько строк кода теперь могут оказать быстрое и впечатляющее визуальное воздействие, а обеспечить постоянство без больших усилий. И, как и в большинстве случаев в веб-разработке, часто существует множество способов добиться одного и того же эффекта.

В этом посте мы рассмотрим один из самых популярных графических эффектов, оттенки серого, и оценим как простоту реализации, так и влияние на производительность холста HTML, SVG, фильтров CSS и режимов наложения CSS. Какой из них победит?

Дальнейшее чтение на SmashingMag:

  • Вскрытие производительности веб-эффектов для изображений
  • HTML5: факты и мифы
  • Эффективное изменение размера изображения с помощью ImageMagick
  • Умные методы оптимизации JPEG

Фильтры в Интернете работают как линза, наложенная на изображение. Они применяются к изображению после того, как браузер отрисовывает макет и начальную отрисовку. В поддерживаемых браузерах фильтры могут применяться индивидуально или накладываться друг на друга. Поскольку они могут быть применены в качестве модификации изображения после первоначального рендеринга и, вероятно, являются улучшением, фильтры изящно деградируют, просто будучи невидимыми в браузерах, которые их не поддерживают.

Еще после прыжка! Продолжить чтение ниже ↓

CSS-фильтры

Давайте начнем с самого простого метода создания эффекта оттенков серого: скромного, но мощного фильтра CSS.

нефильтрованное изображение птицы
Нефильтрованное изображение. (Посмотреть большую версию)

Чтобы добиться этого эффекта, мы добавляем одну строку CSS: filter: grayscale(1). Этот фильтр обесцвечивает изображение и может использоваться с любым числовым или процентным значением от 0 до 1 (или от 0% до 100%). Примечание: в настоящее время фильтры для браузеров на основе WebKit должны иметь префикс -webkit-. Однако такое решение, как Autoprefixer, избавит от необходимости добавлять их вручную.

Живая демонстрация — фильтр CSS


.cssfilter-gray {
  -webkit-filter: grayscale(1);
  background: url('img/bird.jpg');
  filter: grayscale(1);
}

Режим наложения фона

Режимы наложения CSS предоставляют бесконечное разнообразие вариантов комбинаций эффектов изображения. Существует два способа использования режимов наложения: mix-blend-mode имущество и background-blend-mode имущество.

  • mix-blend-mode это свойство, которое описывает, как элемент будет сочетаться с содержимым позади него.
  • background-blend-mode используется для элементов с несколькими фонами и описывает отношения между этими фонами.

Мы будем использовать background-blend-mode: luminosity чтобы натянуть каналы яркости на серый фон в нашем примере, в результате чего получается изображение в градациях серого. Следует отметить, что фоновый порядок является постоянным: фоновые изображения всегда должны располагаться перед однотонными или градиентными фонами, чтобы эффекты отображались правильно.. Цвет должен быть последним фоновым слоем. Это также защита от старых браузеров, которые не поддерживают background-blend-mode — изображение все равно будет отображаться без эффекта.

Единственная разница с режимами наложения и фильтром CSS заключается в том, что теперь у нас есть несколько фонов, и мы используем background-blend-mode: luminosityкоторый берет значения яркости с верхнего изображения (тестер птиц) и накладывает эти значения яркости на второй серый фон.

Живая демонстрация — режим наложения фона


.cssfilter-gray {
  background: url('img/bird.jpg'), gray;
  background-blend-mode: luminosity;
}

На данный момент это самый новый и, следовательно, наименее поддерживаемый вариант, хотя он по-прежнему хорошо работает в Chrome и Firefox и имеет частичную поддержку Safari. Примечание. Safari поддерживает все режимы наложения, кроме режимов наложения на основе HSL: оттенок, насыщенность, цвет и яркость.

Холст HTML5

HTML5 <canvas> обеспечивает массу гибкости, когда дело доходит до манипулирования изображениями, потому что у нас есть доступ к данным каждого отдельного пикселя (в частности, через canvasContext.getImageData) и может манипулировать каждым из них через JavaScript. Однако этот метод является наиболее сложным и сопряжен с наибольшими накладными расходами. Он также имеет несколько нюансов в вопросах кросс-происхождения из соображений безопасности.

Чтобы исправить ошибку перекрестного происхождения в Chrome, ваше изображение должно быть размещено на дружественном для совместного использования ресурсов (CORS) сайте, таком как GitHub Pages или Dropbox, и указать crossOrigin="Anonymous". Смотрите живой пример для демонстрации.

Способ достижения эффекта оттенков серого с помощью <canvas> заключается в удалении красных, зеленых и синих компонентов из любого выпадающего значения в значении пикселя при сохранении его уровня яркости (яркости). Один из способов сделать это — усреднить значения RGB следующим образом: grayscale = (red + green + blue) / 3;.

В приведенном ниже примере мы используем значения RGBa в формате (R,G,B,a) в данных изображения; красный канал data[0]зеленый канал data[1], и так далее. Затем мы получаем уровень яркости каждого из этих каналов (яркость) и усредняем их, чтобы превратить изображение в оттенки серого.

Живая демонстрация — холст HTML5

SVG-фильтр

Фильтры SVG имеют самую широкую поддержку (даже в Internet Explorer и Edge!), а также (почти) так же просты в использовании, как и фильтры CSS напрямую. Вы можете использовать их с тем же filter имущество. Фактически фильтры CSS произошли от фильтров SVG. Как и в случае с холстом, фильтры SVG позволяют выйти за пределы плоской плоскости двумерных эффектов, поскольку вы можете использовать затенение WebGL для создания еще более сложных результатов.

Есть несколько способов применить фильтр SVG, но в этом случае мы все равно будем использовать filter свойство на фоновом изображении, как и пример фильтра CSS для согласованности. Самая большая разница с фильтрами SVG заключается в том, что мы должны быть осторожны, чтобы включить этот фильтр и связать его с правильным путем. Это означает, что нам нужно импортируйте SVG на страницу над элементом, в котором мы его используем (что можно упростить, используя механизм шаблонов и включающие операторы).

Живая демонстрация — фильтр SVG


<svg>
  <filter id="grayscale-filter">
    <feColorMatrix type="saturate" values="0"/>
  </filter>
</svg>

.svgfilter-gray {
  background: url('img/bird.jpg');
  -webkit-filter: url(#grayscale-filter);
  filter: url(#grayscale-filter);
}

Производительность фильтра

Итак, как они складываются, когда дело доходит до начальной производительности рендеринга? Я создал тестовую страницу для каждого из них и использовал функцию сравнения WebPagetest в Chrome 47. Учитывая, что каждый тест давал несколько разные результаты, общую тенденцию можно резюмировать следующим образом:

Фильтр CSS, фильтр SVG и методы режима наложения CSS загружаются в относительно одинаковые временные рамки. Иногда фильтр SVG работал быстрее, чем режим наложения CSS (но всегда чуть-чуть) и наоборот. Как правило, CSS-фильтр загружался одним из самых быстрых. <canvas> всегда был самым медленным. Это наиболее важное понимание, полученное. <canvas> регулярно отставал от других методов в рендеринге изображения.

Справедливости ради я хотел также сравнить время загрузки нескольких изображений. Я создал десять представлений каждого (вместо одного) и снова запустил тесты:

Результаты были схожими (имейте в виду, что в каждом тесте были небольшие различия). Фильтр CSS в этом случае был на 0,1 мс медленнее, показывая, что между фильтрами CSS, режимами наложения и фильтрами SVG результаты для самого быстрого метода неубедительны. Однако HTML5 <canvas> заметно отстает от сравнения.

При более глубоком рассмотрении времени загрузки страницы с помощью рендеринга JavaScript и времени рендеринга рисования вы можете увидеть, что эта тенденция продолжается.

(Посмотреть большую версию)
Тип фильтра Время рендеринга Время рисовать
CSS-фильтр 12,94 мс 4,28 мс
Режим наложения CSS 12,10 мс 4,45 мс
SVG-фильтр 14,77 мс 5,80 мс
Фильтр холста 15,23 мс 10,73 мс

Снова, <canvas> потребовалось больше всего времени для рендеринга и больше всего времени для рисования, в то время как два варианта CSS были самыми быстрыми, а SVG оказался посередине.

Эти результаты имеют смысл, потому что <canvas> берет каждый отдельный пиксель и выполняет над ним операцию, прежде чем мы вообще сможем увидеть какое-либо изображение. Это требует много вычислительной мощности во время рендеринга. Хотя обычно SVG используются для векторной графики, я все же настоятельно рекомендую их. <canvas> при работе с эффектами растрового изображения. Мало того, что SVG быстрее, с ним гораздо проще работать и он более гибкий в DOM. Как правило, фильтры CSS даже более оптимизированы, чем фильтры SVG, поскольку исторически они являются ярлыками, возникающими из фильтров SVG и, таким образом, оптимизированными в браузерах.

#нет фильтра

А если без фильтра? Я сравнил наш общий самый быстрый метод (добавление фильтра CSS) с редактированием вашего изображения в программном обеспечении для редактирования фотографий перед его загрузкой (я использовал предварительный просмотр в Mac OS X, чтобы удалить насыщенность). При предварительном редактировании изображения я обнаружил в своих тестах постоянное улучшение производительности на 0,1 мс:

Вывод

Фильтры изображений — это интересный и эффективный способ обеспечить визуальное единство и эстетическую привлекательность в Интернете. Имейте в виду, что они немного снижают производительность, но также имеют преимущества быстрого дизайна в браузере и возможности проектирования взаимодействия с.

Для простых эффектов изображения используйте фильтры CSS, так как они имеют самую широкую поддержку и самое простое использование. Для более сложных эффектов изображения воспользуйтесь фильтрами SVG или режимами наложения CSS. Эффекты фильтра SVG особенно хороши из-за их возможностей манипулирования каналами и feColorMatrix. Режимы наложения CSS также предлагают несколько действительно приятных визуальных эффектов с перекрывающимися элементами на странице. Вы можете использовать аналогичные режимы наложения в SVG (например, feBlend), хотя они похожи на CSS background-blend-mode в том смысле, что взаимодействие относится к самому SVG, а не к окружающим элементам, например mix-blend-mode позволяет. Просто не используй <canvas> для фильтров.

Сокрушительная редакция
(рб, ог, ил)



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей - Вскрытие производительности веб-эффектов для изображений

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»