On ne soulignera jamais assez l’importance du multimédia, comme les images, les infographies et les vidéos, dans le développement. Cependant, la taille des images affecte les performances globales d’une application et sa facilité d’utilisation.

HTML (hypertext markup language) est le langage le plus utilisé pour concevoir et créer la structure des pages web. En tant que développeur, vous pouvez ajouter des images de produits, des logos et d’autres graphiques à votre document HTML afin d’améliorer l’expérience utilisateur et l’attrait visuel.

Cependant, si vous voulez que l’application fonctionne de manière optimale, vous devez redimensionner et optimiser vos images. Dans cet article, j’expliquerai l’importance du redimensionnement des images, les différentes approches du redimensionnement des images en HTML et les meilleures pratiques.

Quelle est l’importance du redimensionnement des images en HTML ?

What-is-the-importance-of-resizing-images-in-HTML

Le redimensionnement d’une image consiste à augmenter ou à réduire la taille d’une image. Les images typiques sont stockées sous différentes formes, et vous pouvez les obtenir auprès de votre photographe, de vos événements ou de votre concepteur, ou les télécharger à partir de sources en ligne.

Vous pouvez être tenté d’utiliser les images dans leur format d’origine. Cependant, dans la plupart des cas, ce n’est pas souhaitable. Voici quelques-unes des raisons pour lesquelles vous devriez redimensionner les images dans votre document HTML :

  • Vitesse de chargement des pages : Bien que les images soient connues pour améliorer l’expérience de l’utilisateur, les images de grande taille peuvent avoir un effet négatif sur la vitesse de chargement. L’optimisation de ces images accélérera le chargement de vos pages web.
  • Rendez votre site web réactif : Un site web ou une application typique reçoit des visites de personnes utilisant des appareils différents. Le redimensionnement des images permet à une page web d’être adaptée aux appareils mobiles, aux ordinateurs de bureau et aux tablettes.
  • Utilisation de la bande passante : La plupart des hébergeurs de sites web limitent la bande passante lorsqu’ils vendent des packs d’hébergement aux propriétaires de sites web. Lorsque vous optimisez les images, vous disposez de plus d’espace pour d’autres types de contenu sur votre site web.
  • Objectifs de référencement : La vitesse de chargement des pages est l’un des facteurs de classement pris en compte par les moteurs de recherche. Le redimensionnement de vos images améliore la vitesse de chargement, ce qui stimule votre référencement.
  • Maximiser l’espace de stockage : La taille de l’espace de stockage est l’un des facteurs à prendre en compte lors du choix d’un hébergeur. Le téléchargement d’images de grande taille et à haute résolution peut consommer beaucoup d’espace de stockage sur les serveurs.
  • Améliorer l’expérience des utilisateurs : Les utilisateurs d’un site web ne doivent pas attendre des heures avant que les images ne se chargent sur une page web. Vous pouvez optimiser vos images pour qu’elles apparaissent en même temps que le reste du contenu.

Voici les différentes façons de redimensionner les images en HTML

Utilisation des attributs HTML

Nous pouvons créer une application simple pour démontrer comment redimensionner les images. Je vais utiliser des images de Pixabay dans mon application web. J’utiliserai cette image. Vous pouvez la télécharger et la placer dans votre projet pour faciliter la démonstration.

Voici mon code HTML :

 Redimensionner les images HTMLMon chat

Lorsque je restitue l’image originale sans la redimensionner, elle s’étale sur toute la page web et vous ne pouvez même pas la voir.

Original-HTML-image

Je peux donner à mon image de chat une hauteur de 175 et une largeur de 300.

Je modifierai mon code dans la balise <img> comme suit :

<img src="images/cat-2536662_1280.jpg" alt="cat image" width="300" height="175"&gt

Vous pouvez maintenant voir que l’image est visible et optimisée.

HTML-attributes

Utilisation des styles CSS

Nous pouvons créer une feuille de style séparée à la place du style en ligne que nous avons appliqué à l’étape précédente. Je vais créer une feuille de style et la nommer styles.css. Nous placerons une balise <link> dans la section de notre document HTML pour lier la feuille de style au document HTML. 

 Redimensionner les images HTMLMon chat

Nous pouvons ajouter un style à notre image grâce à la feuille styles.css. Voici notre code :

img {
    width:300px ;
    height:200px
}

L’image rendue apparaîtra comme suit :

CSS-styles

Nous avons utilisé le sélecteur <img> pour localiser notre image dans le document HTML. Nous avons donné à notre image une largeur de 300px et une hauteur de 200px.

Utilisation du pourcentage

Dans l’exemple précédent, nous avons utilisé les pixels (px) pour redimensionner notre image. Nous pouvons également utiliser les pourcentages pour optimiser notre image. Par exemple, nous pouvons fixer la largeur et la hauteur de notre image à 65%.

Nous allons utiliser notre code HTML précédent. Cependant, supprimez ce qui se trouve dans le fichier styles.css et ajoutez ce code :

img {
    width:65% ;
    height:65%
}

Lors du rendu de l’image, vous obtiendrez le résultat suivant :

Percentage

Redimensionnement des images pour une conception réactive

Une bonne image doit pouvoir s’adapter à différentes tailles d’écran. Vous pouvez également optimiser votre image pour qu’elle réponde aux différentes tailles d’écran. En utilisant le même code HTML, nous pouvons ajouter ceci à notre fichier styles.css:

img {
    max-width : 100% ;
    height : auto ;
}

La propriété max-width : 100% garantit que l’image ne dépassera jamais la largeur de son conteneur. Ainsi, l’image sera toujours réduite proportionnellement sur les petits écrans.

La propriété height : auto garantit que l’image conserve son rapport d’aspect lorsqu’elle est agrandie ou réduite.

Maintien du rapport hauteur/largeur

Dans la conception d’un site web ou d’une application, le rapport hauteur/largeur est la relation proportionnelle entre la hauteur et la largeur. Le maintien du rapport hauteur/largeur lors du redimensionnement ou de l’optimisation de vos images garantit leur cohérence visuelle ; les images ne sont pas déformées et s’adaptent aux différentes tailles d’écran.

Nous utiliserons le même code HTML pour démontrer comment maintenir le rapport hauteur/largeur tout en redimensionnant nos images.

Ajoutez ce code à votre fichier styles.css:

img {
    width : 300px ; 
    height : auto ; 
}
Aspect-ratio-1

J’ai utilisé le sélecteur “img” pour localiser notre image dans le document HTML. Nous avons fixé notre largeur à 300px. La propriété height : auto permet aux différents navigateurs de calculer automatiquement la hauteur de l’image tout en conservant le rapport hauteur/largeur. Cela permet de s’assurer que les images ne sont pas étirées lorsqu’elles sont affichées sur des écrans de différentes tailles.

Redimensionnement des images d’arrière-plan

Vous pouvez insérer des images sur des éléments pour servir d’images d’arrière-plan. Le redimensionnement d’une image d’arrière-plan permet de la faire tenir dans son conteneur. Voici un exemple de document HTML contenant un paragraphe et du texte :

 Redimensionner les images HTML

     Voici notre image de chat Il s'agit de l'image de notre chat

Nous pouvons maintenant ajouter une image de fond dans la feuille styles.css. 

.container {
    position : relative ;
    text-align : center ;
    color : #ffffff ;
    padding : 100px ;
    background-image : url('images/cat-2536662_1280.jpg') ; 
    background-position : center ;
    width : 75% ;
}
.text {
    position : absolute ;
    top : 50% ;
    left : 50% ;
    transform : translate(-50%, -50%) ;
    font-size : 24px ;
    color : orangered ;
}
Background-image

Une image d’arrière-plan ne peut être ajoutée qu’à l’aide d’une feuille de style CSS. J’ai créé un conteneur avec un texte centré et une image de fond représentant un chat.

Utilisation d’outils de redimensionnement d’images

Vous pouvez utiliser différents outils pour redimensionner et optimiser vos images. Certains de ces outils n’offrent qu’une fonction de redimensionnement. Cependant, certains vous permettront également de stocker des images et de les servir dans votre fichier HTML à l’aide d’une URL.

Cloudinary

Cloudinary est un bon exemple d’outil qui redimensionne l’image sur le serveur avant de la livrer aux utilisateurs. Cet outil est conçu pour redimensionner automatiquement les images sans affecter les performances du site.

Bonnes pratiques pour le redimensionnement des images en HTML

Bien que nous ayons discuté de plusieurs approches pour le redimensionnement des images en HTML, vous devriez toujours vous en tenir à ces meilleures pratiques pour obtenir des résultats optimaux :

  • Évitez le style en ligne : Vous pouvez être tenté de styliser rapidement les images de vos documents HTML et de passer à la partie suivante. Toutefois, cette approche peut nuire à la vitesse de chargement des pages web. Utilisez une feuille de style CSS séparée et rendez votre code facile à lire et à maintenir.
  • Utilisez les attributs “width” et “height” : Veillez à spécifier la largeur et la hauteur de vos images. Cette approche permet au navigateur d’allouer automatiquement l’espace de l’image au fur et à mesure que le reste du contenu se charge.
  • Utilisez les bons formats d’image : Les images se présentent sous différents formats, tels que JPEG, PNG et SVG. Par exemple, le format PNG est parfait pour une image transparente, tandis que le format SVG convient aux logos.
  • Faites en sorte que vos images soient réactives : vous ne connaîtrez jamais la nature des appareils utilisés par les visiteurs de votre site web pour accéder à votre contenu. Optimisez toujours les images pour différentes tailles d’écran et veillez à ce que l’affichage soit uniforme.
  • Optimisez la taille des fichiers : Les images brutes de haute qualité peuvent se présenter sous la forme de fichiers volumineux. Or, ces images peuvent occuper beaucoup d’espace sur votre serveur et affecter le temps de chargement des pages. Vous pouvez réduire la taille de ces images à l’aide de divers outils sans en diminuer la qualité.

Conclusion

Le redimensionnement de vos images en HTML améliore l’expérience de l’utilisateur, rend votre page web réactive et économise de l’espace sur le serveur. Nous vous avons présenté plusieurs approches pour redimensionner les images en HTML.

Bien qu’elles soient toutes efficaces, j’aime utiliser les propriétés CSS dans un fichier CSS séparé pour redimensionner les images. Cependant, vous pouvez parfois ajouter du CSS en ligne si votre application est petite et que vous avez peu d’images.

Vous pouvez également lire notre article sur les ressources CSS pour mieux comprendre ce langage de style.