Исследование Experienced Dynamics показало, что неоптимизированный контент — это причина роста отказов. 70% пользователей закрывают неудобные сайты. А поведение пользователей влияет на позицию в поисковой выдаче. Поэтому все стараются сделать сайты максимально комфортными в использовании и быстрыми.
JPEG 2000, JPEG XR и WebP — это форматы изображений, которые обладают превосходными характеристиками сжатия и качества по сравнению с аналогами JPEG и PNG. По данным Google, кодирование изображений в этих форматах помогает быстрее загружать веб-страницы и потреблять меньше мобильного трафика.
Рассказываем о формате WebP и его подключении к онлайн-проекту.
Чем отличается формат WebP
WebP — современный формат сжатия изображений, который за счет меньшего размера картинок позволяет ускорить загрузку сайта у пользователей.
По результатам исследования Google:
- Картинка в WebP, сжатая без потерь, меньше PNG на 26%.
- Картинка в WebP, сжатая с потерями, меньше JPEG на 25-34%.
Формат WebP разработан в 2010 году компанией Google. Поддерживает сжатие с потерями и без, а также полупрозрачность и анимацию. Он считается одним из лучших, поскольку дает значительное улучшение производительности сайта.
Как преобразовать изображения в WebP
Изображения можно преобразовать самостоятельно или с помощью модуля хостинга.
Конвертация с помощью специальных сервисов
Для конвертации используйте один из специальных сервисов. Выбирайте любой — все просты в применении:
Загружаете картинку и получаете ее в новом формате на сайте или по почте.
Конвертация на стороне хостинга
Другой способ: подключить модуль на хостинге. Он доступен на виртуальных серверах RED.Site и включается за 2 клика. Это бесплатно.
Как это работает: вы загружаете изображения в любом формате, например в JPG или PNG. Модуль конвертирует их в формат WebP. Отметим, что новые изображения займут дополнительное место на тарифе, но будут в несколько раз меньше оригиналов. Поэтому перед подключением убедитесь в достатке места.
После изображения автоматически отдаются браузеру в подходящем формате: тем браузерам, которые пока не поддерживают WebP, будет отдаваться обычный формат изображения. Например, это устаревшие версии браузеров.
Ускоряйте работу сайта с форматом WebP!
Статья подготовлена Reddock — хостинг для 1С-Битрикс.
WebP лишь с недавних пор поддерживается на маках, начиная с Big Sur. Частично.
На iOS тоже есть свои накладки. Не у всех пользователей устройств Apple самая свежая версия ОС.
JPEG 2000, JPEG XR - форматы, разработанные Google и активно продвигаемые в Page Speed Insights... Вот только ни один браузер на основе гугловского Chromium (включая Chrome) их не поддерживает.
После перехода на webp в проекте сразу же выросла глубина просмотра и время на сайте примерно на 20%, соответственно отразилось на конверсии - min 5%
Крутые результаты!
Должно становиться лучше, но по факту, если вы изначально следили за оптимизацией своих фото, то такого эффекта не будет. У меня есть сайт, где переход на webp дал результат в пределах погрешности.
Вячеслав, благодарим за участие. Можете поделиться подробнее, в каком случае не удается оптимизировать изображения? Ваш опыт может помочь другим.
так я же написал
если вы изначально следили за оптимизацией своих фотоправила просты, думаю вам прекрасно известны и к webp применимы:
-следить чтобы те, кто занимается контентом не использовали фото в формате tiff под 60 мегабайт весом. Постоянно такое вижу, спасибо, что не raw прям с зеркалки.
-использовать фото с разрешением не превышающие максимальный размер блока для которого они предназначены, миниатюра 30х40px сделанная фйлом разрешением 4к и размером 30 мегабайт никому не нужна.
-использовать качество сжатия джипега не выше 70%, а вообще опираться на то, что изображено на фото. Часто на картинке нет таких мелких и тонких деталей на которых лезут артефакты при сжатии и её можно очень сильно "зашакалить".
Ну и общее правило. Там где возможно подключать SVG и спрайты и не использовать для иконок соцсетей джипеги и упаси боже целые шрифты типа fontawesome. Не картинками едиными.
Вячеслав, благодарим за конкретику. Очень полезно. Думаем, многие читатели оценят :)
У нас была проблемка, мы ее заметили именно в процессе перехода, когда считали размеры и время отклика.
У WebP действительно хорошие показатели сжатия (это не единственный новый формат такого типа - с 2015 года есть к примеру формат AVIF, AV1 Still Image File Format), но
Другой способ: подключить модуль на хостинге.1) все сохранённые картинки тоже будут в формате webp, что не всем пользователям нравится (не все десктопные просмотрщики и не все файловые менеджеры полноценно работают с новыми графическими форматами).
2) превью сайта в TG/VK (возможно, и в других случаях) придётся формировать с помощью JPEG или PNG, поэтому при внимании к этой детали стоит заложить в проект необходимость конверсии части картинок в один из старых форматов.
Отметим, что новые изображения займут дополнительное место на тарифе, но будут в несколько раз меньше оригиналов.
Могут быть промежуточные решения с разным потреблением процессорного времени и места на диске, например картинка может быть пропущена через сервер генерации превью (imgproxy/thumbor/picfit/imaginary), затем результат может быть закэширован nginx/apache. В случаях, когда картинка в итоговом формате генерируется из своего прообраза на сервере, дополнительное место долговременно не занимается - тратится только немного дополнительного времени на генерацию.
Спасибо за развернутый комментарий!
У WebP действительно хорошие показатели сжатия (это не единственный новый формат такого типа - с 2015 года есть к примеру формат AVIFAVIF рекомендуют использовать для ускорения загрузки страниц, но пока он не настолько популярен: работает с 37% браузеров. Будем ожидать его роста!
Могут быть промежуточные решенияСогласны, также есть различные модули, которые могут конвертировать изображения. Каждый находит наиболее удобный способ. Мы поделились своим :)
А каким способом вы чаще всего конвертируете изображения в WebP?
Подскажите, а если забочусь всё-таки о качестве фотографии, то лучше JPG оставить, а не Webp? Потому что сконвертил сейчас в webp и оно мыльное какое-то, детали не такие чёткие.
Подскажите, сталкивался ли кто-нибудь с тем, что у webp изображений не отображается атрибут "alt"? Конвертировал все изображения на своем ресурсе и теперь все сервисы сео оптимизации ругаются на то, что все картинки не содержат alt.