Commentaires sur : Des sprites jusqu’à plus soif

Par : Point trop n’en faut — Performance web

Point trop n’en faut — Performance web — Wed, 24 Jun 2009 10:01:33 +0000

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

Par : Florent V.

Florent V. — Sun, 14 Dec 2008 12:22:21 +0000

C’est effectivement un problème de mise en pratique plutôt qu’un défaut inhérent à la technique. Prenons par exemple ta présentation faite à l’AFUP, slide 38: tu reprends une image utilisée par Google Search (google.com, google.fr…), qui suggère très fortement une utilisation abusive. J’ai vérifié sur une page de résultat, et on a bien affaire dans certains cas à une technique de remplacement d’image, même si je dois avouer que dans l’ensemble ils ont très bien fait les choses. Je m’inquiète un peu pour le logo «Google Checkout» et certaines images de bouton (type fermeture de fausse fenêtre), par contre.

Il reste que dans les recommandations sur l’utilisation des sprites mentionnent rarement la question de l’accessibilité. Voir par exemple: http://developer.yahoo.com/performance/rules.html#opt_sprites

Du point de vue strict de la performance (au sens technique, pas commercial), utiliser les sprites y compris pour des boutons d’action sans intitulé fait parfaitement sens. Est-ce le rôle des publications sur la performance web de mentionner ce problème potentiel? Je pense que oui.

Par : Éric

Éric — Tue, 09 Dec 2008 12:40:35 +0000

Déjà : uniquement pour les images décoratives. Ca ne concerne pas les images de contenu, et ça ne concerne que des images qui ne sont pas indispensables à la compréhension. Bref, de la décoration. Du coup pour moi le problème d’accessibilité est de fait limité.

Il n’est pas question de cacher les intitulés pour les remplacer par un sprite (ce dont tu parles), mais d’ajouter une icone décorative à côté de cet intitulé pour aider l’utilisateur. Pas de problème spécifique d’accessibilité donc.

Qu’on soit clair, je ne parle PAS de remplacement d’image ici. Et ton problème d’accessibilité est lié au remplacement d’image, pas au sprite.

Sauf cas exceptionnel celui qui supporte CSS saura tirer profit des règles de positionnement de background donc ça ne posera pas de problème. Si tu te débrouilles bien, dans une majorité des cas tu peux trouver un moyen de positionner ton sprites pour que ça ne « casse» pas même si on augmente les taille de police. Bref, il y a des exceptions mais dans l’ensemble ça fonctionne sans dégats ici aussi.

Après dans CSS3 il y a des moyens de découper l’image précisément (au lieu de simplement la positionner avec le risque de voir les autres icones à côté) et de remplacer le contenu de manière propre (sans aucun risque d’accessibilité). Mais … en CSS3, donc pas pour tout de suite.

Par : Florent V.

Florent V. — Tue, 09 Dec 2008 11:09:23 +0000

Hello,

Je m’étonne qu’Aurélien ou Stéphane n’aient pas relevé — au moins à titre d’avertissement — les gros problèmes d’accessibilité potentiels. Ils parlent du cas des images de fond utilisées comme illustration (ou permettant de préciser un intitulé, mais dans tous les cas on a un intitulé), et du risque de voir apparaitre plusieurs icônes pour un même item, par exemple. C’est effectivement un problème (pour ne pas parler des sprites sous la forme de grilles qui demandent d’utiliser un élément vide en HTML si on veut réellement placer une image comme icône sans afficher d’autres images plus à droite, sous le texte), mais c’est loin d’être le principal.

Le principal problème, c’est l’utilisation d’éléments vides ou d’éléments au texte caché (liens et boutons sans intitulé ou liens et boutons dont on cache les intitulés en CSS) pour créer des boutons cliquables à partir d’une image de fond. Ce n’est pas un problème limité aux sprites, mais la technique des sprites incite très clairement à ce type de pratique. Il suffit de voir les images données comme exemple, dans lesquelles on retrouve souvent des boutons et icônes dont on peut supposer qu’ils seront utilisés sans texte HTML visible.

La technique des sprites serait réellement intéressante si elle permettait d’éviter cet écueil, c’est à dire si on pouvait:

1. utililiser l’élément IMG (avec attribut alt) pour afficher une portion d’image et pas l’image complète;
2. utiliser un mécanisme HTML ou CSS standard pour dire «telle portion de telle image est un équivalent strict du contenu de tel élément».

Vu qu’aucune de ces deux solutions n’existe, il y a un risque fondamental pour l’accessibilité des interfaces. Il appartient bien sûr à chaque intégrateur de faire les choses au mieux, mais vu les mythes sur les remplacement d’images accessibles largement répandus j’ai bien peur qu’attirer l’attention sur les sprites ne bénéficie aux performances qu’au détriment de l’accessibilité.

Sinon, dans l’absolu, propriété content + data URI + CSS variables/constants, peut-être un coup à jouer à l’avenir?

Par : laurent

laurent — Thu, 09 Oct 2008 07:37:36 +0000

Je n’affirme rien, je ne fais que poser la question… et en même temps je ne tiens pas compte de l’impression de chacun… si on s’en tenait à nos impressions on serait toujours à croire que la force de la gravité attire de la même manière une plume et un boulet de canon.
Le seul moyen de le savoir serait d’utiliser deux classes heavy-cls (avec un image de 200ko) et light-cls (avec une image de 1px sur 1px) et d’afficher dans une page 99 et 1 … relever la mémoire pour IE, Opéra… et de switcher light-cls avec heavy-cls et regarder la nouvelle place mémoire utilisée. En 2009 on risque de se pencher sur le problème et à ce moment je ferais les tests et je vous tiendrais informé. Si quelqu’un a du temps pour tester ca avant… l’info m’intéresse :) Merci

Par : Éric

Éric — Fri, 03 Oct 2008 13:39:27 +0000

Anthony Ricaud me dit qu’il a posé la question à l’équipe webkit. D’après eux une image n’apparait qu’une seule fois en mémoire si elle est toujours référencée par la même URL.
Il ajoute, et je suis d’accord, que c’est assez logique et qu’il serait étonnant que d’autres moteurs fonctionnent différemment.

Reste donc le fait qu’on charge une grosse image pour potentiellement ne pas tout utiliser, mais là franchement c’est moi qui vais affirmer que si vous ne faites pas n’importe quoi, c’est plus que négligeables dans le cas qui nous préoccupe.

(Note: Anthony n’arrive pas à envoyer son commentaire, je ne sais pas pourquoi. Si quelqu’un est dans la même situation, envoyez moi un mail)
(qui n’arrive pas à poster de commentaire, je ne sais pas pourquoi

Par : Éric

Éric — Fri, 03 Oct 2008 10:03:38 +0000

C’est une technique employée avec succès partout où je l’ai vue, sur IE aussi, sans faire ramer le navigateur. J’aurai donc tendance à dire « foncez» .

Maintenant un test objectif n’est jamais de trop donc je t’invite à tester, et à nous faire des retours si tu vois quelque chose d’étrange. Je doute cependant que cela puisse être un problème dans ce cas précis.

Par : laurent

laurent — Fri, 03 Oct 2008 07:10:41 +0000

La gestion de la mémoire n’est pas le fort d’IE, et pour le confort de l’utilisateur on doit faire très attention aux problèmes de mémoire.
Je travail sur des RI.A. et quand tu te retrouves avec un IE ou FF utilisant 2Go de mémoire après 20 minutes d» utilisation, je te jure que ca fait pas plaisir à l’utilisateur, surtout si au final on aboutit à un plantage du navigateur.
Alors d’accord, on aura gagné quelques secondes au chargement de la page mais si c’est au prix d’un redémarrage du navigateur au bout de quelques minutes d’utilisation, ou pire un redémarrage de l’ordinateur, je doute que l’utilisateur apprécie ce petit bénéfice :)

Par : Éric

Éric — Thu, 02 Oct 2008 12:31:27 +0000

Sérieusement je ne sais pas. C’est à tester.
Ce qui est sur c’est que même sur les petites machines c’est au final plus performant côté utilisateur. Donc que même si ça occupait plus de mémoire, c’est tout de même au bénéfice de l’utilisateur. Le bénéfice de l’utilisateur reste ce qui reste le plus important, et troquer une ressource chère contre une ressource pas chère est toujours pertinent.

Par : laurent

laurent — Thu, 02 Oct 2008 10:29:10 +0000

l’idée est intéressante mais cotés mémoire pour les navigateurs ?
En flash, un sprite, une fois dans la bibliothèque peut être utlisé 1 000 000 de fois sans nécessité d’avantage de mémoire mais sous IE, ou FF ou opéra, comment gère t’il l’image en mémoire si celle ci est utilisée à plusieurs endroits différents ? Quelqu’un sait ?
On travail sur des IHM de plus en plus gourmand en mémoire avec les framework javascript etc… je trouve que ca a son importance.