Калі наведвальнік вашага сайта выкарыстоўвае браўзер, які падтрымлівае фармат 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
— Ідэнтыфікатар вашага сайта ў вашым акаўнце 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
— Ідэнтыфікатар вашага сайта ў вашым акаўнце CDN OptiPic.htaccess
мы настойліва рэкамендуем вам зрабіць рэзервовую копію файла і пераканацца, што ў вас ёсць доступ да файла па FTP.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— Ідэнтыфікатар вашага сайта ў вашым акаўнце CDN OptiPic