L'utilisation de Webp résout le problème « Servir les images dans des formats de nouvelle génération » 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 :
L'optimisation d'image est un traitement spécial d'un fichier graphique afin de minimiser sa taille sans perte de qualité visuelle.
Pour réaliser cette procédure, il existe un grand nombre d'algorithmes assez complexes. Cependant, ils sont tous basés sur la même base - toutes les données de service présentes (par exemple, le nom du programme qui stocke le fichier, etc.) doivent être supprimées du fichier graphique et, à l'aide de programmes spéciaux, fusionner / couleurs similaires lisses.
En conséquence, nous obtenons la même image, qui visuellement n'a pas changé. Cependant, le volume (poids) de ce fichier en octets sera bien inférieur à l'original. Si ce traitement est effectué correctement, le fichier image peut être réduit à 98% sans perte de qualité d'image.
Cela signifie que les images sur les pages du site seront chargées beaucoup plus rapidement après l'optimisation.
Il a été prouvé que l'accélération des sites Web peut améliorer les facteurs comportementaux et augmenter la conversion des sites Web (augmenter les ventes). Plus la page du site se charge longtemps, moins les clients pourront y effectuer certaines actions cibles. Si votre site sur Internet ne fonctionne pas assez vite, vous avez toutes les chances de rater vos revenus potentiels. L'accélération de la ressource en ligne offrira l'opportunité d'améliorer la conversion et, de ce fait, d'augmenter considérablement les revenus et d'attirer plus de clients.
Une page d'un site se compose le plus souvent de :
Un élément tel qu'une image occupe la majeure partie du volume entier sur les pages du site et constitue la partie « la plus lourde » des pages. La réduction (l'optimisation) des images accélérera sans aucun doute considérablement le téléchargement de toute ressource en ligne.
En conséquence, si vous modifiez (réduisez) la taille des images, toutes les pages du site commenceront à se charger beaucoup plus rapidement.
La compression des images sur le site permettra de réduire leur volume à 75-98%, sans perdre en qualité visuelle.
.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