Script PHP pour compresser les images d'un site web à la volée
Publié le 22 avril 2024
Une page web c'est principalement du texte et des images. Des illustrations sélectionnées avec soin rendent la lecture d'un article plus agréable et améliorent l'expérience utilisateur (UX). Elles incitent les visiteurs à rester plus longtemps et à explorer davantage de contenu par le bais du menu général, des liens internes et des boutons CTA (Call-To-Acton). Le choix des images permet aussi de construire une identité visuelle et contribue au référencement naturel (SEO - Search Engine Optimization) grâce notamment à l'utilisation des balises ALT et à l'usage de mots-clés pertinents intégrés dans le nom des fichiers.
L'importance de compresser les images pour réduire le temps de chargement des pages
La compression des fichiers est essentielle pour optimiser les performances d'un site web; une image légère se charge plus vite et permet d'améliorer le temps d'affichage de la page. La navigation devient alors plus fluide et plus agréable pour l'utilisateur. Les études montrent que les sites web qui ont des temps de chargement rapides ont de meilleurs taux de conversion ; cet indicateur de performance (KPI) exprime le pourcentage de visiteurs qui effectuent une action sur un site web : remplir un formulaire de contact par exemple, télécharger un document, valider un achat ou s'inscrire à une newsletter.
Le temps de chargement d'une page est également pris en compte par Google pour évaluer la bonne santé d'un site internet : un site techniquement bien réalisé aura un meilleur référencement.
Présentation de la méthode et mise en pratique de notre script de compression des images
Notre script PHP est autonome, il fonctionne sans API et sans aucune ressource externe. Il permet de créer une image compressée, générée d'après une image source stockée sur le serveur. On utilise le fichier .htaccess pour orienter toutes les images au format .jpg vers notre script nommé compress.php.
Une page index.html pour afficher les images
Simplifiée à l'extrême, notre page HTML ne contient aucun script javascript ni aucune particularité technique. Elle permet simplement d'afficher une image unique de deux façons différentes :
- image.jpg — C'est l'image originale, avant traitement. Pour notre exemple, nous avons choisi une image HD avec une résolution de 3333 x 5000 pixels et un poids de 2,3Mo. Des caractéristiques inappropriées à un usage web.
- image-compressed.jpg — C'est l'image compressée automatiquement par notre script PHP. L'expression compressed inclue dans le nom de l'image va être détecté par notre fichiers .htaccess pour déclencher la compression.
<html> <head> <title>Compresser les images à la volée</title> </head> <body> <img src="image.jpg" width="480"> <img src="image-compressed.jpg" width="480"> </body> </html>
Utiliser le fichier .htaccess pour rediriger les images vers notre script
Placé à la racine d'un serveur web Apache (PHP), le fichier .htaccess (Hypertext Access) sert à définir son fonctionnement général. Il est couramment utilisé pour orienter les requêtes erronées vers une page d'erreur personnalisée (page 404), rediriger d'anciennes URL vers de nouvelles pages (redirection 301) ou - dans notre cas précis - rediriger les images vers un script PHP.
On indique dans la 3e ligne de notre exemple que toutes les images JPG qui se terminent par l'expression compressed doivent être redirigées vers le fichier compress.php
RewriteEngine On RewriteBase / RewriteRule ^(.*)-compressed.jpg compress.php?name=$1 [L]
Le script PHP qui va permettre la compression des images
Notre fichier compress.php va réduire la taille et le poids des images, de manière à optimiser les temps de chargement. Les variables $rate (taux de compression, en pourcentage) et $new_width (nouvelle largeur) peuvent être ajustées selon les usages.
<?php
// Définition du format
header ("Content-type:image/jpeg");
// Définition des variables
$name = $_GET['name']; // Récupère le nom du fichier
$rate = 60; // Taux de compression
$new_width = 640; // Nouvelle largeur
$file = $name.".jpg";
// Récupère la résolution de l'image originale
list($width, $height) = getimagesize($file);
// Calcul la résolution de l'image compressée
$ratio = $width/$height;
$new_height = round($new_width/$ratio);
// Création et affichage de l'image compressée
$new_file = imagecreatetruecolor($new_width, $new_height);
$mask = imagecreatefromjpeg($file);
imagecopyresampled($new_file, $mask, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($new_file,NULL,$rate);
imagedestroy($new_file);
?>
Grâce à ce script PHP, vous avez la possibilité de générer facilement des images compressées à la volée. Votre site web va être plus rapide, plus réactif et plus performant. Vous pouvez librement télécharger les fichiers de notre exemple, les modifier et les adapter à vos usages.
Le gestionnaire de contenu Sublim.design intègre un script de compression des images. Bien plus évolué, il permet de choisir un taux de compression pour chaque image et s'applique à tous les formats d'images compressibles : jpg, png, WebP et gif