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

Astucecss

Publié par le , mis à jour le (68197 lectures)

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

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.

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.

Commentaires clos