Самый первый вопрос, который вы должны задать себе: действительно ли изображение необходимо для достижения желаемого эффекта. Хороший дизайн прост и всегда обеспечивает наилучшую производительность. Если вы можете исключить ресурс изображения, который часто требует большого количества байтов по сравнению с 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 | Да | Нет | Все |
| JPEG | Нет | Нет | Все |
| ВебП | Да | Да | Все современные браузеры. См. Могу ли я использовать? |
| АВИФ | Да | Да | Нет. См. Могу ли я использовать? |
Существует два универсально поддерживаемых формата растровых изображений: PNG и JPEG. Помимо этих форматов, современные браузеры поддерживают новый формат WebP, и лишь некоторые поддерживают новый формат AVIF. Оба новых формата предлагают лучшее общее сжатие и больше возможностей. Итак, какой формат вам следует использовать?
WebP и AVIF обычно обеспечивают лучшее сжатие, чем старые форматы, и их следует использовать там, где это возможно. Вы можете использовать изображения WebP или AVIF вместе с изображением JPEG или PNG в качестве запасного варианта. Дополнительные сведения см. в разделе Использование изображений WebP .
Что касается старых форматов изображений, обратите внимание на следующее:
- Вам нужна анимация? Используйте элементы
<video>.- А как насчет гифки? GIF ограничивает цветовую палитру максимум 256 цветами и создает файлы значительно большего размера, чем элементы
<video>. См. раздел Замена анимированных изображений GIF видео .
- А как насчет гифки? GIF ограничивает цветовую палитру максимум 256 цветами и создает файлы значительно большего размера, чем элементы
- Вам нужно сохранить мелкие детали с самым высоким разрешением? Используйте PNG или WebP без потерь.
- PNG не применяет никаких алгоритмов сжатия с потерями, кроме выбора размера цветовой палитры. В результате будет получено изображение высочайшего качества, но при этом размер файла будет значительно выше, чем в других форматах. Используйте разумно.
- WebP имеет режим кодирования без потерь, который может быть более эффективным, чем PNG.
- Если ресурс изображения содержит изображения, состоящие из геометрических фигур, рассмотрите возможность преобразования его в векторный формат (SVG)!
- Если изображение содержит текст, остановитесь и подумайте еще раз. Текст на изображениях недоступен для выбора, поиска или «масштабирования». Если вам нужно придать индивидуальный внешний вид (для брендинга или по другим причинам), используйте вместо этого веб-шрифт.
- Вы оптимизируете фотографию, снимок экрана или подобное изображение? Используйте JPEG, WebP с потерями или AVIF с потерями.
- JPEG использует комбинацию оптимизации с потерями и без потерь для уменьшения размера файла изображения. Попробуйте несколько уровней качества JPEG, чтобы найти лучшее соотношение качества и размера файла для вашего ресурса.
- WebP с потерями или AVIF с потерями могут быть приемлемыми альтернативами JPEG, но имейте в виду, что режим с потерями WebP, в частности, отбрасывает некоторую информацию о цветности для получения изображений меньшего размера. Это означает, что выбранные цвета могут не совпадать с эквивалентными цветами в формате JPEG.
Наконец, обратите внимание: если вы используете WebView для отображения контента в приложении, специфичном для вашей платформы, вы имеете полный контроль над клиентом и можете использовать исключительно WebP! Facebook и многие другие используют WebP для доставки всех своих изображений в свои приложения — экономия определенно того стоит.
Влияние на наибольшую содержательную отрисовку (LCP)
Изображения могут быть кандидатами на LCP . Это означает, что размер изображения влияет на время его загрузки . Когда изображение является кандидатом на LCP, эффективное кодирование этого изображения имеет решающее значение для улучшения LCP.
Вам следует стремиться применять советы, данные в этой статье, чтобы восприятие страницы было настолько быстрым, насколько это возможно для всех пользователей. LCP является частью производительности восприятия, поскольку он измеряет, насколько быстро отображается самый большой (и, следовательно, наиболее воспринимаемый) элемент на странице.