Lorsque l’on ajoute des illustrations a un article sur un site Web, il est important de bien la dimensionner : une image trop petite sera soit floue soit illisible, tandis qu’une image trop grande sera trop longue à charger.

L’importance de la résolution d’une image

Vous me direz qu’à l’heure d’Internet illimité, il suffit de mettre des images en 4K partout et puis le tour joué. Oui … mais non ! Tout d’abord, certains forfaits 4G ne sont pas illimité, et puis la couverture Haut Débit n’est pas uniforme et on a vite fait de se retrouver sur son smartphone avec un débit tout pourri. Et puis la personne qui se rend sur votre site n’est pas forcément intéressé par toutes les images, pensez à une page d’accueil avec une image de couverture pour chaque article, alors que votre visiteur ne s’intéresse qu’à un seul article.

Bref, il ne faut pas mettre sur votre site une image (beaucoup) plus grande que sa taille affichée. Ainsi, une photo 3840x2160 pixels affichée sur votre page dans un cadre de 300x169 pixels, ce n’est pas très optimisé …

Et bien il suffit de charger l’image en haute définition lorsque l’on en a besoin. Au chargement de la page, on affiche une image de 300x169 pixels, et lorsque quelqu’un clique sur l’image pour la voir en plein écran, on renvoie une requête au serveur pour afficher l’image en haute définition.

Oui, et parfois plus que deux images. Reprenons notre photo de 3840x2160 pixels, l’idéal sera d’avoir :

Bon, à chaque nouvelle image que l’on insère sur notre site, on ne va pas redimensionner à la main notre image : on va scripter tout ça !

Redimensionner son image en Python

Le script est assez simple :

Il ne vous reste plus qu’à utiliser les dimensions les plus appropriées pour inclure l’image sur votre site.