WebP - интересный формат изображений

WebP

В самом начале работы над сайтом HerlufBidstrup.com мне нужно было определиться в каком формате хранить изображения. Сайт посвящен датскому художнику-карикатуристу Херлуфу Бидструпу и практически весь контент сайта состоит из изображений с работами художника.

Изначально был выбран формат JPEG. Но суммарный объем картинок одного комикса мог легко превышать один мегабайт, не говоря уже о главной странице сайта, на которой находится галерея работ. Проверка Google выдавала предупреждение о том что загружаемые изображения имеют слишком большой объем, в результате чего понижался индекс скорости загрузки сайта. При попытке понизить качество изображений размеры файлов менялись не значительно, чего нельзя было сказать о самих изображениях - они становились неприемлемы.

Вот для примера увеличенные фрагменты двух изображений JPEG размером 1000х1000 точек. Слева при качестве JPEG 75% объем файла составил 70 килобайт. Справа при качестве JPEG 40% объем файла составил 40 килобайт. Но при этом качество самого изображения стало ужасным - появилось множество артефактов.

Артефакты на изображении

Я пробовал использовать формат PNG, но файлы получались ещё большего размера. Также, в виду того что все изображения в процессе обработки переводятся в векторный формат, я пробовал использовать формат SVG, но эти файлы получались ещё больше. Перебирая другие форматы я наткнулся на формат WEBP.

Сначала я не поверил своим глазам! Я смог понизить качество сжатия WEBP до 20% практически не потеряв качества изображения. При этом размер файла уменьшался в несколько раз! Вот пример. Слева при качестве JPEG 75% объем файла составил 70 килобайт. Справа при качестве WEBP 20% объем файла составил 23 килобайт!

Сравнение JPEG и WEBP

Разбираясь с форматом WEBP я узнал что в нём для сжатия изображения используется алгоритм сильно отличающийся от алгоритма JPEG. Алгоритм сжатия WEBP пытается усреднить соседние области, делая их более однородными. Если обычную фотографию сохранить в формате WEBP с низким качеством, то она станет сильно сегментированной с множеством однотонных областей. Но для черно-белых рисунков Херлуфа Бидструпа это было то что нужно!

Правда моя радость была не долгой. После конвертации изображений сайта в формат WEBP я обнаружил что в некоторых браузерах картинки не отображаются вообще. Выяснилось, что формат WEBP был разработан Google в качестве основного формата изображений в интернете. Однако Apple отказалась поддерживать в своих браузерах этот формат, так как они разработали свой. Firefox также отказался поддерживать этот формат. Во многих источниках говорилось что на данный момент все разногласия между компаниями разрешены и формат WEBP отныне поддерживается всеми браузерами, но на деле это оказалось не так.

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

Самым простым и самым действенным оказался метод подмены файла через htaccess. Когда браузер запрашивает файл image.jpg сервер проверяет - поддерживает ли браузер формат WEBP. Проверка осуществляется через заголовок запроса Accept, в котором содержится информация о том какие типы контента поддерживаются. Если среди поддерживаемых форматов есть WEBP, то проверяется есть ли файл с таким же именем, но с расширением *.webp. Если таковой есть будет использоваться этот файл. Во всех других случаях будет использоваться файл image.jpg.

При использовании этого метода достаточно чтобы рядом с файлами формата JPEG находились файлы формата WEBP с такими же именами, но с расширением *.webp. Ниже приведено содержимое файла htaccess, который нужно разместить в директории со статическими изображениями сайта. Естественно данный метод предназначен для серверов на базе Apache с включенными модулями mod_rewrite, mod_headers и mod_mime.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteCond %{HTTP_ACCEPT} image/webp
	RewriteCond %{REQUEST_URI}  (.*)(\.(jpe?g|png))$
	RewriteCond %{DOCUMENT_ROOT}/%1\.webp -f
	RewriteRule .* %1\.webp [L,T=image/webp]
</IfModule>
<IfModule mod_headers.c>
	Header append Vary Accept env=REDIRECT_accept
</IfModule>
<IfModule mod_mime.c>
	AddType image/webp .webp
</IfModule>

Далее мне оставалось только доработать скрипт создающий набор изображений под разные разрешения экранов так, чтобы он сохранял одновременно и файлы в формате JPEG, и файлы в формате WEBP. После этого проверка Google больше не выдает сообщение о больших объемах файлов с изображениями и индекс скорости загрузки сайта не понижается.