Logo de chargement de l\'agence web curseur et bergamote

Tuto sprite reponsive et sprite svg responsive

Guide de mise en place de sprites responsives

Ayant constaté qu’il y a peu de littérature Française sur les sprites responsives, voici un tutoriel vous expliquant simplement comment mettre en place ce système avec des images aux formats standards web : jpg / png mais aussi avec des dessins vectoriels en SVG

Pourquoi utiliser des sprites ?

L’utilisation des sprites permet de grouper dans un seul fichier, les images qui apparaissent sur toutes les pages de votre site internet ou à plusieurs endroits sur ce dernier. L’intérêt de cette technique est d’éviter au serveur d’aller chercher plusieurs fichiers qui pourraient –être regroupés dans un seul : on va aller récupérer un fichier image de plus grande taille plutôt que 50 petites images, le serveur aura donc moins « d’allers retours » à effectuer et le chargement de votre page se fera plus rapidement.

Principe de base d’un sprite (non responsive) :

Pour créer un sprite on va utiliser un fichier dans lequel les images sont positionnées les unes à côté des autres et on va afficher l’image que l’on souhaite en appelant ses coordonnées dans une balise HTML à laquelle on attribue une propriété CSS background. Concernant le fonctionnement technique, je vous recommande d’aller consulter ce tutoriel sur le site internet Openclassroom qui est extrêmement bien fait :
Bien utiliser les sprites CSS

Créer un sprite responsive :

Pour les sites internet en responsive web design, la technique se complexifie puisque la taille de l’image n’est pas fixe il faut donc calculer les coordonnées en pourcentage mais la taille de l’image sera aussi en pourcentage donc à chaque redimensionnement de fenêtre vous allez devoir user d’une « ruse » avec le padding pour que la hauteur respecte la largeur... Plutôt que de vous encombrer avec ces calculs, rien de plus simple que d’utiliser un outil en ligne tout prêt :
http://responsive-css.spritegen.com/

Sur ce site internet, il suffit de choisir ses fichiers et le sprite est généré automatiquement, il ne vous reste plus qu’à modifier votre code HTML avec les balises images correspondantes (le nom de la classe sera le nom du fichier image), sauvegarder le fichier sprite et ajouter les lignes de code CSS fournies (n’oubliez pas de changer le nom du fichier image dans ces quelques lignes : background-image : url(‘NomDeVotreFichier.jpg’) ; ). Et voilà vous avez un sprite responsive, si vous voulez changer la taille d’une des images avec un pourcentage, vous pouvez comme avec n’importe quelle image ”seule”.

Quelques options sont disponibles notamment l’ajout d’un préfixe à votre classe CSS pour la reconnaitre plus facilement dans votre code et l’ajout de paddings au sein du fichier image (le générateur va séparer vos images avec le nombre de pixels indiqués).

Création d'un sprite responsive SVG (format d’image vectorielle) :

Une fois encore, les choses se compliquent pour créer un sprite SVG responsive et de nombreuses méthodes existent (de nombreux problèmes de compatibilité navigateurs existent aussi !). Je vais vous donner celle que j’utilise mais gardez à l’esprit que ce n’est pas la seule qui existe, je me suis juste habitué à travailler avec celle-ci, qui me convient.

Pour créer un sprite responsive SVG j’utilise une méthode un peu longue puisque je le fait de façon « artisanale » :

J’exporte toutes mes formes dans des fichiers SVG séparés (chacune de mes formes sont groupées dans une balise <g>) puis je vais prendre le contenu de ces dernier et remplacer la balise <g> par une balise <symbol> à laquelle j’attribue le viewBox de ma forme. Ce qui donnerait par exemple :
<symbol id="maforme" viewBox="0 0 34 10">
 <polygon style="fill:#2E2E2E;" points="34,0 17,10 0,0 "/>
</symbol>

Toutes ces formes sont encapsulées au sein d’une balise svg :
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;" width="100%" height="100%">
Une fois ceci fait pour toutes les formes j’ai donc un fichier sprite .svg

Ensuite, je vais appeler ces formes dans mon code html en ajoutant un objet svg faisant référence à l’id attribué à ma forme (et je vais attribuer le viewBox de ma forme à l’objet svg afin d’éviter des problèmes de compatibilité avec certains navigateurs… pour ne pas les citer : la famille internet explorer)
<svg id="spritesvg1" viewBox="0 0 34 10">
 <use xlink:href="sprite.svg#maforme"></use>
</svg>

Il ne reste plus qu’à attribuer une taille en CSS à votre objet svg et le tour est joué.

Le format SVG pose encore des problèmes de compatibilité en fonction des navigateurs et il ne sera parfois pas judicieux d’utiliser ce format (et il sera parfois plus pratique, si votre forme est simple de l’intégrer directement dans votre code html).