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

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

Использование 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 into the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    resolver 8.8.8.8; # Google DNS
    set $cdn_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 $cdn_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 $cdn_host_value;
    
    if ($from_optipic = "yes") {
        rewrite ^/(.*) /site-XXXXXX/$1 break;
        proxy_pass http://$cdn_host_value;
    }
    
    # get-param ?no_optipic=1 - get image from your hosting directly (without CDN OptiPic)
    try_files $uri 404;
}

#---------------------------------------
# OptiPic CDN 
# Requires enabled Apache modules: `rewrite`, `proxy_module` and `proxy_http_module`
# Add new 'IfModule mod_rewrite.c' block or inject into exist one
# Get support: https://optipic.io/get-free-help/?cdn=1
<IfModule mod_rewrite.c>
    RewriteEngine On
    SSLProxyEngine On

    RewriteCond %{QUERY_STRING} !no_optipic=
    RewriteRule "^(.*)\.(jpg|jpeg|png)$" "http://cdn.optipic.io/site-XXXXXX/$1.$2" [P]
</IfModule>
#----------------------------------------