Как сохранить картинки в WEBP
Уже давно не секрет среди вебмастеров, что привычные форматы изображений в интернете как: JPEG, JPG, PNG а иногда даже SVG являются устаревшими. Хотя не столько устаревшими, а тяжеловесными. Но мы то знаем, что уже на протяжении многих лет приоритетным фактором ранжирования сайтов в поисковой выдаче является – скорость загрузки.
Вот Google взяла инициативу в свои руки и представила новомодный формат изображений для интернета WEBP который считается легковесным. За счет своего инновационного алгоритма может весить легче аж до 80% своих предыдущих собратьев по формату, но это не всегда так, в среднем это где-то 40-60%.
Кстати Microsoft тоже решил тогда выделиться и выпустил свой формат JPEG-XR. Кстати тоже признанный как бы инновационным на ровне с WEBP, но существенно уступает второму во многих тестах.
Долго говорить об этом нет смысла, новых форматов было представлено достаточно и фаворитом стал WEBP, за что и получил более широкое распространение на слуху вебмастеров. Кстати новомодный WEBP успешно отображается только в браузерах на движке Chromium и не в самых старых версиях (Chrom, Yandex). Думаю что поддержка WEBP будет доступна в самое ближайшее время и для других браузеров, но пока этого не произошло предлагаю не спешить с переименованием всех своих картинок в WEBP, а воспользоваться следующей конструкцией кода для .htaccess:
RewriteEngine On
# Check if browser supports WebP images
RewriteCond %{HTTP_ACCEPT} image/webp
# Check if WebP replacement image exists
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
# Serve WebP image instead
RewriteRule (.+)\.(jpe?g|png|PNG|JPG|jpg)$ $1.webp [T=image/webp,E=accept:1]
Header append Vary Accept env=REDIRECT_accept
AddType image/webp .webp
Исходя из кода видно, что если браузер пользователя не поддерживает WEBP, то ему будут отображаться изображения в привычном формате, а если иначе, то произойдет замена изображений на WEBP. Кстати, чтобы корректно произошла замена необходимо с конвертированные изображения положить рядом с оригиналами (т.е. в ту же папку).
Как конвертировать в WEBP?
Можно воспользоваться онлайн сервисами как платными, так и бесплатными. Но лично Я пользуюсь бесплатной софтиной XnConvert. Она может преобразовывать изображения в различные форматы, а так же можно выставлять уровень сжатия во время конвертации.
Попытка номер два! Как то задался этим вопросом, только вот код не подставлял вебп вместо простых изображений. Сейчас твой попробую. Картинки ещё с прошлого раза остались. По результату отпишусь.
У меня получается только когда NGINX работает в связке с Apache.
Короче нифига. У меня тоже связка nginx+apache, и всё равно не работает. Решил внедрить прям в шаблон этот формат. Только так работает. Включил на уровне nginx webp формат, но он без проверки, сразу пытается подставить этот формат. По итогу, только в опере и хроме будут картинки, а мне нужно было с проверкой, если поддерживает, то заменять. Пока что, только в ручную работает как надо.
XnConvert — вот так сюрприз, а я давно пользуюсь ихними другими продуктами, надвно искал как конвертировать, нашел он-лайн сервис. Спасибо за наводку!
Хм… не знал про прогу эту, нужно будет попробовать спасибо.
Варианты с прогами — это всё танцы с бубном. Нужно, чтобы плагин конвертировал «на лету» и уже загруженное по желанию.
Роман! Решение с .htaccess очень и очень стрёмное. Это, по сути, очень смахивает на старый добрый клоакинг и за него вполне можно неожиданно огрести проблем от поисковиков вплоть до бана. Правильным будет не скрывать/подменять контент (картинки тоже контент сайта), а использовать для этого тэг PICTURE, в котором первым указывается вариант картинки в WEBP и потом, например JPG, для устройства, которое не понимает нового формата.