Если посетитель вашего сайта использует браузер, поддерживаемый формат WebP, то CDN отдает ему именно WebP-версии изображений (WebP-версии генерируются автоматически на стороне CDN).
Почему стоит использовать WebP?
Использование Webp решает проблему "Используйте современные форматы изображений" в Google Pagespeed Insights.
Если вкратце, то WebP сжимает файл лучше при прочих равных, чем более старые форматы (png и jpeg) - а значит занимает на хостинге меньше места и быстрее загружается в браузере при просмотре страницы.
Внедрение WebP активно пропагандируется Google-ом - они предоставляют такую статистику:
Если браузер посетителя не поддерживает Webp, то посетителю отдаются изображения в исходном формате (png/jpeg), но предварительно сжатые/оптимизированные.
Если посетитель открывает сайт с мобильного телефона, то изображения не только автоматически сжимаются или конвертируются в Webp, но и автоматиечески уменьшаются по ширине (чтобы еще сильнее ускорить загрузку изображений при мобильном интернете)
Изображения не будут каждый раз конвертироваться, оптимизироваться и сжиматься на лету при каждом запросе. Все эти процедуры CDN проведет единоразово для запрашиваемого изображения. В фоновом режиме, чтобы не тормозить отдачу изображений посетителю вашего сайта.
.htaccess
или php.ini
..htaccess
php_value auto_prepend_file "<SITE_ROOT_DIRECTORY>/optipic-cdn-php/optipic-cdn-php/auto_prepend_file.php"
php.ini
; 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; }
XXXXXX
— id вашего сайта в личном кабинете CDN OptiPicnginx -t
. nginx -s reload
.htaccess
(Apache проксирование)#--------------------------------------- # 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> #----------------------------------------
XXXXXX
— id вашего сайта в личном кабинете CDN OptiPic.htaccess
настоятельно рекомендуем сделать бекап файла и убедиться в наличии доступа к файлу по FTP.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— id вашего сайта в личном кабинете CDN OptiPic