Блог

Изображения в современных форматах

Проверка сайта посредством PageSpeed Insights, в результатах аудита может выдать рекомендацию: Используйте изображения в современных форматах. Если учитывать растровые изображения, то они могут занимать до 50% всего веса сайта. Из-за этого, он достаточно долго загружается несмотря на проведённую оптимизацию. А то, как известно, пользователям совсем не нравится. Отсутствие быстрого взаимодействия — основная точка отказа, которая влечёт за собой снижение конверсии.

Прежде чем проводить оптимизацию изображений, необходимо выбрать для них подходящий формат. Стандартными являются GIF, PNG или JPEG, которые поддерживаются всеми браузерами. Выбор в пользу одного из них стоит делать в зависимости от конкретного типа контента — гифка, фото, детализированная картинка и прочее. Но, помимо данных стандартов, существуют и современные форматы изображений.

Какие форматы изображений Google называет современными

Современных форматов изображений существует три:

● JPEG 2000

● JPEG XR

● WebP

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

Существует только одна проблема – JPEG 2000, JPEG XR и WebP поддерживаются не всеми браузерами. Они работают с Chrome и Opera. Соответственно, потребуется добавить дополнительную линейку, которая будет отправлять пользователю контент в нужном ему формате. Использование специальных сетевых инструментов позволяет проводить оптимизацию автоматически.

Чтобы посмотреть сколько места потенциально можно сэкономить, достаточно нажать View Details и там будут указаны необходимые для страницы данные. Как правило, использование формата WebP вместо JPEG позволяет освободить примерно 30% места исходя их одной картинки. Если вы хотите просто пройти данный аудит — просто закодируйте все изображения на сайте в WebP.

Изображения в формате WebP

WebP является современным форматом изображений, который сжимает картинки с потерями либо без потерь. Используя его можно создать более мелкие и насыщенные картинки, которые будут загружаться значительно быстрее, ускорять взаимодействие с сайтом и снижать потребление трафика. Одно из преимуществ WebP — его интеграция с браузерами Google Chrome, Firefox, Edge, Opera и другими программами ПО.

Если сравнивать, то изображения без потерь в WebP на 26% меньше по сравнению с PNG. А с потерями — на 25-34% меньше сопоставимых изображений JPEG. Помимо этого, формат поддерживает альфа-канал, добавляя к картинке только 22% дополнительных байтов. Если же производить данную манипуляцию «с потерями», то это значение будет ещё меньшим.

Как работает WebP

Сжатие с потерями в WebP использует прогнозирующее кодирование изображения. Этот же метод используется видеокодеком VP8 для сжатия ключевых кадров в видео. Прогнозирующее кодирование использует значения в соседних блоках пикселей для прогнозирования значений в блоке, а затем кодирует только разницу.

Сжатие без потерь WebP использует уже видимые фрагменты изображения для точного восстановления новых пикселей. Также может использоваться локальная палитра, если интересного совпадения не найдено.

WebP включает в себя легковесную библиотеку кодирования и декодирования libwebp и инструменты командной строки cwebpи dwebp для преобразования изображений в формат WebP и обратно. А также инструменты для просмотра, мультиплексирования и анимации изображений WebP.

Как использовать WebP на сайте

Не смотря на то, что формат изображений WebP рекомендован Google в качестве приоритетного для использования, движок WordPress его не поддерживает. Следовательно, загружать картинки непосредственно в нём — нельзя. Для этого нужно использовать плагины.

Все плагины есть на wordpress.org, в том числе и его русской версии. Если перейти в них из рекомендаций аудита, то они откроются автоматически. Для работы потребуется WebP Express. С помощью выбранного плагина можно провести автоматическую конвертацию изображений в WebP, вместо PNG или JPEG.

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

Использовать WebP очень просто, его достаточно установить на ПК и активировать из «админки». Самое сложное в процессе использования — правильно настроить плагин. Если сайт не требует специфических действий, то подойдут стандартные настройки. Будьте внимательны — русскоязычной версии данного плагина нет, но можете использовать сервисный переводчик.

Особенно обратите внимание на пункт, где будет необходимо произвести настройки с кэшированием страниц или без кеширования страниц. Как только вы сохраните настройки, все правила окажутся в вашем файле .htaccess. И не забудьте проверить его работу в различных браузерах.

JPEG 2000

JPEG 2000 — современный графический формат, который был создан в 2000 году, как несложно догадаться из названия. Он пришёл на смену традиционному JPEG, образца 1992 года. Их основное отличие в системе преобразования. Изначальная версия базировалась на основе дискретного косинусного, а новый метод — на вейвлет-преобразовании. Другими словами — волновых пакетах.

Подобная система позволяет сделать изображение более чётким и гладким, при этом его размер будет меньше, нежели в стандартном варианте.

JPEG XR

JPEG XR впервые опубликован в 2009 году. Ранее он был известен под названиями HD Photo и Windows Media Photo. Может похвастаться лучшим сжатием и поддерживает сжатие без потерь, альфа-канал и 48-битный глубокий цвет по сравнению с обычным форматом jpg. Отлично подходит для обработки фото и больших высокохудожественных изображений.

Похожие записи