Définition de la taille de l'image en HTML5 - mannequins

Les concepteurs de pages Web utilisent des images pour fournir des informations importantes, diriger la navigation et contribuer à apparence générale sur une page Web. Cependant, vous devez utiliser les images correctement ou vous risquez de réduire leur efficacité.

Utilisez les attributs height et width avec l'élément

pour indiquer au navigateur la hauteur et la largeur d'une image (l'unité par défaut est pixels ou px):

Brass

La plupart des navigateurs téléchargent le HTML et le texte associé à une page avant de télécharger les graphiques de la page. Au lieu d'obliger les utilisateurs à attendre que la page entière soit téléchargée, les navigateurs affichent généralement le texte en premier et remplissent ensuite les graphiques dès qu'ils sont disponibles.

Si vous indiquez au navigateur la taille d'un graphique, le navigateur peut lui réserver une place dans l'affichage de la page. Cela accélère le processus de remplissage des graphiques - et d'autres choses - sur la page Web.

Vous pouvez vérifier la largeur et la hauteur d'une image en pixels dans n'importe quel programme d'édition d'image ou dans les visionneuses d'images intégrées à Windows et à Mac OS. (Vous pouvez simplement voir les propriétés de l'image dans Windows ou Mac OS pour voir sa hauteur et sa largeur.)

Une autre bonne utilisation des attributs height et width est de créer des lignes colorées sur une page en utilisant juste un petit carré coloré. Par exemple, ce balisage ajoute une boîte bleue 10-x-10-px à une page Web:

Utilisez les attributs de hauteur et de largeur de l'élément

pour définir la hauteur et la largeur de l'image. Ainsi, vous utilisez ces valeurs pour créer une boîte bleue 10-x-10-px dans une fenêtre de navigateur (affichée en haut de la figure) même si l'image originale est de 600 x 600 pixels.

En général, il est prudent de réduire les dimensions de l'image en utilisant ces attributs, bien que vous souhaitiez toujours vérifier attentivement les résultats lors des tests. Avec n'importe quel type d'image sensible d'aspect, vous voulez maintenir son rapport d'aspect en divisant les dimensions originales par une valeur commune.

Cette figure montre également des boîtes de dimensions 20 x 20 et 50 x 50 px. Voici les changements aux valeurs de hauteur et de largeur dans le balisage pour produire les deux autres cases:

En utilisant cette technique, vous pouvez transformer une seule image comme la boîte bleue (seulement 2. 39K) en une variété de lignes et même boîtes:

• Cette technique peut garantir que tous les séparateurs et autres éléments de bordure de votre page utilisent la même couleur, car ils sont tous basés sur le même graphique.

• Si vous décidez de changer toutes vos lignes bleues en vert, il vous suffit de changer l'image. Chaque ligne que vous avez créée change de couleur.

Lorsque vous spécifiez la hauteur et la largeur d'une image qui diffèrent de la hauteur et de la largeur réelles de l'image, vous comptez sur le navigateur pour mettre à l'échelle l'affichage de l'image.Cette astuce fonctionne très bien pour les images monochromes (telles que la boîte bleue), mais ne fonctionne pas bien pour les images comportant plusieurs couleurs ou les images contenant des photos réelles.

Le navigateur ne taille pas bien les images et vous vous retrouvez avec une image déformée. Cette figure montre à quel point un navigateur gère l'agrandissement d'une image de trompette lorsque le balisage multiplie la hauteur de l'image par quatre et sa largeur par deux (notez la ressemblance à un bugle!):

Laiton

même image - comme pour un logo ou un bouton de navigation - utilisez une grande image comme maître pour ce graphique et faites des versions plus petites. Cette astuce vous donne un meilleur contrôle sur l'apparence finale de chaque image.