Sprites et web mobile

Connaissez-vous les sprites ?

Les sprites sont une technique de regroupement d’images venue du jeu vidéo : La technique consiste à regrouper plusieurs versions d’une image dans une seule.

Elles servent à animer des personnages ou à regrouper toutes les images d’un univers dans une seule ressource, afin de la charger plus vite, ou de changer tout le thème de l’univers en une seule ligne de code.

Dans le monde du web mobile, cette technique est également très pratique : Elle réduit le nombre de requêtes réseau, fluidifie l’expérience utilisateur et offre quelques autres avantages.

Voici comment les utiliser.

Les sprites vont vous permettre de facilement changer toutes les images selon le device ratio du terminal en utilisant les media-queries en CSS. Et, avec le parc de terminaux actuel, rien que pour Android et iOS on a déjà 6 résolutions différentes.

Voici un exemple de fichier sprite.css tel que nous l’utilisons :

Chaque version pointe vers une image de taille différente. Le ratio 2 pointe par exemple sur une image deux fois plus grande que le ratio 1, que l’on affiche sur le même nombre de pixels afin d’avoir une densité de pixels plus élevée.

Les versions iOs sont la version standard mdpi (qui équivaut à @1x) et la version @2x. Les autres règles ciblent Android et ses multiples versions. Notez l’exception de la résolution 1.3 qui correspond aux tablettes Google Nexus 7. Plutôt que de lui faire une version d’image spéciale, nous avons choisi (après tests) de lui mettre l’image hdpi.

Avec cette CSS, chaque terminal charge uniquement l’image qui lui est propre et charge d’un seul coup l’ensemble des images de l’application. Cela améliore grandement la fluidité : au changement de page, les images s’affichent instantanément car elles ont déjà été chargées.

Dans cette même CSS nous ajoutons ensuite l’ensemble des composants visuels de l’application, avec leur position dans la sprite et leur taille :

Une fois cette CSS réalisée, il devient très simple d’utiliser une ressource dans le code HTML. Par exemple, pour ajouter une icône dans un lien, on va simplement écrire :

Certaines ressources ne pourront pas être mises en sprite. C’est le cas des textures ou fond qui doivent se répéter. Les règles CSS background-repeat fonctionnent mal avec les règles de background-position. Il n’est actuellement pas possible de répéter une portion d’une image de fond rien qu’avec des règles CSS.

Vous devrez donc séparer ces images de la sprite et réutiliser les media-queries pour cette image là spécifiquement dans votre CSS.

Côté design, faire une sprite pour chaque résolution n’est pas chose facile. Nous vous conseillons de partir de la plus grande sprite (xhdpi), de garder pas mal de zones blanches entre les images et de toujours caler vos tranches sur des position divisibles par 2.25, 2, et 1.5

Il existe des outils pour générer des sprites : des sites en ligne et des scripts Photoshop.

Nous vous recommandons fortement d’utiliser ce genre de script pour générer vos sprites. Avec Photoshop et quelques connaissances en script vous pourrez également ajouter le redimensionnement des images aux différentes résolutions.