Pokud návštěvník vašich stránek používá prohlížeč, který podporuje formát WebP, pak mu CDN poskytne přesně verze WebP obrázků (verze WebP se generují automaticky na strana CDN).
Proč se vyplatí používat WebP?
Použití Webp řeší problém „Použít moderní formáty obrázků“ v Google Pagespeed Insights.
Stručně řečeno, WebP komprimuje soubor lépe, všechny ostatní věci jsou stejné, než starší formáty (png a jpeg) - což znamená, že zabírá méně místa na hostingu a načítá se rychleji v prohlížeči při prohlížení stránky.
Implementaci WebP aktivně propaguje společnost Google – poskytuje tyto statistiky:
Pokud prohlížeč návštěvníka nepodporuje Webp, pak návštěvník dostane obrázky v původním formátu (png / jpeg), ale předkomprimované / optimalizované.
Pokud návštěvník otevře stránky z mobilního telefonu, pak jsou obrázky nejen automaticky komprimovány nebo převedeny na Webp, ale také automaticky zmenšeny na šířku (pro ještě větší zrychlení stahování obrázků na mobilním internetu)
Obrázky nebudou převáděny, optimalizovány a komprimovány za běhu pokaždé s každým požadavkem. Všechny tyto procedury provede CDN jednou pro požadovaný obraz. Na pozadí, abyste nezpomalili doručování obrázků návštěvníkovi vašeho webu.
.htaccess
nebo 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 vašeho webu ve vašem CDN OptiPic účtunginx -t
. nginx -s reload
.htaccess
(Apache proxy)#--------------------------------------- # 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 vašeho webu ve vašem CDN OptiPic účtu.htaccess
důrazně doporučujeme vytvořit zálohu souboru a ujistit se, že máte k souboru přístup přes FTP.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— ID vašeho webu ve vašem CDN OptiPic účtu