Des générateurs de sprites CSS pour accélérer le chargement des images

Astuce par (Alsacréations, Strasbourg)
Créé le , mis à jour le (62740 lectures)
Tags : css, images, background, sprite

Vous utilisez certainement déjà les sprites CSS sur votre site. Cette technique qui consiste à regrouper un ensemble de petits éléments visuels dans un même fichier afin d'y faire référence de manière uniforme et d'épargner des requêtes multiples au serveur n'est pas des plus agréables à mettre en place. En effet, il faut calculer les dimensions des zones à afficher et leurs coordonnées, puis exploiter la propriété background-position en CSS pour "décaler" la vue au bon emplacement.

CSS Sprite Generator est destiné à vous faciliter la tâche en combinant différentes images fournies dans une archive zip en un seul assemblage.

Sprite Generator

A l'inverse, Sprite Creator simplifie la découpe virtuelle car il suffit de tracer une zone de sélection autour du sprite que l'on souhaite utiliser dans la feuille de style pour obtenir les instructions CSS.

Sprite Creator

Stitches, rend la tâche encore plus aisée par drag & drop avec une interface en HTML5.

Stitches

Pour en savoir plus au sujet des sprites :

Commentaires

Skoua a dit le

Super utile !

Merci pour l'info.

jerrywham a dit le

Trop bien !!! C'est vrai que (par flemme ;0p ), je n'utilise pas trop cette technique mais quelque chose me dit que ça va m'inciter à changer mes habitudes.

Merci pour l'info.

raphpell a dit le

Le logiciel IconWorkshop, payant avec mise à jour gratuite à vie est à voir aussi. Il permet de modifier la position des images dans l'image strip rapidement, possède une bibliothèque d'icônes et il est un super éditeur d'icônes et d'images.

frato a dit le

Pour découper ses sprites, il y a aussi YASC (Yet Another Sprite Editor) : http://www.lecentre.net/fratoblog/yasc/