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