CSS Sprites - Les bonnes pratiques?

Bonsoir à tous,


Que pensez-vous des sprites géants que l'on peut trouver sur le net?

Un exemple : Sprite de monguidesante.com (visible sur la page http://www.monguidesante.com/)

2500*2000 pixels pour 572,6 Ko !

Est-ce une pratique courante? Est-ce une bonne pratique? J'ai remarqué que Google et Facebook préfère utiliser plusieurs sprites CSS de plus petite tailles... Une raison à cela?

Jusque là, lorsque j'intègre un design je crée 3 types de sprites :
- 1 sprite pour background-repeat: repeat-x (PNG24)
- 1 sprite pour background-repeat: repeat-y (PNG24)
- 1 sprite pour background-repeat: no-repeat sans transparence (PNG8)
- 1 sprite pour background-repeat: no-repeat avec transparence (PNG24)

Je procède comme ceci car c'est comme cela que j'arrive à mieux optimiser mes images.

Pouvez-vous m'indiquer si ma méthode est bonne? Quelle sont ses points faibles?


J'ai hâte d'avoir votre avis là-dessus.

Cordialement,
Julien.

Salut,

À partir du moment où les sprites ne contiennent que des images décoratives (ce qui n'est pas toujours le cas dans l'exemple que tu cites), il n'y a aucune contre-indication à y recourir.

Bonjour,

L'exemple cité comporte des erreurs (images porteuses de contenu) et est loin d'être optimisé.

Ce que toi tu fais, ce ne sont pas des sprites, mais de simples images de fond. L'utilisation n'est pas la même (impossible de faire un repeat avec un sprite, normalement).

L'intérêt des sprites est de limiter le nombre d'appels au serveur : si les images sont toutes affichées sur la page, le poids de l'image totale sera quasi le même que la somme des poids des images séparées, mais on économie le nombre d'image -1 appel serveur. Ainsi on gagne du temps de chargement.

Par contre je ne recommande pas de faire comme dans l'exemple que tu donne.

Merci pour vos réponses

En fait si, je fais des sprites CSS, pas uniquement pour les fonds. Toutes les icônes du CMS que nous avons développé sont regroupés dans une seule image (un exemple parmi d'autres).

Je viens de l'appliquer au site d'un client (pas encore en ligne)

<h3 id="apropos"><a href="index.html" title="Location de moto Koh Samui"><img src="images/transparent.gif" alt="Location de moto Koh Samui" width="255" height="40"/></a></h3>

Et la feuille de style:

#apropos img{background:url(images/sprite_h2b.png); height:40px; width:255px; background-position:-2px -2px;}

Est-ce correcte en terme d'accessibilité?
Et au niveau référencement, Google prendra en compte la description "alt" de l'image?
Va-t-il du coup accorder moins d'importance au titre car il n'y a pas de texte, seulement une image?

________

Lorsque images désactivées :
- Le texte alternative ne s'affiche pas (uniquement au survol)
- Aucun déformation au niveau de la mise en page (le titre conserve les dimensions de l'image)

Lorsque CSS désactivé:
- Idem que lorsque images désactivées

________

En fait, je cherche la "méthode ultime", le bon compromis entre accessibilité et esthétisme pour afficher des titres h1, h2, h3 en images avec liens... J'ai consulté ce tutoriel (Alsacréations), mais je ne comprend pas pourquoi le text-indent:-5000px ne fonctionne pas sur ma balise span.
Modifié par Raphael (23 Feb 2022 - 11:20)

Je pense que c'est de la bidouille inutile... Pourquoi mettre une image transparente par dessus une image de fond qui devrait être à la place de l'image transparente.

Bref, peu d'intérêt à mon goût.

Les sprites sont, selon moi, à réserver pour les vraies image de fond (coins arrondis, certaines puces...).

Sinon, oui, la solution est "correcte" d'un point de vue accessibilité. SAUF quand les CSS sont désactivés (pas d'image de fond, mais comme l'image transparente "s'affichera" il n'y aura pas de texte alternatif affiché).

Oui, alt est compris par les robots et sera pris en compte pour le référencement de ton site (c'est d'ailleurs un des intérêt du alt).

Pour la dernière question, il faudrait faire une étude la dessus, mais en théorie, non, la valeur du alt compte comme du texte (dans un paragraphe, par exemple), car c'est du texte.

Merci pour votre avis là dessus!

Je viens de trouver une technique supplémentaire sur css-tricks

Utilisant la propriété clip, la solution est-elle préférable?

Effectivement, lorsque le css est désactivé le rendu est... heuu... comment dire... pas terrible

Je continue ma quête pour trouver la meilleure méthode pour utiliser les sprites pas seulement pour les ornements de page.

Toute utilisation des sprites, autre que pour des éléments décoratifs, posera des problème d'accessibilité ou de rendu sous certains conditions.

Pourquoi vouloir absolument utiliser un mécanisme qui n'est pas fait pour ce que tu cherches à faire ?