Les attributs width et height améliorent la vitesse de chargement de vos pages
Lorsque vous placez une image sur votre site Web n’oubliez pas de préciser l’attribut width et height de l’image. En effet cela améliore la vitesse de chargement de votre page :
<img height="100" width="150" src="http://domaine.com/images/image.jpg" alt="Ceci est une image">
En effet lorsque votre navigateur connaît la taille de l’image il peut réserver son emplacement et continuer à charger le reste de la page Web pendant le téléchargement de l’image. Par contre s’il ne connaît pas la taille, il lui faut attendre de charger l’image entièrement pour la placer correctement et ensuite charger le reste de la page. De plus, cela permet de commencer à lire le texte même si l’image n’est pas totalement chargée.
Cette astuce est également valable pour les tableaux.
Bizarremment Wordpress n’ajoute pas automatiquement ces deux attributs…maintenant il faut que je reprenne toutes mes images…
Edit : En cherchant sur le forum de Wordpress.com je suis tombé sur ce message où le dernier contributeur annonce que les attributs width et height n’ont plus d’utilité de nos jours. Alors où est le vrai, où est le faux? Si vous avez des infos, n’hésitez pas à laisser un commentaire.
Un autre point très important relatif cette première astuce : toujours utilisez les dimensions réelles de l’image et ne pas utiliser les attributs width ou height pour retailler l’image. Premièrement car ce redimensionnement ne se fera pas sans perte de qualité. Et secundo, pourquoi perdre du temps à charger une grosse image pour ensuite la retailler?


March 29th, 2007 à 12:45 pm
Ah, merci de l’astuce, je ne savais pas

Mais hum, c’est pas plutot “width” & “height” que “width” & “length” ?
March 29th, 2007 à 12:55 pm
Oula!!!!!!
Tu as raison merci beaucoup… C’est corrigé
Si je te dis que j’avais relu 2 fois avant de poster, tu vas pas me croire?
March 30th, 2007 à 10:23 am
Hello
la présence des attributs width et height n’accélèrent pas le chargement de la page (ils le ralentissent même, vu qu’il y a plus de code -> une page html plus lourde). En fait, le gain de vitesse se fait sur le temps de rendu de la page html elle même par le navigateur web.
Pourquoi recommande-t-on la suppression des width et height dans xhtml strict? Simplement pour avoir une dissociation entre le contenu (l’image elle-même) et les différents éléments stylistiques (qui devraient être définis dans les css).
Voilà mon explication la dessus :p
March 30th, 2007 à 10:37 am
Merci Marin pour ces précisions
April 5th, 2007 à 12:38 am
Je rejoins Marin, mais je rappel que se conseil était valable à l’époque du html et des connexions lentes .
A cet époque, le temps de chargement d’une page pouvais prendre plusieurs minutes et le temps que les images se chargent. ces attributs était important pour maintenir la mise en forme de la page.
Pour le XHTML strict, ces attributs ne posent pas de soucis au niveau de la validation donc placer les attributs des images relatives au template dans un css, oui mais ceux relatif au contenu, c’est moins nécessaire
April 19th, 2007 à 6:14 am
Est-ce que cela ne fait pas la même chose, si les propriétés Height et Width sont défini dans le style CSS de l’image ?
Ex :
Ou encore définir une classe séciale pour chaque image et définir la taille des img de telle ou telle classe dans un fichier CSS lié à la page HTML.
Personnellement, j’utilise l’attribut “style” et défini la taille de l’image.
Est-ce que c’est une bonne technique ?
April 19th, 2007 à 6:54 am
Très bonne question…j’avoue ne pas pouvoir répondre.
Si un expert css passe par ici qu’il nous donne son avis.
October 7th, 2008 à 9:11 pm
Hi!
I would like extend my SQL experience.
I red really many SQL books and would like to
get more about SQL for my occupation as oracle database manager.
What can you recommend?
Thanks,
Werutz
October 15th, 2008 à 9:05 pm
Реально интересное место, мне тут понравилось, правда…
Столько всего класного и интересного, я тут обоснуюсь на долго.
October 23rd, 2008 à 10:41 am
There was this guy see.
He wasn’t very bright and he reached his adult life without ever having learned “the facts”.
Somehow, it gets to be his wedding day.
While he is walking down the isle, his father tugs his sleeve and says,
“Son, when you get to the hotel room…Call me”
Hours later he gets to the hotel room with his beautiful blushing bride and he calls his father,
“Dad, we are the hotel, what do I do?”
“O.K. Son, listen up, take off your clothes and get in the bed, then she should take off her clothes and get in the bed, if not help her. Then either way, ah, call me”
A few moments later…
“Dad we took off our clothes and we are in the bed, what do I do?”
O.K. Son, listen up. Move real close to her and she should move real close to you, and then… Ah, call me.”
A few moments later…
“DAD! WE TOOK OFF OUR CLOTHES, GOT IN THE BED AND MOVED REAL CLOSE, WHAT DO I DO???”
“O.K. Son, Listen up, this is the most important part. Stick the long part of your body into the place where she goes to the bathroom.”
A few moments later…
“Dad, I’ve got my foot in the toilet, what do I do?”
December 19th, 2008 à 4:10 am
Hello
As a fresh http://www.toile-filante.com user i just want to say hi to everyone else who uses this board