Si un visiteur de votre site utilise un navigateur supportant le format WebP, alors le CDN lui fournit exactement les versions WebP des images (les versions WebP sont générées automatiquement sur le côté CDN).
Pourquoi cela vaut-il la peine d'utiliser WebP ?
L'utilisation de Webp résout le problème « Utiliser des formats d'image modernes » dans Google Pagespeed Insights.
En bref, WebP compresse mieux le fichier, toutes choses égales par ailleurs, que les anciens formats (png et jpeg) - ce qui signifie qu'il prend moins de place sur l'hébergement et se charge plus rapidement dans le navigateur lors de la visualisation de la page.
La mise en œuvre de WebP est activement encouragée par Google - ils fournissent de telles statistiques :
Si le navigateur du visiteur ne supporte pas Webp, alors le visiteur reçoit les images au format original (png/jpeg), mais pré-compressées/optimisées.
Si le visiteur ouvre le site depuis un téléphone mobile, alors les images sont non seulement automatiquement compressées ou converties en Webp, mais aussi automatiquement réduites en largeur (pour accélérer encore plus le téléchargement des images sur l'Internet mobile)
Les images ne seront pas converties, optimisées et compressées à la volée à chaque fois avec chaque demande. Toutes ces procédures seront exécutées par le CDN une fois pour l'image demandée. En arrière-plan, afin de ne pas ralentir la livraison des images au visiteur de votre site.
.htaccess
ou 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 de votre site sur votre compte CDN OptiPicnginx -t
. nginx -s reload
.htaccess
(proxy 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 de votre site sur votre compte CDN OptiPic.htaccess
, nous vous recommandons fortement de faire une sauvegarde du fichier et de vous assurer d'avoir un accès FTP au fichier.<img src="/upload/foo/bar/image.png">
<img src="//cdn.optipic.io/site-XXXXXX/upload/foo/bar/image.png">
XXXXXX
— ID de votre site sur votre compte CDN OptiPic