Point trop n’en faut

En ce moment se tiennent les conférences Velocity en Californie. C’est une période où les experts parlent entre eux et où les bonnes remarques et bons sujets à propos des performances web sont publiés plusieurs fois par jour.

Suite à plusieurs de ces publications à propos des sprites CSS, il est temps de faire ici un petit complément sur le sujet.

Sprite Me

Le premier lien c’est SpriteMe, un bookmarklet qui permet de repérer les images les plus pertinentes à grouper ensemble dans un sprite. L’outil regarde toutes les images de background dans la CSS, les groupe par alignement et taille. Plus tard il est prévu qu’il génère le sprite associé puis mette à jour la CSS.

Je reste assez septique sur ces deux dernières étapes. C’est réalisable, sans aucun doute, mais pas forcément pertinent. On risque d’associer des images qui ne sont qu’occasionnellement dans le même contexte, ou des couleurs trop différentes, des alignements difficiles à faire parce que telle ou telle image a besoin d’une grande marge, etc.

La décision et la réalisation doivent probablement rester des étapes manuelles, mais l’aide à la décision ne peut être qu’une bonne chose.

Trop c’est trop

Le second lien c’est Vladimir Vukićević de Mozilla qui rappelle les problèmes inhérents à une mauvaise réalisation des sprites.

Sur le réseau on fait transiter des images compressées, aussi seul le poids du fichier et le nombre de requêtes HTTP comptent. Les sprites sont une grande avancée. Toutefois, le navigateur utilise lui l’image décompressée en mémoire. Sur des tailles démeusurées, la mémoire se retrouve encombrée par un simple sprite. Sur un exemple réel, Vladimir parle d’un sprite de 75Mo en mémoire (1299×15000 pixels).

Donc voilà, un rappel n’est jamais mauvais et j’avais déjà abordé ici la problématique à propos des terminaux mobiles, le sprite est globalement une bonne chose mais il vaut mieux rester mesuré : gardez la taille réelle de l’image en tête.

Le plus simple pour éviter les excès c’est de grouper ensemble des images de taille similaire et d’alignement identique. Pas d’icône 16×16 liée à des bandeaux 2000×24 pour éviter de perdre 1984px de largeur. De toutes façons, rappelez-vous qu’au delà de 2000 pixels, un bug du navigateur Opera risque de vous mettre des bâtons dans les roues.

Ne pas jeter le bébé avec l’eau du bain

La solution c’est le pipelining HTTP, qui ne semble jamais venir. Le commentaire de Rob Sayre de Mozilla à ce sujet (« en théorie, ahahaha ») veut tout dire. Les autres possibilités ce sont les conteneurs jar de mozilla, ou les réponses mime/multipart, de Mozilla aussi.

Mais voilà, pour l’instant c’est la seule technique viable que nous ayons, et elle fonctionne. En restant correct sur les tailles, le gain côté réseau dépasse largement le petit effet négatif sur la mémoire. N’oubliez pas, même sur les terminaux mobiles, c’est le réseau qui reste le plus gros goulet d’étranglement.

Bref, faites juste attention aux tailles des images décompressées.

Publié par edaspet

Plus d'informations sur mon profil en ligne

6 réponses sur « Point trop n’en faut »

  1. Merci pour les rapels.

    Cependant l’un des points qui me pose souvent problème et me semble important de rappeler aussi avec les sprites reste les PNG 24bit avec support de l’alpha, les hacks (à ma connaissance) pour supporter ce format sous IE 6 ne permette pas d’utiliser les sprites étant forcé d’utiliser la sizingMethod « scale » comme dans l’exemple ci dessous:

    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’path/to/image.png’, sizingMethod=’scale’);

  2. Ahhhh, surtout pas.
    L’appel à cette fonction est une horreur côté performance. Pire, avec un sprite non seulement ça va être fait sur une plus grosse image, mais ça va être refait pour chaque occurence de la même image.

    C’est à voir, mais quasiment tout le temps, un PNG8 peut suffire, et là pas besoin de hack. Au pire il y a des astuces pour éviter d’avoir à utiliser la transparence, même si ça demande un peu plus de boulot.

  3. Merci pour ton retour Éric,

    Nous somme donc d’accord, les sprite en PNG24 avec alpha sous IE6 sont fortement à éviter. (A ma connaissance tous les navigateurs plus recent s’en porte très bien et sans ce hack bien sur).

    Je suis curieux que connaitre tes autres alternatives pour utiliser la transparence sur ce fameux navigateur.

  4. Bonjour,

    Même si le billet est ancien, je me permet de le ressortir pour donner mon retour d’expérience sur l’utilisation des sprites.

    Il existe, à mon sens, une grosse réticence pour utiliser les sprites qui, vous vous en douterez, vient de la prise en charge des images de fond des CSS par IE6.

    En effet, même si ie6 est sur la fin, il faut savoir qu’il existe encore des IE6 avec le cache désactivé. J’ai constaté qu’une telle situation fait que pour une image de fond identique avec la même url déclarée à deux endroits différents dans la feuille de style CSS, celle-ci était téléchargée deux fois.

    Alors, ce que je me demande, c’est si il existe d’autre navigateurs qui gèrent cela comme ça (je pense aux navigateurs mobiles), et, dans le cas de l’utilisation de gros fichiers pour les sprites, si cela ne pouvait pas faire planter ou du moins ralentir très fortement la navigation des utilisateurs.

    Voilà, je sais pas si vous avez déjà rencontré ce comportement et si vous avez des précisions sur la config exacte qui produit cela car avec IETester, je n’ai pas d’option de désactivation de cache.

Les commentaires sont fermés.