Faut-il encore indiquer la dimension des images ?

[Corrigeur]

Bonjour à tous.

On nous explique depuis les débuts d’Internet qu’il est préférable d’utiliser les paramètres width et height sur la balise image.

<img src="image.png" alt="" height="420" width="420">

3Wschools précise même :

Il vaut mieux toujours indiquer la hauteur et la largeur des attributs pour les images. Si la hauteur et la largeur sont définies, l’espace requis pour l’image est réservé lorsque la page est chargée. Inversement, sans ces attributs, le navigateur ne connait pas la taille de l’image, et ne peut pas lui réserver un espace approprié. Cela amène alors une modification de la mise en page des images durant leurs chargements.

Oui ! Mais ça, n’était-ce pas avant ? Que faire avec le responsive ?

Soit par exemple une image de 700x245 px s’affichant sur 100 % de l’espace imparti de 700 px de large sur un dispositif de grandes dimensions.

Comment procéder, puisque l’image va devoir aussi s’afficher sur un dispositif de 640 ou de 550 ou de 460 ou encore de 320 (il existe une multitude de dispositifs ayant chacun leurs propres dimensions ?

Merci pour vos explications.

 

[guinness85]

Bonjour Corrigeur,

Je me pose également la même question.
D'autant plus que selon certains comparateurs (gtmetrix pour n'en citer qu'un) c'est une caractéristique jouant sur la vitesse d'affichage d'une page: "The following image(s) are missing width and/or height attributes."

Mais il ne donne pas plus de consignes et j'aime bien comprendre avant d'appliquer :wink:

Quelles sont les bonnes pratiques?

 

[HawkEye]

Images en largeur relative (x%) dans des conteneurs aux dimensions précisées par @media ?

 

[ybet]

Bonne question:

Pour ma part, sur les nouvelles pages, je n'impose les dimensions que dans un cas: si j'interdit l'affichage directement sur un autre site par htaccess:

RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ybet.be [NC]
RewriteRule \.(jpg|jpeg|png|gif|pdf)$ http://www.ybet.be/logo-access.gif [NC,R,L]

Tout simplement parce que mes pages sont HTML et en affichant en local en Wysywig, je déforme l'image sur la page et qui est déformée sur le site quand je transfert en FTP.

Images en largeur relative (x%) dans des conteneurs aux dimensions précisées par @media ?

En responsive, c'est effectivement la solution si tu programme en CSS donc pas en vérifiant le navigateur pour renvoyer vers un sous domaine spécifique (genre m.exemple.com). Suis plutôt ( à la différence de HawkEye) de travailler en absolu pour la taille des images et pas en relatif.

Le codage est par exemple:

@media screen and (max-width:240px)
{
  img {
		max-width:80px;
	}
}

Attention à deux choses (même si tu impose une taille à l'image dans le code HTM:
1. tu dois créer différentes tailles d'écran avec des tailles d'images maximum pour chacune mais en limitant la taille maximum pour ne pas déformer avec des tailles maximum de l'affichage.
2. en réduisant (dans mon exemple: la largeur maximum - width): le navigateur va réduire en gardant les proportions (exemple 50% obligatoire en largeur mais obligatoirement 50% en hauteur): les images sont donc parfois nettement déformées.

 

[indigene]

ça n'a pas changé, il est toujours préférable d'indiquer les dimensions.

 

[Corrigeur]

Concrètement, quel est finalement le meilleur codage pour qu’une image de 700x245 px (exemple ci-dessus) s’affiche correctement sur des résolutions aux points de rupture 320, 640, 800 et plus de 1000 avec une largeur dans un espace réservé de 700 px sur les dispositifs de plus de 1000 ?

 

[indigene]

Le problème si on met en pourcentage c'est que l'image sera affichée toute petite sur un écran de 320.
Si on met une dimension de 700 elle sera affichée sur toute la largeur de l'écran (ou du conteneur), donc en 320 ou presque.

 

[HawkEye]

Ca dépend de la façon dont tu gères ton responsive

 

[indigene]

ah !
Parce que 50% ça ne représente pas 50% sur tous les écrans ? Parfois ça peut faire 95% ou 100% ?
Peux-tu expliquer s'il te plait ?

 

[HawkEye]

Je n'ai pas parlé de 50%, que je sache.

Et puis si tu fais du "vrai" responsive (et pas "de l'adaptable"), ta présentation ne sera pas la même sur un mobile que sur un desktop: ton image va dans un cas être (p.ex) flottante à gauche, et dans un autre elle prendra la largeur de l'écran avant le contenu.

 

[indigene]

50% était juste un exemple, toi tu parlais d'Images en largeur relative (x%)
Ca revient au même. Si sur un écran de 1400 tu met une largeur de 50% elle sera affichée en 700 de large. Sur un écran de 320 elle sera affichée en 160 px de large
Si tu précises 700px elle va s'afficher en 700 sur un écran de 1400 et en 320 sur un écran de 320.

 

[Marie-Aude]

Justement indigene, tu loupes totalement le point que soulignes hawk

Quand tu gères finement le responsive, tu peux parfaitement décider qu'une image d'illustration dans un article sera affichée à 50% dans les appareils "à partir de tablette", et à 100% de la largeur pour les écrans plus petit, pour éviter que le texte qui se trouve à côté soit trop petit et illisible

 

[Doubrovski]

Les Media Queries CSS quoi. Le minimum requis pour du responsive
Aujourd'hui n'importe quel framework CSS permet de gérer ça facilement, et directement dans le html sans se soucier des medias queries... (cf CSS Responsive Grid System)

Ex avec materialize CSS :

<div class="container">
    <div class="col s12 m6 l4">
        <img src="">
    </div>
</div>

12 = divisions maximales (le conteneur peut-être divisé en 12 colonnes)
s12 = 12/12 sur small screens = le div fera 100% de la largeur de son conteneur sur petits écrans
m6 = 6/12 sur medium screens = le div fera 50% de la largeur de son conteneur sur écrans moyens
l4 = 4/12 sur large screens = le div fera 1/3 de la largeur de son conteneur sur écrans larges

L'image dans ces conditions a juste à occuper au maximum 100% de son conteneur.

.col img{
max-width:100%;
}

Quand on utilise pas de framework, c'est pas beaucoup plus compliqué, mais il faut préciser à chaque media ses propriétés.
Le mobile first est une question à prendre en compte, on peut partir des écrans larges ou des mobiles pour faire du responsive.

 

[Corrigeur]

Les dimensions apparaitaient donc désormais superflues quoiqu'en disent PageSpeed ?

L’indication d’une largeur et d’une hauteur sur toutes les images permet un rendu plus rapide en éliminant le besoin pour les débordements et de remplissages inutiles.

 

[Sodium]

Pour moi, indiquer des informations de style directement dans le code est une pratique d'un autre âge.

Après, si tu veux avoir les bénéfices de les indiquer tout en étant responsive, rien ne t'empêche de rajouter un width:auto !imporant; dans le la feuille CSS lorsque c'est nécessaire.

 

[-Tony-]

Ce n'est pas une information de style, mais html.
Aucun problème avec le responsive.

Si l'image fait 600px par 400px de base

le html :

<img src="image.jpg" alt="" height="600" width="400">

le css :

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

Et c'est tout.

 

[Bigb06]

Pour la taille des images c'est toujours d'actualité et c'est requis pour les pages au format AMP.
Ca évite les reflow et repaint inutiles du navigateur.

 

[Corrigeur]

Indiquer les dimensions des images fait également, logiquement, gagner un petit peu de temps dans l’affichage des pages. Cela additionné à d’autres optimisations a ainsi fait descendre le temps d’affichage complet de la page index du Corrigeur de 3,5 secondes à 0,4 seconde.