Une image en surpoids

Au hasard de mes recherches, je suis tombé sur une page dont la photo centrale mettait un temps anormalement long à se charger.

J’ai vérifié : cette photo pèse près de 1,4 Mo. Soit, à elle seule, 15 fois le poids maximal que je recommande pour une page web de ce type.

Source : Mutuelle Prévoyance Santé.

L’erreur est simple : L’éditeur du site a intégré une photographie haute résolution, en donnant pour instruction au navigateur de la redimensionner. En d’autres termes, le poids de cette photographie est démesuré par rapport à sa taille à l’écran.

Concrètement, il est fortement conseillé de retailler les photos et de les compresser AVANT de les intégrer dans les pages web.

Cette entrée a été publiée dans Mauvaises pratiques. Vous pouvez la mettre en favoris avec ce permalien.

4 réponses à Une image en surpoids

  1. Sylvain dit :

    Il a des évidences comme cela qu’il est visiblement toujours bon de rappeler de temps en temps :)

  2. Là, ça me fait vraiment plaisir de lire ce billet ! Sur certains blogs à connotation "écolo" qui font la promotion des économies d’énergie et affichent fièrement des images de 256k° qui contiennent 3 couleurs – il y en a dix sur la page-, j’ai préconisé d’optimiser les images comme je le fais à chaque formation Photoshop pour le web. Pourtant c’est simple (mais fallait le savoir). Ca n’a pas du plaire, mon commentaire a été effacé.

  3. Marin dit :

    Tiens, justement est-ce que tu as une liste de recommandations?

  4. @Martin : de recommandations pour l’optimisation ? Oui, je demanderai à mon webmaster de mettre ça en ligne ou dans la newsletter quand elle rentrera de congés (il faut donc s’inscrire à ma newsletter sur photo.guyvan.com/fr/conta…

Laisser un commentaire

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>