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

CDN OptiPic — простое решение проблемы "Используйте современные форматы изображений"

Умная конвертация в WebP на лету

Что делает CDN OptiPic при попытке запросить у него изображение:

Отдает Webp-версию изображения
если браузер поддерживает WebP
Отдает сжатую версию без Webp
если браузер не поддерживает WebP
Адаптирует под узкие экраны
если изображение открывается с мобильного
Кеширует и ускоряет загрузку
снимая нагрузку с вашего хостинга

Конвертация в Webp и сжатие изображений происходит в фоновом режиме и никак не замедляет отдачу изображений.
Если оптимизированная версия еще не готова на момент запроса изображения - отдается исходная версия без какой-либо обработки.

Подробнее о подключении

Как работает умный CDN OptiPic?

Конвертирует в WebP - передовой формат изображений
Решает проблему "Используйте современные форматы изображений" в Google Pagespeed Insights

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

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

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

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

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

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

Сжимает изображения

Если браузер посетителя не поддерживает Webp, то посетителю отдаются изображения в исходном формате (png/jpeg), но предварительно сжатые/оптимизированные.

Адаптирует под мобильные телефоны

Если посетитель открывает сайт с мобильного телефона, то изображения не только автоматически сжимаются или конвертируются в Webp, но и автоматиечески уменьшаются по ширине (чтобы еще сильнее ускорить загрузку изображений при мобильном интернете)

Кеширует и ускоряет загрузку

Изображения не будут каждый раз конвертироваться, оптимизироваться и сжиматься на лету при каждом запросе. Все эти процедуры CDN проведет единоразово для запрашиваемого изображения. В фоновом режиме, чтобы не тормозить отдачу изображений посетителю вашего сайта.

Сравнение CDN и Классической интеграции OptiPic

Как подключить CDN OptiPic?

Вариант #1: Используйте плагин для вашей CMS

Все поддерживаемые CMS

Вариант #2: Универсальное подключение через Nginx (проксирование)

URL изображений на сайте не изменяются. Просто теперь весь трафик изображений автоматически перенаправляется на CDN OptiPic

# outside the Server structure
upstream cdn_optipic { server cdn.optipic.io; }

# inside the Server structure
location  ~* \.(png|jpg|jpeg)$ {
    set $host_value "cdn.optipic.io";
    set $from_optipic "yes";
    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_opitpic=1 - get image from your hosting directly (without CDN OptiPic)
    if ($from_optipic = "no") {
        proxy_pass http://XXX.XXX.XXX.XXX;
    }
}

XXXXXX — id вашего сайта в личном кабинете CDN OptiPic
XXX.XXX.XXX.XXX — Адрес вашего веб-сервера. К примеру, 127.0.0.1:8080
Документация по проксированию в Nginx
Бесплатная помощь в подключении

Вариант #3: Просто измените URL картинок на вашем сайте!

Было
не оптимизированным

<img src="//cdn.optipic.io/site-520/upload/foo/bar/image.png">

Стало
автоматически оптимизированным

<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">

XXXXXX — id вашего сайта в личном кабинете CDN OptiPic

Стоимость использования

Вы платите за показы изображений с CDN. Итоговая стоимость использования зависит от объема трафика на ваш сайт. В среднем это от 100 руб за 1 млн показов изображений.
Первые демонстрационные 1 000 000 показов - бесплатно.
Чтобы запросить демо-показы, заполните форму.

Цены