Images et performance web

Publié le 30 mars 2011

Tags : Webperf Technique

Pour qu’un site s’affiche rapidement, il faut limiter au maximum les éléments téléchargés par le visiteur. Les images pèsent souvent lourd, il faut donc les optimiser autant que possible.

  1. Limiter le nombre d’images

Les images illustrent et habillent, mais elles peuvent aussi distraire et alourdir les pages. Ne gardez que les images indispensables.

Penser également à appeler les images de décoration depuis les feuilles de style plutôt que dans le code HTML de la page. De cette manière les images illustrant le contenu seront téléchargées en premier.

  1. Utiliser le format adapté

Les trois formats d’image les plus courants sur Internet sont actuellement PNG, JPEG et GIF.

  1. Supprimer les informations inutiles

La plupart des appareils photos et logiciels de création ou retouche d’image stockent dans les images des informations non affichées ([copyright]{lang=”en” “=””}, date de prise de vues, etc). Ces informations alourdissent inutilement les images. Heureusement, les outils suivants permettent de retirer ces informations sans toucher au contenu visible des images.

Aller plus loin

Il faut également optimiser les images appelées depuis les feuilles de styles, voire même utiliser la technique des sprites pour combiner plusieurs images ou morceaux d’images. C’est particulièrement utile pour les images de petite taille, pictogrammes, etc. Bonne optimisation !

8 commentaires

Lovelive le 1 juillet 2011

Bonjour,
Petite erreur, le format PNG 8bit permet d'enregistrer la transparence, mais uniquement au même titre que le GIF, c'est-à-dire Opaque/Transparent uniquement.
Il me semble que comme pour le GIF, un PNG 8bit utilise une palette à 256 entrées avec une entrée 0 qui sera équivalent à un pixel transparent.
En clair : 8bit = palette avec une entrée transparente, 24bit = 8 bits pour chaque composante de couleur + 8 bits pour le niveau de transparence.

Goulven le 3 juillet 2011

@Lovelive Pas tout-à-fait...

La norme officielle PNG dit Alpha channels can be included with images that have either 8 or 16 bits per sample (Traduction : Le canal alpha peut être inclus dans les images ayant 8 ou 16 bits par échantillon). Source : Spécification PNG, chapitre 2.4 Alpha Channel.

Photoshop ne gère pas la transparence alpha pour les PNG 8bits, mais Fireworks en est capable. A l'enregistrement, choisir les options suivantes dans la palette d'optimisation : PNG8, Palette adaptive, Transparence alpha.

Avec ces réglages, le degré de transparence sera spécifié pour chaque pixel, d'une manière compréhensible pour les navigateurs modernes. IE interprétera les degrés de transparence de manière binaire (pixel affiché si transparence inférieure à 50%, masqué sinon).

Source : 8bit alpha in Fireworks

Lovelive le 3 juillet 2011

Salut,
Je confirme totalement mon propos à la lecture de la spécification !
En fait, pour être plus clair et pour comprendre d'où provient l'incompréhension : Un PNG 8 bits utilise 8 bits par pixel. Dans ton propos, un PNG 8 bits utilise 8 bits par échantillon.
Dans mon propos, chaque pixel est codé par une valeur entre 0 et 256, comme pour les Bitmap 8 bits. Dans ce cas, la spécification PNG indique bien qu'il est impossible d'introduire un canal alpha. Il est par contre possible d'introduire une valeur alpha pour chaque entrée de la palette (ce que seul Fireworks gère, je viens de découvrir), mais absolument pas pour chaque pixel.
Dans ton propos, chaque pixel est codé par 3 échantillons de 8 bits (un par composante). La phrase « following the grayscale or RGB samples of the pixel » ne laisse aucun doute là-dessus. Dans ce cas, on peut greffer un canal alpha, de 8 bits, ce qui permet donc d'avoir un PNG 32 bits.
Pareil pour les PNG à 16 bits par composante, ou avec un canal alpha, on obtient un PNG 64 bits.

En gros, dès qu'une image utilise une palette, tu peux être sûr qu'il n'y a qu'un octet par pixel.
(et ici, 32 bits pour chacune des 256 entrées de palette, avec une valeur Alpha)

Lovelive le 3 juillet 2011

Edit : Je me suis trompé, je pense que tu voulais dire que le PNG 8bits utilise 16 bits par pixel, avec 1 octet pour le code palette, et 1 octet pour le canal alpha (enfin, je crois ?)

Marco le 18 juillet 2011

A noter que l'outil Google pagespeed propose également de compresser directement les images non optimum trouvées dans la page. D‘expérience, j'ai eu l'impression que c'était un poil plus efficace que smushit (bon,après on parle d'un gain de quelques octets ...)

Minh Chau le 5 octobre 2011

Bonjour,

Effectivement, les images doivent apporter une valeur ajoutée à l'offre contenu dans un site sans nuire au chargement des pages internes.

Sur mon site immobilier, j'ai volontairement limité le nombres d'images sur chaque fiche produit pour ne pas alourdir la page. C'est un équilibre à trouver !

0gust1 le 6 décembre 2011

Si vous développez pour IE6 avec du png 8bits, redoublez d'attention... j'ai un souvenir (ancien mais cuisant) de bug de tweak png (c'était dd_belated, je crois).

Espérons que ce soit de la préhistoire pour la majorité des gens ici. :)

Goulven le 16 décembre 2011

@0gust1 Effectivement, le filtre AlphaImageLoader (et les scripts qui l'utilisent) permettent de gérer la transparence des PNG 24 bits, mais peut tout aussi dégrader les images comme constaté par Dave Shea en 2010.

Heureusement, les statistiques d'IE sont en chute libre, et Microsoft va remplacer IE6 par IE8 sur XP et IE9 sur Vista via Windows Update.

Page précédente Page suivante