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

Прежде чем проводить оптимизацию изображений, необходимо выбрать для них подходящий формат. Стандартными являются 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. Отлично подходит для обработки фото и больших высокохудожественных изображений.