Communication de la taille de l'image, bonnes pratiques

11

Si vous développez un document html en utilisant strictement les meilleures pratiques actuelles de garder le style hors du balisage, comment communiquez-vous le mieux la taille d'image?

La meilleure pratique antérieure veut que la hauteur et la largeur de l'image avec l'image en ce sens qu'elle sera rendue plus rapidement que le navigateur attend le téléchargement de l'image pour obtenir ses dimensions. Mais cela semble contrevenir à isoler le style du document.

Ajouter un attribut id à chaque image et mettre la hauteur / largeur dans le CSS? Est-ce que cela annule le bonus de rendu de la hauteur et de la largeur de l'image en ligne?

css html images Thomas
la source

Réponses:

12

Avoir la largeur et la hauteur dans l'élément IMG n'est pas obsolète et est certainement le meilleur moyen de dire au navigateur la largeur et la hauteur d'une image. Sortir de votre chemin pour le faire d'une autre manière est redondant et inutile (et peut-être stupide). Ne faites aucun travail inutile pour vous-même ou pour le navigateur. Tenez-vous aux bases qui fonctionnent.

John Conde
la source
1
... et n'oubliez pas une ALTbalise aussi, même si elle est vide, ou les vérificateurs de conformité se plaindront.
Talvi Watia
@Tchalvak Désolé mais vous vous trompez. Vous pouvez remplacer dynamiquement la largeur et la hauteur via la programmation côté serveur et / ou JavaScript. Et par votre logique, vous ne pouvez pas non plus remplacer les styles en ligne.
John Conde
Oups, on dirait que je me suis trompé sur le manque d'écrasement de CSS de toute façon, !importantdans le CSS vous permet de remplacer les attributs largeur et hauteur, donc utiliser initialement largeur / hauteur fonctionne bien. Maintenant, je suis coincé dans la position de vote négatif. Si vous aviez envie de modifier la réponse, je changerais cela. hausse les épaules Pas que ça compte trop.
Kzqai
8

La réponse de John Conde est parfaite. Les images ont une largeur et une hauteur - cela fait partie de leur contenu , pas de leur style . Il n'est donc pas nécessaire de faire une "séparation" ici.

Cependant, une exception: CSS pour les dimensions de l'image est utile si vous avez plusieurs images toutes de la même taille (par exemple des miniatures). Ici, il est préférable d'utiliser une classe CSS pour réduire le HTML et accélérer le développement.

Pour la conception d'un site Web comprenant des boutons et des icônes, votre meilleure solution est les sprites CSS.

Chèvre mécontente
la source
+1, les sprites css font une différence ridicule dans la vitesse d'un site.
Kzqai