Comment bien redimensionner et optimiser une image HTML

Catégorie < html >

1FORMATIK.com
Espace ~public
© 1998 - 2024

Sommaire

  • Il est important de correctement redimenionner une image HTML
  • Il faut optimiser la taille, le poids, et le format de l'image pour le Web
  • L'utilisation des attributs width et height est recommandé
  • L'attributs loading pour un chargement différé des images
  • Il est préférable de rendre une image HTML adaptative

Information

Rédigé par Antoine
Publié le 2024-01-01
Modifié le 2024-01-01
6499 affichages
10 likes
1 non-like

Il est important de correctement redimenionner une image HTML

Redimensionner correctement une image HTML est essentiel pour améliorer les performances de la page web sur laquelle elle est affichée. Des images de grande taille peuvent ralentir le chargement d'une page web, ce qui peut entraîner une mauvaise expérience pour l'internaute.

D'autre part en redimensionnant correctement une image, vous évitez sa distorsion et assurez une meilleure qualité visuelle à l'internaute : une image qui conserve ses proportions initiales apparaîtra plus nette.

Par ailleurs, les internautes accèdent de plus en plus à des sites web à partir de smartphone. En redimensionnant les images de manière appropriée, vous garantissez une meilleure adaptation aux différentes tailles d'écrans.

L'une des autres raisons, et non des moindres, est que les moteurs de recherche tiennent compte du niveau d'optimisation des images dans leurs algorithmes de classement. Des images optimisées contribuent à une meilleure performance de la page, ce qui a un impact sur son référencement.

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>.

Ce contenu vous a-t-il été utile ?