<img> : dimensions dans CSS ou dans balise ?

[Mirovinben]

Bonjour,

Je suis en train de mettre à jour mes pages perso et vl'a que je me pose une question métaphysique concernant les indications de dimensionnement de mes images...

Vaut-il mieux...
-1- indiquer les dimensions dans les balises <img> ?
-2- créer des class en CSS avec les attributs qui vont bien ?
-3- laisser le navigateur calculer à la volée l'espace nécessaire lors de l'affichage ?

J'ajoute qu'un certain nombre de photos ont les même dimensions (exemple ici) mais d'autres non...

Actuellement, j'ai choisi l'option -2- mais j'ai intérêt à bien être attentif lors du remplacement éventuel d'une photo... car bonjour les déformations ! C'est pour cela que l'option -3- est assez tentante quand le contenu varie fréquemment.

Merci d'avance de vos avis...

[calimo]

indiquer les dimensions dans les balises <img> ?

L'avantage c'est que le navigateur donne la place qu'il faut à l'image avant de la charger… tu évites ainsi les pages qui "bougent" lorsque les images se chargent
Avantageux lorsque que tu as des images longues à charger et du texte en-dessous que l'utilisateur pourrait vouloir commencer à lire

créer des class en CSS avec les attributs qui vont bien ?

Drôle d'idée... je pense que c'est plus prise de tête qu'autre chose.
Les attributs height et width sur les images ne sont pas du tout dépréciés ou déconseillés. Ils apportent une véritable information : les dimentions de l'image. Pour moi ça n'a pas sa place dans la CSS, ce n'est pas strictement de la mise en page

laisser le navigateur calculer à la volée l'espace nécessaire lors de l'affichage ?

C'est le plus simple, et ça va bien si tu n'as qu'une seule image qui se charge vite, ou peu d'images.

À toi de voir, mais la 2 ne me plait pas trop

[Mirovinben]

Merci Calimo...

Je vais revoir ma copie en ré-intégrant width et height dans mes balises... donc reconsidérer l'option n°1. Je me posais la question car j'ai l'impression que nous sommes à la limite entre le contenant et le contenu.

L'avantage de l'option -1- est de mettre en rapport direct (ou en voisinage) les dimensions et la source de l'image dans le code Html.

De plus j'utilise TopStyle Pro pour saisir Html et CSS et cet éditeur place automatiquement dans le Html les infos de taille quand je fais un glisser-déposer depuis la liste des fichiers... Il oublie juste de me proposer le "title" mais pense quand même au "alt"...

[edit] Cela, d'ailleurs, ne m'empêche pas d'utiliser des class pour padding, margin et float... car là nous sommes bien dans la mise en page.

[Benoit]

Remarque : tu peut aussi donner les dimensions dans un style inline :

Code : Tout sélectionner

<img style="height: 30px; width: 75px" src="..." >

Pas très différent mais ça peut te rassurer sur le fait que tu sépares bien style et contenu

[Mirovinben]

(...) mais ça peut te rassurer sur le fait que tu sépares bien style et contenu

héhé
Bon, en attendant que ma tendre et douce finisse de préparer le repas (c'est à son tour...) j'ai mis toutes mes pages à la sauce "-1-"

Bon appétit...

[calimo]

Il oublie juste de me proposer le "title" mais pense quand même au "alt"...

Pas étonnant, title étant parfaitement facultatif...

Remarque : tu peut aussi donner les dimensions dans un style inline :

Code : Tout sélectionner

<img style="height: 30px; width: 75px" src="..." >

Pas très différent mais ça peut te rassurer sur le fait que tu sépares bien style et contenu

Mais s'agit-il vraiment de style ? Pour moi c'est une information (réelle) sur l'image… le alt indique son contenu, height et width ses dimentions. C'est assez limite, mais je ne pense pas que ce soit de la mise en page pure et dure.

(Et puis niveau séparation style et contenu, je me suis toujours demandé en quoi le style="…" était une séparation )

[Mirovinben]

(...)Mais s'agit-il vraiment de style ? Pour moi c'est une information (réelle) sur l'image… le alt indique son contenu, height et width ses dimentions.

C'est aussi mon avis...

C'est assez limite, mais je ne pense pas que ce soit de la mise en page pure et dure.

pourquoi limite ? Tout bien réfléchi : il y a bien la description du contenu d'un côté et sa mise en place de l'autre.

(Et puis niveau séparation style et contenu, je me suis toujours demandé en quoi le style="…" était une séparation )

Pour moi, mais c'est juste mon opinion, la vrai séparation se comprend mieux en ayant des CSS externes

[calimo]

pourquoi limite ? Tout bien réfléchi : il y a bien la description du contenu d'un côté et sa mise en place de l'autre.

Mais cette information est quand-même utilisée pour la mise en page (réservation de l'espace)…

[Bobe]

Il y a eu une discussion très interressante sur ce point ici:
http://blog-and-blues.org/weblog/2004/0 ... lle-images

[Mirovinben]

Il y a eu une discussion très interressante sur ce point ici:
http://blog-and-blues.org/weblog/2004/0 ... lle-images

effectivement, tout y a été dit... et... je reste un peu sur ma faim au niveau d'une décision ferme et définitive.

Pour l'instant, et pour éviter l'effet désagréable de l'affichage à postéri d'un ascenseur sous FF (alors que son emplacement est réservé sous IE ) qui entraîne un "sursaut" latéral de mes pages (de largeur fixe et centrée) au fur et à mesure que le navigateur traite les images, je vais me contenter de l'option -1- (balise) plutôt que l'option -3- (rien dire)...

d'autant que je retaille mes images au bon format avant de les utiliser... Ce qui fait que width et height correspondent au format réel de celles-ci.

J'éviterai l'option -2- (CSS) par facilité (usage de mon éditeur favori qui insère les données de taille dans la balise) et en réponse aux premiers posts...

Merci Bobe pour ton lien... Le débat y était (août 2004) courtois et riche.

[jpbardiau]

d'autant que je retaille mes images au bon format avant de les utiliser... Ce qui fait que width et height correspondent au format réel de celles-ci.

Il vaut toujours mieux retailler les images avant. Voici un exemple : le premier cercle est une image de 750 px redimensionée à 50 px dans un éditeur html; le deuxième a été réduit avant avec un logiciel de retouche d'images.

[Benoit]

Pour l'instant oui, mais les versions de Firefox basées sur Cairo (encore expérimentales pour l'instant) permettront de faire de tels redimensionnements avec la même qualité qu'un logiciel de retouche d'images (lissage au lieu de simple retaillage).

[Bobe]

C’est quand même sadique de ta part de nous faire baver sur ces améliorations quand on sait qu’on y aura droit que d’ici un an en étant optimiste

[anselme]

il vaut mieux tout faire en css et s'habituer au XHTML strict qui s'installe peu a peu
<img src="" alt="" class="" />

[anselme]

Calimo :
"Et puis niveau séparation style et contenu, je me suis toujours demandé en quoi le style="…" était une séparation"

fait des sites dynamiques qui contiendraient 10000 pages s'ils etaient statique et tu vas comprendre tout seul