Categories: SEO

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

Автор блога, SEO-специалист. Продвигаю сайты с 2011 года. Бригадир студии копирайтинга "Text-Hunter.ru" из 14 авторов. Практик эффективного крауд-маркетинга и нестандартного линкбилдинга. Ведущий эксперт поисковой оптимизации в компании IMarketing (Казахстан).

Роман Бондарь

Автор блога, SEO-специалист. Продвигаю сайты с 2011 года. Бригадир студии копирайтинга "Text-Hunter.ru" из 14 авторов. Практик эффективного крауд-маркетинга и нестандартного линкбилдинга. Ведущий эксперт поисковой оптимизации в компании IMarketing (Казахстан).

View Comments

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

    • У меня получается только когда NGINX работает в связке с Apache.

      • Короче нифига. У меня тоже связка nginx+apache, и всё равно не работает. Решил внедрить прям в шаблон этот формат. Только так работает. Включил на уровне nginx webp формат, но он без проверки, сразу пытается подставить этот формат. По итогу, только в опере и хроме будут картинки, а мне нужно было с проверкой, если поддерживает, то заменять. Пока что, только в ручную работает как надо.

  • XnConvert - вот так сюрприз, а я давно пользуюсь ихними другими продуктами, надвно искал как конвертировать, нашел он-лайн сервис. Спасибо за наводку!

  • Хм... не знал про прогу эту, нужно будет попробовать спасибо.

  • Варианты с прогами - это всё танцы с бубном. Нужно, чтобы плагин конвертировал "на лету" и уже загруженное по желанию.

  • Роман! Решение с .htaccess очень и очень стрёмное. Это, по сути, очень смахивает на старый добрый клоакинг и за него вполне можно неожиданно огрести проблем от поисковиков вплоть до бана. Правильным будет не скрывать/подменять контент (картинки тоже контент сайта), а использовать для этого тэг PICTURE, в котором первым указывается вариант картинки в WEBP и потом, например JPG, для устройства, которое не понимает нового формата.

Recent Posts

Как оценить компанию на фондовом рынке

Как оценить компанию на фондовом рынке своими руками и сделать правильный выбор о покупке акций…

10 месяцев ago

Как оптимизировать сайт на WordPress

Для того чтобы максимально эффективно оптимизировать сайт на WordPress, нужно максимально избегать применение плагинов и…

1 год ago

Как майнить биткоин на мобиле

Майнинг – это один из способов заработка денежных средств при помощи криптовалюты, который будет зависеть…

2 года ago

Создаем и подключаем RSS ленту для Пульса от Mail.ru

С недавних пор сервис "Пульс" который принадлежит конторе Mail.ru созданный по образу и подобию Яндекс…

2 года ago

Какие тексты любит поисковик

Для себя я выделил несколько важных критериев, которые нужно учитывать при написании хороших текстов, которые…

2 года ago

301 редирект с WWW на без WWW сайта на IIS + ASP.NET

Для того чтобы создать 301 редирект с WWW на основное зеркало без WWW для сайта…

2 года ago