Как конвертировать в WebP все изображения на Magento

Почему стоит использовать WebP для Magento?

Использование Webp решает проблему "Используйте современные форматы изображений" в Google Pagespeed Insights.

Если вкратце, то WebP сжимает файл лучше при прочих равных, чем более старые форматы (png и jpeg) - а значит занимает на хостинге меньше места и быстрее загружается в браузере при просмотре страницы.

Внедрение WebP активно пропагандируется Google-ом - они предоставляют такую статистику:

• WebP сжимает изображения без потерь на 26% лучше, чем PNG.
• WebP сжимает изображения с потерями лучше, чем JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM)
• WebP поддерживает прозрачность без потерь (известную, как альфа-канал) при увеличении размера всего лишь на 22%.

Если браузер посетителя не поддерживает WebP, то CDN отдаст старый формат (png/jpeg), но сжатый (оптимизированный под Web)

Что такое сжатие изображений

Оптимизация картинок является специальной обработкой графического файла с целью минимизировать его размер без потери визуального качества.

Чтобы провести данную процедуру, есть большое количество достаточно сложных алгоритмов. Однако, все они базируются на одной основе — из графического файла нужно удалить все находящиеся там служебные данные (например название программы, которая хранит данный файл и др), а также, при помощи специальных программ соединить/сгладить похожие цвета.

В результате мы получаем то же изображение, которое визуально никак не изменилось. Однако, объем (вес) этого файла в байтах будет гораздо меньше, чем оригинал. Если провести данную обработку правильно, файл с изображением можно уменьшить до 98%, не теряя при этом качества изображения.

Это значит, что картинки на страницах сайта будут загружаться в разы быстрее после проведения их оптимизации.

Что даст оптимизации изображений для вашего сайта

• Экономия места на диске.
• Ускорение загрузки страниц.
• Минимальная нагрузка на сервер.
• Увеличение конверсии.
• Более качественное ранжирование сайта при поисковой выдаче.

Доказано, что ускорение сайта способно улучшить поведенческие факторы, а также поднять конверсию сайта (увеличить продажи). Чем дольше будет загружаться страница сайта, тем меньше покупателей сможет совершить там определенные целевые действия. Если Ваш сайт в Интернете будет работать не достаточно быстро, у Вас есть все шансы упустить свой потенциальный доход. Ускорение работы интернет-ресурса даст возможность улучшить конверсию и благодаря этому значительно увеличить выручку и привлечь больше клиентов.

Преимущества сервиса CDN OptiPic

• Отсутствуют ежемесячные платежи.
• Полная автоматизация.
• Предоставление бесплатной помощи при подключении.
• Для подключения и использования сервиса не нужно иметь специальных навыков в программировании или администрировании.
• В системе отсутствуют ограничения на размер изображений.
• Техподдержка на русском языке.

Каким образом оптимизация изображений может ускорить сайт?

Страница любого сайта чаще всего состоит из:

• изображений;
• html-кода (текстовое содержание, верстка, разметка);
• видео;
• javascript-скриптов с логикой, выполняющихся со стороны браузера;
• файлов-css со стилями страницы.

Такой пункт как изображения, занимает на страницах сайта большую часть всего объема и является самой «тяжелой» частью страниц. Уменьшение (оптимизация) изображений бесспорно позволит существенно сделать более быстрой загрузку любого интернет-ресурса.

Соответственно, если изменить (в меньшую сторону) объем изображений, все страницы сайта начнут грузиться значительно быстрее.

Сжатие картинок на сайте даст возможность уменьшить их объем до 75-98%, не теряя при этом свое визуальное качество.

php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"

; Automatically add files before PHP document.
; http://php.net/auto-prepend-file
auto_prepend_file = <SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php

# OptiPic CDN: insert it before the Server structure
upstream cdn_optipic { server cdn.optipic.io; }

# OptiPic CDN: insert it into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    set $host_value "cdn.optipic.io";
    set $from_optipic "yes"; # to disable CDN OptiPic - set "no" value
    if ($arg_no_optipic) {
        set $from_optipic "no";
        set $host_value $host;
    }
    
    proxy_redirect     off;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header Host $host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://cdn_optipic;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}

Начните прямо сейчас с БЕСПЛАТНОГО пакета

Оплата единоразовая — никаких ежемесячных платежей

Купленный пакет не сгорает в конце месяца - выгодно приобретать на несколько месяцев вперед

Нас рекомендуют

Общая оценка — 4.55 (122 отзывов)

Отличное решение для корректного сжатия изображений

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

Отличный продукт

Отличный продукт, хорошо сжимает изображения без потери качества. Рекомендую.

Отличное решение

Думал перед покупкой. Стоит ли? Зря думал. Стоит. Было 2 ГГб картинок - стало 400 Мб. Сжатие почти 90%. Отресайзил все картинки, с которыми было лень возиться. Настройки гибкие. Техподдержка на высоте. Моментально отвечают и подсказывают. Обещают обновления с улучшением функционала. Одним словом - рекомендую. Спасибо разработчикам.

Классное решение

Экономит много времени. Существенно ускоряет загрузку сайта. Оптимизаторы оценят. Рекомендую

Достойное решение для оптимизации графического контента

Приятно был удивлен данным решением. Прост в настройке и в управлении. Давно искал что-то подобное. Разработчикам огромное спасибо !!!

Все отзывы

О нас пишут популярные издания и специалисты