Comment bien redimensionner et optimiser une image HTML

Optimiser la taille, le poids, et le format de l'image pour le Web

Optimiser la taille, le poids et le format des images est crucial pour améliorer les performances d'un site web.

Vous devez tout d'abord choisir le bon format d'image pour votre page HTML, et ce choix dépend en partie de la nature de votre image ou photo.

• Le format JPEG est préconisé pour les photographies et les images avec des dégradés de couleurs.
• Le format PNG pour les images avec des zones transparentes et des graphiques simples.
• Le format SVG pour les graphiques vectoriels.

En outre il existe un autre format qui, à ce jour, supplante tous les autres formats. Il s'agit du format WebP.

Pour la petite histoire, le format WebP a été déveoppé par Google ; il offre une meilleure compression tout en conservant une bonne qualité d'image. De ce fait il est considéré par les algorithmes de classement des moteurs de recherche comme le meilleur format d'image pour le Web.

Vous devez ensuite apporter une attention particulière à la taille de l'image. N'affichez pas des images plus grandes que ce dont vous avez réellement besoin sur le site. Redimensionnez-les en fonction des dimensions d'affichage prévues. Ainsi et à titre d'exemple, n'affichez pas une image de 2000 pixels par 2000 pixels dans un conteneur de 800 pixels de largeur : utilisez un logiciel de graphisme ou un outil en ligne pour redimensionner votre image en 800 pixels par 800 pixels.

Le taux de compression de l'image est également important car il impacte directement son poids. Plus une image sera légère plus elle se chargera vite. Assurez-vous cependant que l'optimisation n'a pas dégradé la qualité visuelle de manière significative.

Sachez que pour évaluer l'impact de vos images sur les performances de votre site Web, vous pouvez utiliser des outils de test de performance tels que Google PageSpeed Insights (lien externe).

Les attributs width et height sont fortement recommandés

Pour redimensionner une image en HTML vous devez utiliser les attributs width et height :

• width correspond à la largeur de l'image.
• height correspond à la hauteur de l'image.

Les valeurs width et height, utilisées pour redimensionner une image en HTML, peuvent être exprimées de diféfrentes manières :

• Un nombre qui par défaut est interprété comme une valeur exprimée en pixel.
• Un pourcentage.
• Un mot-clé ou une valeur globale, tel que auto, max-content, inherit, etc.

Si vous connaissez le ratio et le nombre de pixels à appliquer pour redimensionner l'image sans la déformer, vous pouvez utiliser les attributs width et height directement au sein de la balise <img> :

<img alt="image" src="image.webp" width="200" height="300">

Par ailleurs les attributs width et height permettent au navigateur d'identifier dès le début l'espace à allouer à l'image dans la page. Cela évite entre autre un décalage de la mise en page durant la lecture.

L'attribut loading pour un chargement différé des images

L'attribut loading avec la valeur lazy permet de charger les images uniquement lorsqu'elles s'affichent à l'écran. Ainsi une image en bas de page ne sera chargée que lorsque le défilement de la page atteindra l'image.

<img alt="image" src="image.webp" loading="lazy" width="200" height="300">

Cet attribut est particulièrement utile pour améliorer les performances des pages web en réduisant le temps de chargement initial, surtout sur des pages longues où toutes les images ne sont pas visibles immédiatement à l'ouverture de la page.

Il est préférable de rendre une image HTML adaptative

Rendre une image HTML adaptative (responsive) est essentiel pour garantir une expérience utilisateur optimale selon les tailles d'écrans.

Les internautes accèdent aux sites web à partir d'une multitude d'appareils, tels que des ordinateurs, des tablettes et des smartphones. Une image responsive s'ajuste automatiquement à la taille de l'écran et offre ainsi une expérience visuelle optimale.

Il existe deux approches distinctes pour redimensionner une image HTML et la rendre responsive :

• Utiliser du code CSS pour adapter une image unique à la taille de l'écran.

<img alt="image" src="image.webp" loading="lazy" style="max-width:100%; height:auto;">

Dans l'exemple ci-dessus le style CSS style="max-width:100%; height:auto;" indique que la largeur maximale de l'image doit être égale à la largeur de son conteneur, et que sa hauteur doit s'ajuster automatiquement en fonction de sa largeur pour maintenir les proportions de l'image. Cela permet de garantir que l'image ne dépasse pas de son conteneur et qu'elle reste bien proportionnée et adaptée à la taille de l'écran.

L'inconvénient de cette solution est que l'image ne dispose pas d'éléments width et height explicites.

• Utiliser l'attribut srcset ou l'élément <pictures> pour charger l'image appropriée parmis plusieurs images disponibles.

Il s'agit de la meilleur des solutions. Le seul inconvénient c'est que cette solution nécessite de créer plusieurs images de différentes tailles.

Je vous recommande ainsi de lire le tutoriel de Mozilla sur les images adaptatives pour des explications détaillées sur l'attribut srcset et l'élément HTML <pictures>.