Les attributs width et height améliorent la vitesse de chargement de vos pages

I Know HTMLLorsque 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?

Source

photo credit: kk+

D'autres News ?

Abonnez-vous et recevez d'autres d'infos et des bons plans.

Author: Simon

Mari, père de famille, bricoleur du dimanche, blogueur... Mon point de vue et vos commentaires. Enjoy !

Share This Post On

10 Comments

  1. Ah, merci de l’astuce, je ne savais pas :)
    Mais hum, c’est pas plutot « width » & « height » que « width » & « length » ? :D

    Post a Reply
  2. 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? ;)

    Post a Reply
  3. 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

    Post a Reply
  4. 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

    Post a Reply
  5. 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 ?

    Post a Reply
  6. Très bonne question…j’avoue ne pas pouvoir répondre.
    Si un expert css passe par ici qu’il nous donne son avis.

    Post a Reply
  7. 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

    Post a Reply
  8. ??????? ?????????? ?????, ??? ??? ???????????, ??????…
    ??????? ????? ???????? ? ???????????, ? ??? ????????? ?? ?????.

    Post a Reply

Submit a Comment

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

D'autres News ?

Abonnez-vous et recevez d'autres d'infos et des bons plans.