Se un visitatore del tuo sito utilizza un browser che supporta il formato WebP, il CDN gli fornisce esattamente le versioni WebP delle immagini (le versioni WebP vengono generate automaticamente sul lato CDN).
Perché vale la pena utilizzare WebP?
L'utilizzo di Webp risolve il problema "Usa formati immagine moderni" in Google Pagespeed Insights.
In breve, WebP comprime il file meglio, a parità di condizioni, rispetto ai formati precedenti (png e jpeg), il che significa che occupa meno spazio sull'hosting e si carica più velocemente nel browser durante la visualizzazione della pagina.
L'implementazione di WebP è attivamente promossa da Google, che fornisce tali statistiche:
Se il browser del visitatore non supporta Webp, al visitatore vengono fornite le immagini nel formato originale (png/jpeg), ma precompresso/ottimizzato.
Se il visitatore apre il sito da un telefono cellulare, le immagini non solo vengono automaticamente compresse o convertite in Webp, ma anche automaticamente ridotte in larghezza (per velocizzare ulteriormente il download delle immagini su Internet mobile)
Le immagini non verranno convertite, ottimizzate e compresse al volo ogni volta con ogni richiesta. Tutte queste procedure verranno eseguite dal CDN una volta per l'immagine richiesta. In background, per non rallentare la consegna delle immagini al visitatore del tuo sito.
.htaccess
o 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 del tuo sito nel tuo account CDN OptiPicnginx -t
. nginx -s reload
.htaccess
(proxy di 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 del tuo sito nel tuo account CDN OptiPic.htaccess
, ti consigliamo vivamente di eseguire un backup del file e assicurarti di avere accesso FTP al file.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— ID del tuo sito nel tuo account CDN OptiPic