[Resolu] Sprite avec des <img> et accessibilité

Bonjour,

on entends toujours parler de l'usage des sprites via backround-image/backgroud-position.
Mais en fait on peut très bien le faire aussi avec des <img>. Ex :

...
<li><a href="#"><img src=".." alt="Accueil" /></a></li>
...

et

li a {display:block;overflow:hidden;width:100px;height:20px;}
li a img {display:block;position:relative;left:0;top:-40px;}

Ca marche aussi bien d'après mes testes, et en plus on a l'avantage d'avoir l'attribut alt,
alors pourquoi est-ce que personne n'en parle de cette façon ? Soucis d'accessibilité ?

Merci
Modifié par dhjapan (05 Apr 2011 - 17:58)

On en parle tout autant, Google l'utilise pour son logo (sur une recherche).

http://www.google.com/images/srpr/nav_logo27.png

<a id="logo" href="http://www.google.fr/webhp?hl=fr" title="Afficher la page d'accueil de Google">Google<img src="/images/srpr/nav_logo27.png" alt="" width="167" height="253"></a>

Ça marche aussi avec la propriété css clip qui sert à ça. Le problème de cette technique est que css désactivé les sprites sont affichés et ce n'est pas très heureux.

A mon avis il ne faut pas se forcer à utiliser les sprites pour optimiser son site si on ne gère pas google.com.

Les sprites c'est très bien et ça engendre un gain de performances énorme pour très peu d'efforts. Tout le monde devrait s'y mettre au contraire. Mais seulement pour les images décoratives.

Et oui il y a effectivement un problème avec ta technique, si la feuille de style ne se charge pas.

Yep,

Ce qui est bien avec les sprites, c'est également que grâce aux CSS l'image est mise en mémoire cache, et il me semble que ce n'est pas le cas en HTML, et donc ta technique n'a pas cet avantage.

Si quelqu'un peut me confirmer mes dires (ou me dire si je dis des grosses bétises) ca m'intéresse ^^

Bonsoir Gili,

Je confirme, tu dis des bêtises.

Les images dans le HTML (<img>) sont aussi stockées dans la cache du navigateur.

Andromede a écrit :
Les sprites c'est très bien et ça engendre un gain de performances énorme pour très peu d'efforts. Tout le monde devrait s'y mettre au contraire. Mais seulement pour les images décoratives.

Ce sont des gains ridicules de quelques millisecondes, il faut être réaliste. Néanmoins chacun fais comme il veut et je suis d'accord pour limiter leur utilisation aux images décoratives.

bzh a écrit :
A mon avis il ne faut pas se forcer à utiliser les sprites pour optimiser son site si on ne gère pas google.com.

Ce n'est pas qu'une question d'optimisation mais aussi d'expérience utilisateur. Exemple: en utilisant des sprites, tu peux faire un rollover sur un bouton en ayant la 2e image déjà préchargée.

Benjamin D.C. a écrit :

Ce n'est pas qu'une question d'optimisation mais aussi d'expérience utilisateur. Exemple: en utilisant des sprites, tu peux faire un rollover sur un bouton en ayant la 2e image déjà préchargée.

Oui, tout dépend du contexte et ce n'est pas le seul moyen de précharger une image. Je ne dis pas qu'il ne faut jamais utiliser les sprites mais qu'il ne faut pas se laisser aller à en abuser en croyant obtenir un site super rapide.

Merci tony

bzh a écrit :
Ce sont des gains ridicules de quelques millisecondes, il faut être réaliste. Néanmoins chacun fais comme il veut et je suis d'accord pour limiter leur utilisation aux images décoratives.

Réduire le nombre de fichiers téléchargés depuis un serveur et donc le nombre d'allers-retours de paquets HTTP et donc l'encombrement des 2 pauvres tuyaux en parallèle utilsés par IE6-IE7 ne constitue pas un gain de quelques millisecondes, l'ordre de grandeur serait plutôt les dixièmes de secondes. Et on sait maintenant qu'un site qui s'affiche plus vite garde plus facilement ses visiteurs.

Après les sprites CSS, c'est un peu de boulot en plus au départ et beaucoup de boulot à modifier ...
http://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
http://www.alsacreations.com/actu/lire/693-css-sprites-generator-creator.html

Felipe a écrit :
Réduire le nombre de fichiers téléchargés depuis un serveur et donc le nombre d'allers-retours de paquets HTTP et donc l'encombrement des 2 pauvres tuyaux en parallèle utilsés par IE6-IE7 ne constitue pas un gain de quelques millisecondes, l'ordre de grandeur serait plutôt les dixièmes de secondes.

Regarde le temps total que tu vas gagner en faisant des sprites comparé au temps de chargement total de la page... C'est clairement de la suroptimisation. Et désolé mais les sprites ne sont pas l'optimisation numéro à faire loin de là, surtout quand c'est pour mal les utiliser comme dans le tuto sur "Les sprites CSS".

Si certains on envie de déroger au principes d'accessibilité pour gagner 3 dixièmes de secondes sur une page, libre à eux. Mais, j'insiste, vous n'allez rien gagner en perfs a construire votre menu entièrement avec des sprites et ça n'aura aucun intérêt si vous ne gérez pas un site à forte influence. On se ferait presque fustiger à dire ça sur alsacréations.

Bonjour,

Je partage ton avis bzh. D'abord, le tutoriel sur les sprites CSS ne devrait même pas aborder l'idée de faire un menu de navigation en sprites, mais devrait se limiter aux éléments décoratifs. Beaucoup de gens ne tiennent pas compte des avertissements et "si le tutoriel sur Alsacreations explique comment faire un menu de navigation en sprites, c'est que ça doit être bon..."

Je n'ai jamais vraiment été intéressé par les sprites CSS pour des sites corporatifs. Par contre, j'y pense pour une application de billetterie en ligne que j'ai développé, mais ça se limitera encore à des endroits bien précis. Je ne vois vraiment pas l'utilité des sprites pour des sites à moindre trafic. C'est souvent de la sur-optimisation, et seulement dans certains contextes cette optimisation peut devenir essentielle.

D'ailleurs, j'ai parfois l'impression que ça vient de cette vague inexplicable où les gens veulent absolument tout faire en CSS : menu en cascade, diaporama d'images, menu de navigation avec hover, tooltip, préchargement d'images... Comme si Javascript avait la peste et que CSS était le nouveau dieu.

Tony Monast a écrit :
Bonjour,

Je partage ton avis bzh. D'abord, le tutoriel sur les sprites CSS ne devrait même pas aborder l'idée de faire un menu de navigation en sprites, mais devrait se limiter aux éléments décoratifs. Beaucoup de gens ne tiennent pas compte des avertissements et &quot;si le tutoriel sur Alsacreations explique comment faire un menu de navigation en sprites, c'est que ça doit être bon...&quot;

(avec les images décoratives ça fait 2 fois qu'on est du même avis )

Sur alsa ça fait trop longtemps qu'on ne se préoccupe plus de l'accessibilité. Un tel tuto n'aurait jamais du être publié avec des exemples pareil.

Tony Monast a écrit :

D'ailleurs, j'ai parfois l'impression que ça vient de cette vague inexplicable où les gens veulent absolument tout faire en CSS : menu en cascade, diaporama d'images, menu de navigation avec hover, tooltip, préchargement d'images... Comme si Javascript avait la peste et que CSS était le nouveau dieu. ohwell

C'est un vague sur laquelle j'ai surfé il y a pas mal de temps quand je ne comprenais pas grand chose au web.
J'ai plutôt l'impression qu'on mélange toute les techniques sans y comprendre grand chose selon les modes du moment.
Modifié par bzh (11 Dec 2010 - 16:41)

a écrit :
Si certains on envie de déroger au principes d'accessibilité pour gagner 3 dixièmes de secondes sur une page, libre à eux.

On déroge à rien du tout puisqu'on le fait pour les images décoratives.

Je vais insister lourdement mais réduire le nombre de requêtes HTTP est le levier numéro 1 de l'optimisation des performances. On agrège bien les feuilles CSS et les fichiers Javascript alors pourquoi ne pas le faire avec les images décoratives ?

Il faut toutefois préciser qu'il faut faire des sprites de qualité (et pas des sprites bidons qui pètent tout dès que l'on agrandit la taille de caractères).

Andromede a écrit :

Je vais insister lourdement mais réduire le nombre de requêtes HTTP est le levier numéro 1 de l'optimisation des performances. On agrège bien les feuilles CSS et les fichiers Javascript alors pourquoi ne pas le faire avec les images décoratives ?

Tu as des exemples précis et des chiffres pour montrer ce que tu dis? J'attends de voir un gain de performances significatif.

Pas d'exemples sous la main mais tu as le génial http://www.webpagetest.org/ pour visualiser la "cascade" des téléchargements et comprendre en quoi le nombre de requêtes HTTP influence le chargement de la page.

Et ce que je raconte c'est pas du vaudou hein, c'est juste la base de la performance web.

D'un point de vue purement pratique, pourquoi réunir 3 fichiers Javascript et 2 feuilles CSS alors que tu te refuse à spriter une dizaine d'images ?
Modifié par Andromede (12 Dec 2010 - 15:06)

Andromede a écrit :
Pas d'exemples sous la main mais tu as le génial http://www.webpagetest.org/ pour visualiser la &quot;cascade&quot; des téléchargements et comprendre en quoi le nombre de requêtes HTTP influence le chargement de la page.

Et ce que je raconte c'est pas du vaudou hein, c'est juste la base de la performance web.

D'un point de vue purement pratique, pourquoi réunir 3 fichiers Javascript et 2 feuilles CSS alors que tu te refuse à spriter une dizaine d'images ?

C'est pas une question de vaudou, mais si tu défends corps et âme que les sprites sont un pilier de l'optimisation web, j'aimerai bien que tu me le prouves. Pas plus compliqué que ça.

Le problème n'est pas de comprendre que le nombre de requêtes HTTP influence le chargement de la page, ça tout le monde la bien compris, mais de savoir si les sprites sont une optimisation valable pour un site lambda.

Maintenant, comme beaucoup de monde, je me sers des sprites pour faire un rollover sur le background d'un lien texte car c'est pratique mais je ne voix absolument pas l'intérêt d'insérer l'ensemble des background d'un site dans un sprite pour gagner 0,3 seconde et ce pour le chargement d'une seule page car, je le rappelle, tout ça est mis en cache.

Si tu es bien conscient le l'importance de réduire le nombre de requête HTTP je vois pas où ça bloque. Plus tu as d'images/pictogrammes décoratifs, plus l'utilisation des sprites devient "rentable".

Le gain peut être largement plus important que 0.3 sec, dans certains cas beaucoup plus (rappelons que IE < 8 ne parallélise que 2 fichiers pour un seul domaine contre 6+ pour les navigateurs modernes)

Au vu de tes posts, j'ai plutôt l'impression que c'est l'optimisation des perfs en général que tu ne trouve pas appropriée pour des sites "lambda". Si c'est ça, alors dis toi que l'optimisation des perfs est quelque chose qui améliore l'expérience utilisateur tout comme peut le faire l'accessibilité pour des utilisateurs "valides" (j'aime pas trop ce terme mais je trouve que ça sur l'instant).

Et pour la mise en cache après la 1ère visite, faut-il encore que l'utilisateur revienne sur le site. Un site qui met du temps à se charger et qui ne m'est pas indispensable, je zap et passe au suivant.

PS : Les sprites, avec de bons outils, ne font pas perdre un temps énorme, cela peut même être assez rapide.
Modifié par Andromede (12 Dec 2010 - 18:19)

Andromede a écrit :

Au vu de tes posts, j'ai plutôt l'impression que c'est l'optimisation des perfs en général que tu ne trouve pas appropriée pour des sites "lambda". Si c'est ça, alors dis toi que l'optimisation des perfs est quelque chose qui améliore l'expérience utilisateur tout comme peut le faire l'accessibilité pour des utilisateurs "valides" (j'aime pas trop ce terme mais je trouve que ça sur l'instant).

Moi je crois que tu me juges un peu vite, tu ne me connais pas et de mon côté je ne me permet pas de te discréditer sous prétexte qu'on ne soit pas du même avis. Restons en là.

Andromede a écrit :

PS : Les sprites, avec de bons outils, ne font pas perdre un temps énorme, cela peut même être assez rapide.

J'attends toujours que tu me montres un exemple de la vraie vie. Pour l'instant le débat s'arrête là de mon côté.