3

Evitez les sprites, et préférez les caches HTTP. A défaut, évitez le bricolage background-position avec un PNG et utilisez plutôt un SVG et les hash fragments pour cibler un élément précis via background-image: url('sprite.svg#element');.

Principe d’une sprite: c’est déjà mal parti

Un problème réseau

Les “sprite” servent en pratique à résoudre un problème réseau: transférer de multiples petits fichiers est bien plus long qu’en transférer un seul gros. Du coup, il peut être tentant de regrouper les petits ressources (images) en une seule grosse. Toutefois, cela génère de nombreux problèmes. D’une part, ce système est une optimisation peu efficace car les joueurs ont vocation à rester (un cache HTTP sera bien plus redoutable). Ensuite, cela casse souvent la sémantique des pages (un lecteur d’écran sera perdu). Enfin, cela sera probablement inutile quand vous activerez HTTP/2.

Corriger un problème d’une couche (réseau) dans une autre (application) est une très mauvaise pratique.

Implémentation

Ne pas l’implémenter

Le mieux est donc de ne pas implémenter un tel regroupement d’images, car vous essayez de résoudre (mal!) un problème réseau au niveau de votre application: vous n’êtes pas au bon endroit pour résoudre ce problème! Donc, laissez vos images tranquilles: vous vous poserez la question des sprites que si vraiment les performances deviennent critiques.

Avez-vous vraiment besoin de ces “sprites”? Souvent, les caches HTTP suffiront, et vous aurez bien d’autres points à optimiser dans votre jeu avant d’en arriver aux sprites!

Unicode

La meilleure solution si vous avez de petites icônes à afficher à l’écran est en fait d’utiliser l’un des nombreux caractères unicode, et de le coupler éventuellement à une police personnalisée. Ainsi, si vous faites un jeu d’échec, l’utilisation du caractère 0x265E ♞ vous permettra de représenter un cavalier noir sans aucun transfert d’image sur le réseau. Toutefois, les symboles unicode sont monochromatiques, mais vous pouvez changer la couleur dans un simple .

Emojis

Vous avez aussi la possibilité d’utiliser des emojis, qui auront l’avantage d’avoir (probablement) été déjà vues par l’utilisateur sur d’autres sites. Il pourra donc reconnaitre le symbole, et savoir immédiatement ce qu’il signifie. De plus, contrairement à l’unicode, vous pourrez avoir des images multi-colores. Enfin, la plupart des OS et navigateurs actuels implémentent les emojis courants.

Ces deux solutions (unicode et emojis) permettent d’éviter le transfert de l’image (sprite) entre votre jeu et votre client: le client les possède déjà, via son OS ou son navigateur!

Images

Sprite classique en PNG (background-position)

Si malgré tout vous souhaitez faire des sprites, évitez de les faire en PNG, même si c’est l’habitude souvent répandue. En effet, la plupart des sprites sont constituées d’un PNG dans lequel de petites images sont juxtaposées. L’exemple ci-dessous l’illustre: une sprite PNG est utilisée, et un morceau de la sprite est affichée dans chaque bulle via background-position. Le problème est alors sémantique: la sprite n’est jamais qu’une seule image, et se reposer sur la position de ce qu’on affiche dans cette image est similaire aux anciens designs par <table> d’avant le CSS.

Une étoile et une enveloppe , avec la sprite
La sprite utilisée

SVG classique (background-position)

Le même procédé peut être appliqué pour des SVG, avec les même conséquences.

Un rond rouge et un rond bleu illustrent ce procédé, avec la sprite
La sprite utilisée

Ces deux solutions ab-usent du même type de bricolage que les GIF transparents 1×1: truquer l’interface de l’utilisateur. Préférez une solution sémantique, comme ci-dessous.

SVG avec hashfragment (#hash)

La meilleure façon de faire une sprite est finalement d’utiliser un SVG et de pointer sur l’élément qui nous intéresse via un hashfragment, c’est à dire via son id que l’on référence dans un background: url('...#morceau-cible');. L’énorme avantage est alors de permettre le replacement des éléments dans la sprite sans devoir changer le CSS associé, et la création d’un vrai lien sémantique entre le background et l’élément de la sprite associé.

Le même rond rouge et un rond bleue , avec la sprite
https://toile.reinom.com/wp-content/uploads/2017/01/svgbackground-hash.svg

3