Les étapes ci-dessous s’adressent aux utilisateurs qui souhaitent conserver une image à sa taille originale (en Ko ou Mo) et redimensionner la taille d’affichage de l’image sur une page Web. Bien que cela soit possible, nous vous suggérons de redimensionner une image à l’aide d’un éditeur d’image pour réduire la taille du fichier et le temps de téléchargement de l’image. Lorsqu’une image est redimensionnée en suivant les étapes ci-dessous, elle doit quand même charger l’image plus grande, même si elle apparaît plus petite dans le navigateur.
Redimensionner avec HTML
Spécifiez la largeur et la hauteur de votre balise HTML IMG SRC comme indiqué dans l’exemple ci-dessous.
Aspect normal de l’image
Utiliser le code ci-dessus pour redimensionner l’image
Lorsque vous redimensionnez une image, vous devez conserver le format d’image. Sinon, l’image risque d’être déformée et de perdre une partie de sa qualité.
Redimensionner avec CSS
Vous pouvez également redimensionner une image par CSS, comme le montrent les exemples ci-dessous.
Dans le premier exemple, la taille réelle en pixels est spécifiée pour la largeur et la hauteur. En utilisant cette option, limite les images qui peuvent utiliser ce CSS. Puisqu’elle spécifie une largeur et une hauteur, cette méthode pourrait entraîner une distorsion des images si elle n’a pas un format d’image de 5:1.
Le deuxième exemple spécifie un pourcentage de la taille de l’image originale, en largeur et en hauteur, au lieu de la taille en pixels. L’utilisation de cette option permet d’utiliser une plus grande variété d’images. Puisqu’un pourcentage de la largeur et de la hauteur de l’image est spécifié, le navigateur peut redimensionner presque n’importe quelle image et maintenir son rapport d’aspect.
Pour appliquer le CSS à une balise HTML IMG SRC HTML, procédez comme suit.
L’utilisation de CSS permet de raccourcir les balises IMG SRC, car la largeur et la hauteur sont gérées avec CSS et vous n’avez qu’à spécifier le nom de la classe dans la balise pour activer le code CSS pour cette image.