Faut-il encore indiquer la dimension des images ?

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?

 

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

 

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:

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.

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:

Code:

@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.

 

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

 

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.

 

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

 

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 ?

 

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.

 

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.

 

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

 

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 :

Code:

<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.

Code:

.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.

 

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.

 

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 :

Code:

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

le css :

Code:

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

Et c'est tout.

 

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.