Самый первый вопрос, который вы должны задать себе: действительно ли изображение необходимо для достижения желаемого эффекта. Если вы можете исключить ресурс изображения, который часто требует большого количества байтов по сравнению с HTML, CSS, JavaScript и другими ресурсами на странице, то это всегда лучшая стратегия оптимизации. Тем не менее, удачно расположенное изображение также может передать больше информации, чем тысяча слов, поэтому найти этот баланс зависит от вас.
Далее вам следует подумать, существует ли альтернативная технология, которая могла бы дать лучшие результаты, но более эффективно:
- Эффекты CSS (такие как тени или градиенты) и анимация CSS можно использовать для создания независимых от разрешения ресурсов, которые всегда выглядят четкими при любом разрешении и уровне масштабирования, часто при размере доли байтов, требуемых для файла изображения.
- Веб-шрифты позволяют использовать красивые шрифты, сохраняя при этом возможность выбора, поиска и изменения размера текста, что значительно повышает удобство использования.
Если вы когда-нибудь обнаружите, что кодируете текст в изображении, остановитесь и подумайте еще раз. Хорошая типографика имеет решающее значение для хорошего дизайна, брендинга и читабельности, но текст в изображениях усложняет взаимодействие с пользователем: текст нельзя выбрать, невозможно выполнить поиск, невозможно масштабировать, он недоступен и не дружелюбен для устройств с высоким разрешением. Использование веб-шрифтов требует собственного набора оптимизаций , но он решает все эти проблемы и всегда является лучшим выбором для отображения текста.
Выберите правильный формат изображения
Если вы уверены, что изображение — правильный вариант, вам следует тщательно выбрать подходящий тип изображения для работы.
- В векторной графике для представления изображения используются линии, точки и многоугольники.
- Растровая графика представляет изображение путем кодирования отдельных значений каждого пикселя в прямоугольной сетке.
Каждый формат имеет свой набор преимуществ и недостатков. Векторные форматы идеально подходят для изображений, состоящих из менее сложных геометрических фигур, таких как логотипы, текст или значки. Они обеспечивают четкие результаты при любом разрешении и настройке масштабирования, что делает их идеальным форматом для экранов с высоким разрешением и ресурсов, которые необходимо отображать в разных размерах.
Однако векторные форматы терпят неудачу, когда сцена сложна (например, фотография): количество разметки SVG для описания всех фигур может быть непомерно большим, а результат все равно может выглядеть не «фотореалистично». В этом случае вам следует использовать формат растрового изображения, такой как PNG, JPEG, WebP или AVIF.
Растровые изображения не обладают такими приятными свойствами, как независимость от разрешения или масштаба — при масштабировании растрового изображения вы увидите неровную и размытую графику. В результате вам может потребоваться сохранить несколько версий растрового изображения в разных разрешениях, чтобы обеспечить оптимальные возможности для ваших пользователей.
Последствия экранов с высоким разрешением
Существует два разных типа пикселей: пиксели CSS и пиксели устройства. Один пиксель CSS может напрямую соответствовать одному пикселю устройства или может поддерживаться несколькими пикселями устройства. Какой в этом смысл? Ну, чем больше пикселей устройства, тем точнее детализация отображаемого контента на экране.
Экраны с высоким разрешением (HiDPI) дают прекрасные результаты, но есть один очевидный компромисс: изображения требуют большей детализации, чтобы использовать преимущества большего количества пикселей устройства. Хорошей новостью является то, что векторные изображения идеально подходят для этой задачи, поскольку их можно визуализировать в любом разрешении с четкими результатами — вам могут потребоваться более высокие затраты на обработку для визуализации более мелких деталей, но базовый ресурс один и тот же и не зависит от разрешения. .
С другой стороны, растровые изображения представляют собой гораздо более сложную задачу, поскольку они кодируют данные изображения попиксельно. Следовательно, чем больше количество пикселей, тем больше размер файла растрового изображения. Рассмотрим разницу между фоторесурсом, отображаемым с разрешением 100x100 (CSS):
| Разрешение экрана | Всего пикселей | Размер несжатого файла (4 байта на пиксель) |
|---|---|---|
| 1x | 100 х 100 = 10 000 | 40 000 байт |
| 2x | 100 х 100 х 4 = 40 000 | 160 000 байт |
| 3x | 100 х 100 х 9 = 90 000 | 360 000 байт |
Когда мы удваиваем разрешение физического экрана, общее количество пикселей увеличивается в четыре раза: в два раза больше пикселей по горизонтали, в два раза больше количества пикселей по вертикали. Следовательно, экран «2x» не просто удваивает, а в четыре раза увеличивает количество необходимых пикселей!
Итак, что это означает на практике? Экраны высокого разрешения позволяют отображать красивые изображения, что может стать отличным преимуществом продукта. Однако экраны с высоким разрешением также требуют изображений с высоким разрешением, поэтому:
- По возможности отдавайте предпочтение векторным изображениям, поскольку они не зависят от разрешения и всегда обеспечивают четкие результаты.
- Если требуется растровое изображение, используйте адаптивные изображения .
Особенности разных форматов растровых изображений
Помимо различных алгоритмов сжатия с потерями и без потерь, разные форматы изображений поддерживают разные функции, такие как анимация и каналы прозрачности (альфа). В результате выбор «правильного формата» для конкретного изображения представляет собой сочетание соответствующих визуальных результатов и функциональных требований.
| Формат | Прозрачность | Анимация | Браузер |
|---|---|---|---|
| PNG | Да | Да ( APNG ) | Все |
| JPEG | Нет | Нет | Все |
| ВебП | Да | Да | Все современные браузеры. См. Могу ли я использовать? |
| АВИФ | Да | Да | Все современные браузеры. См. Могу ли я использовать? |
Существует два универсально поддерживаемых формата растровых изображений: PNG и JPEG. В дополнение к этим форматам современные браузеры поддерживают новые форматы изображений WebP и AVIF. Оба новых формата предлагают лучшее общее сжатие и больше возможностей. Итак, какой формат вам следует использовать?
WebP и AVIF обычно обеспечивают лучшее сжатие, чем старые форматы, и их следует использовать там, где это возможно. Вы можете использовать изображения WebP или AVIF вместе с изображением JPEG или PNG в качестве запасного варианта. Дополнительные сведения см. в разделе Использование изображений WebP .
Что касается старых форматов изображений, обратите внимание на следующее:
- Вам нужна анимация? Используйте элементы
<video>.- А как насчет гифки? GIF ограничивает цветовую палитру максимум 256 цветами и создает файлы значительно большего размера, чем элементы
<video>. APNG предлагает больше цветов, чем GIF, но также значительно больше, чем видеоформаты с достаточно эквивалентным визуальным качеством. См. раздел Замена анимированных изображений GIF видео .
- А как насчет гифки? GIF ограничивает цветовую палитру максимум 256 цветами и создает файлы значительно большего размера, чем элементы
- Вам нужно сохранить мелкие детали с самым высоким разрешением? Используйте PNG или WebP без потерь.
- PNG не применяет никаких алгоритмов сжатия с потерями, кроме выбора размера цветовой палитры. В результате получается изображение высочайшего качества, но за счет значительно большего размера файла, чем в других форматах. Используйте разумно.
- WebP имеет режим кодирования без потерь, который может быть более эффективным, чем PNG.
- Если ресурс изображения содержит изображения, состоящие из геометрических фигур, рассмотрите возможность преобразования его в векторный формат (SVG)!
- Если изображение содержит текст, остановитесь и подумайте еще раз. Текст на изображениях недоступен для выбора, поиска или «масштабирования». Если вам нужно придать индивидуальный внешний вид (для брендинга или по другим причинам), используйте вместо этого веб-шрифт.
- Вы оптимизируете фотографию, снимок экрана или подобное изображение? Используйте JPEG, WebP с потерями или AVIF.
- JPEG использует комбинацию оптимизации с потерями и без потерь для уменьшения размера файла изображения. Попробуйте несколько уровней качества JPEG, чтобы найти наилучшее соотношение качества и размера файла для вашего ресурса.
- WebP с потерями или AVIF с потерями — отличная альтернатива JPEG для изображений веб-качества, но имейте в виду, что в режиме с потерями часть информации отбрасывается для получения изображений меньшего размера. Это означает, что выбранные цвета могут не совпадать с эквивалентными цветами в формате JPEG.
Наконец, обратите внимание: если вы используете WebView для отображения контента в приложении, специфичном для вашей платформы, вы имеете полный контроль над клиентом и можете использовать исключительно WebP! Facebook и многие другие используют WebP для доставки всех своих изображений в свои приложения — экономия определенно того стоит.
Влияние на наибольшую содержательную отрисовку (LCP)
Изображения могут быть кандидатами на LCP . Это означает, что размер изображения влияет на время его загрузки . Когда изображение является кандидатом на LCP, эффективное кодирование этого изображения имеет решающее значение для улучшения LCP.
Вам следует стремиться применять советы, данные в этом руководстве, чтобы восприятие страницы было максимально быстрым для всех пользователей. LCP является частью оценки производительности восприятия, поскольку он измеряет, насколько быстро отображается самый большой (и, следовательно, наиболее воспринимаемый) элемент на странице.