L’importance des éléments multimédias, comme les illustrations, les graphiques informatifs et les séquences vidéo, dans le développement web est incontestable. Cependant, la dimension des images peut avoir un impact notable sur la performance globale d’une application et sur son accessibilité.
HTML, acronyme de Hypertext Markup Language, est le langage de base pour la conception et la structuration des pages web. En tant que développeur, vous avez la possibilité d’enrichir vos documents HTML avec des images de produits, des logos et d’autres éléments graphiques afin d’améliorer l’expérience utilisateur et l’attrait visuel de votre site.
Néanmoins, si vous aspirez à une performance optimale de votre application, il est indispensable de redimensionner et d’optimiser vos images. Dans cet article, nous allons explorer l’importance du redimensionnement des images, les différentes méthodes pour les redimensionner en HTML, ainsi que les meilleures pratiques à adopter.
Pourquoi est-il crucial de redimensionner les images en HTML ?
Redimensionner une image consiste à modifier sa taille, que ce soit en l’agrandissant ou en la réduisant. Les images sont généralement sauvegardées sous divers formats. Vous pouvez les obtenir auprès de photographes, d’organisateurs d’événements, de designers, ou encore les télécharger depuis des sources en ligne.
Il peut être tentant d’utiliser les images dans leur format d’origine. Cependant, dans la plupart des cas, cette pratique est déconseillée. Voici quelques raisons pour lesquelles il est préférable de redimensionner les images dans vos documents HTML :
- Vitesse de chargement des pages : Bien que les images soient un atout pour l’expérience utilisateur, des images trop volumineuses peuvent nuire à la vitesse de chargement. Optimiser ces images permet d’accélérer l’affichage de vos pages web.
- Adaptabilité du site : Une application web typique est consultée depuis différents types d’appareils. Redimensionner les images assure une compatibilité avec les mobiles, les ordinateurs de bureau et les tablettes.
- Gestion de la bande passante : La plupart des hébergeurs limitent la bande passante des forfaits qu’ils proposent. En optimisant vos images, vous gagnez de l’espace pour d’autres types de contenu.
- Objectifs de référencement : La vitesse de chargement est un facteur clé pour le classement dans les moteurs de recherche. L’optimisation des images améliore la vitesse et, par conséquent, votre référencement.
- Optimisation du stockage : L’espace de stockage est un critère de choix pour un hébergeur. Le téléchargement d’images volumineuses et haute résolution peut consommer une part importante de l’espace serveur.
- Amélioration de l’expérience utilisateur : Les utilisateurs n’ont pas à attendre longuement que les images se chargent. L’optimisation permet un affichage simultané du contenu textuel et des images.
Voici les différentes techniques pour redimensionner vos images en HTML :
Utilisation des attributs HTML
Nous allons élaborer une application simple pour illustrer le redimensionnement d’images. Pour ce faire, j’utiliserai des images provenant de Pixabay. Plus précisément, je vais me servir de cette image. Vous pouvez la télécharger et la déplacer vers votre dossier de projet afin de faciliter les manipulations.
Voici mon code HTML :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Description de votre site web"> <meta name="keywords" content="mots, clés, ici"> <meta name="author" content="Votre nom"> <title>Redimensionner les images HTML</title> </head> <body> <h2>Mon chat</h2> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Lorsque j’affiche l’image dans sa taille originale, sans aucun redimensionnement, elle déborde sur l’ensemble de la page, la rendant presque invisible.
Je peux ajuster la taille de l’image de mon chat en définissant une hauteur de 175 pixels et une largeur de 300 pixels.
Je vais modifier mon code dans la balise <img> comme suit :
<img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" width="300" height="175">
Vous pouvez maintenant constater que l’image est clairement visible et correctement dimensionnée.
Utilisation des styles CSS
Plutôt que d’appliquer les styles directement dans le code HTML comme dans l’exemple précédent, nous pouvons créer une feuille de style externe. Je vais donc créer un fichier appelé styles.css. Ensuite, nous allons insérer une balise <link> dans la section <head> de notre document HTML afin de relier la feuille de style à notre page web.
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Description de votre site web"> <meta name="keywords" content="mots, clés, ici"> <meta name="author" content="Votre nom"> <title>Redimensionner les images HTML</title> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <h2>Mon chat</h2> <img src="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/images/cat-2536662_1280.jpg" > </body> </html>
Nous allons maintenant ajouter des règles de style à notre image dans le fichier styles.css. Voici le code :
img {
width:300px;
height:200px
}
L’image ainsi affichée se présentera comme ceci :
Nous avons utilisé le sélecteur <img> pour identifier notre image dans le document HTML. Nous avons spécifié une largeur de 300 pixels et une hauteur de 200 pixels.
Utilisation des pourcentages
Dans l’exemple précédent, nous avons utilisé les pixels (px) pour redimensionner notre image. Nous pouvons également utiliser des pourcentages pour obtenir un effet similaire. Par exemple, nous pouvons définir la largeur et la hauteur de notre image à 65 %.
Nous allons reprendre notre code HTML précédent. Il suffit de supprimer le contenu du fichier styles.css et d’y ajouter le code suivant :
img {
width:65%;
height:65%
}
L’image s’affichera alors comme ceci :
Redimensionnement d’images pour un design adaptatif
Une image de qualité doit s’adapter à différentes tailles d’écran. Vous pouvez optimiser vos images pour qu’elles s’ajustent à divers formats d’affichage. En conservant le même code HTML, nous pouvons ajouter ce code à 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 écrans de petite taille.
La propriété `height: auto` assure que l’image conserve ses proportions lorsque sa taille varie.
Respect des proportions
Dans la conception de sites web, les proportions désignent le rapport entre la hauteur et la largeur d’une image. Le maintien de ce rapport lors du redimensionnement garantit que les images conservent leur cohérence visuelle, qu’elles ne sont pas déformées et qu’elles s’adaptent aux différents formats d’écran.
Nous utiliserons le même code HTML pour illustrer comment conserver les proportions lors du redimensionnement de nos images.
Ajoutez le code suivant à votre fichier styles.css :
img {
width: 300px;
height: auto;
}
J’ai utilisé le sélecteur `img` pour cibler notre image dans le document HTML. Nous avons défini la largeur à 300 pixels. La propriété `height: auto` permet aux navigateurs de calculer automatiquement la hauteur de l’image tout en préservant le rapport hauteur/largeur. Cela assure que les images ne sont pas étirées lors de l’affichage sur différentes tailles d’écran.
Redimensionner les images d’arrière-plan
Vous pouvez insérer des images dans les éléments pour les utiliser comme arrière-plan. Le redimensionnement d’une image d’arrière-plan garantit qu’elle s’intégrera correctement à son conteneur. Voici un exemple de document HTML avec un paragraphe et du texte :
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Description de votre site web"> <meta name="keywords" content="mots, clés, ici"> <meta name="author" content="Votre nom"> <title>Redimensionner les images HTML</title> <!-- Lien vers le fichier CSS externe --> <link rel="stylesheet" href="https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/styles.css"> </head> <body> <div class="container"> <div class="text"> <p>Voici notre image de chat</p> </div> </div> </body> </html>
Nous allons maintenant ajouter une image d’arrière-plan via le fichier styles.css.
.container {
position: relative;
text-align: center;
color: #ffffff;
padding: 100px;
background-image: url("https://wilku.top/how-to-resize-image-in-html-and-scale-up-your-web-design/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;
}
Une image d’arrière-plan ne peut être ajoutée qu’en utilisant CSS. J’ai créé un conteneur avec du texte centré et une image de chat en arrière-plan.
Vous pouvez faire appel à divers outils pour redimensionner et optimiser vos images. Certains se limitent au redimensionnement, tandis que d’autres vous permettent également de stocker des images et de les diffuser dans votre document HTML via une URL.
Cloudinary est un excellent exemple d’outil qui redimensionne les images sur le serveur avant de les transmettre aux utilisateurs. Cet outil est conçu pour adapter automatiquement la taille des images sans impacter la performance du site.
Meilleures pratiques pour le redimensionnement des images en HTML
Bien que nous ayons exploré différentes méthodes pour redimensionner les images en HTML, il est essentiel de respecter ces bonnes pratiques pour obtenir des résultats optimaux :
- Évitez le style en ligne : Il peut être tentant d’appliquer rapidement des styles aux images directement dans votre document HTML. Cependant, cette pratique peut nuire à la vitesse de chargement des pages web. Privilégiez l’utilisation d’une feuille de style CSS externe, ce qui rendra votre code plus 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 nécessaire à l’image pendant le chargement du contenu, améliorant ainsi l’expérience utilisateur.
- Utilisez les formats d’image appropriés : Les images existent sous différents formats, tels que JPEG, PNG et SVG. Par exemple, le format PNG est idéal pour les images transparentes, tandis que le format SVG est plus adapté aux logos.
- Rendez vos images adaptatives : Vous ne connaissez pas nécessairement la nature des appareils utilisés par les visiteurs pour accéder à votre contenu. Optimisez toujours vos images pour qu’elles s’affichent correctement sur différents types d’écrans.
- Optimisez la taille des fichiers : Les images brutes, en haute qualité, peuvent être volumineuses. Ces images peuvent occuper une grande quantité d’espace sur votre serveur et ralentir le temps de chargement de vos pages. Vous pouvez réduire la taille de ces images sans altérer leur qualité en utilisant divers outils.
Conclusion
Redimensionner vos images en HTML permet d’améliorer l’expérience utilisateur, de rendre votre page web adaptative et d’économiser de l’espace sur votre serveur. Nous avons présenté plusieurs méthodes pour redimensionner les images en HTML.
Bien qu’elles soient toutes efficaces, je préfère utiliser les propriétés CSS dans un fichier CSS distinct pour le redimensionnement des images. Cependant, vous pouvez également ajouter du CSS en ligne si votre application est de petite taille et que vous n’avez que quelques images.
N’hésitez pas à consulter notre article sur les ressources CSS pour mieux comprendre ce langage de style.