Des outils pour créer des sprites CSS? [fermé]


126

Existe-t-il de bons outils pour créer des sprites css?

IDEALEMENT, je voudrais lui donner un répertoire d'images et un fichier .css existant qui fait référence à ces images et lui faire créer une grande image optimisée avec toutes les petites images ET changer mon fichier .css pour faire référence à ces images.

Au moins, je voudrais qu'il prenne un répertoire d'images et génère un grand sprite et le .css nécessaire pour les utiliser comme arrière-plan.

Existe-t-il de bons plugins Photoshop ou des applications complètes pour le faire?



Pourriez-vous s'il vous plaît élaborer un peu plus, essayez-vous de compiler tous les sprites sur une image plus grande et ensuite utiliser css pour afficher la partie de l'image qui contient le bon sprite. (technique des portes coulissantes)
teh_noob

1
y a-t-il un moyen de changer la couleur d'arrière-plan pour que je puisse voir mes icônes blanches sur spritepad?
Jim

24
Je ne comprends vraiment pas pourquoi cela a été fermé ?? Il semble y avoir beaucoup de bonnes réponses utiles. Cela devrait sans doute être une question de super-utilisateur car je ne mentionne aucun langage de programmation particulier, mais j'aime les réponses que j'ai et elles ont évidemment été utiles à beaucoup.
Simon_Weaver

3
Je vous en prie, ne supprimez pas cette question, c'est la liste la plus utile sur Internet pour ce problème, et est certainement liée à la programmation (même si ce n'est pas une question de programmation en soi) . Ceci est définitivement un appel au jugement, et n'aurait pas dû être fermé de force par les mods; c'est à cela que sert le système communautaire de clôture des votes ....
BlueRaja - Danny Pflughoeft

Réponses:


46

Cela fera 90% du travail pour vous: CSS Sprite Generator . Vous devrez toujours modifier les règles vous-même, mais l'outil vous donnera les fragments de code dont vous avez besoin pour le nouveau fichier CSS.


@ben parfait! en supposant que cela fonctionne ;-)
Simon_Weaver

1
Je ne suis pas satisfait de cet outil, je le désélectionne donc comme réponse sélectionnée. il a fini par recadrer mon image et cela n'explique pas très bien pourquoi il laisse de grands écarts entre les images
Simon_Weaver

Je n'aime pas cette solution, même si je suppose que cela fonctionne bien. SpriteMe semble fonctionner beaucoup mieux.
Chuck Le Butt

2
le problème avec cet outil est que les images ne sont pas en pleine qualité.
Jim

50

Instant Sprite est un générateur de sprites CSS intégré au navigateur sur lequel je travaille. C'est vraiment rapide, mais il n'a pas autant de fonctionnalités que certains des autres. Il ne fonctionne actuellement que dans Firefox ou Chrome, car il utilise JavaScript FileReader et HTML Canvas pour générer les sprites dans le navigateur Web sans téléchargement.


1
Wow, quel excellent outil. Merci!
Vivian River

J'ai utilisé votre outil pour travailler sur certains sites Web de production depuis que vous avez posté ici. C'est très simple et facile.
Vivian River

7
+1. Votre outil est bien meilleur que le reste que j'ai essayé.
Ed Bayiates

3
c'est le plus intuitif à ce jour ... merci ... (bien qu'il devrait inclure la disposition "intelligente" des sprites pour minimiser les problèmes de performances)
kumarharsh

2
Merci tout le monde! @Harsh, je suis d'accord sur la mise en page - j'ai commencé à expérimenter cela il y a un certain temps, mais je ne l'ai jamais vraiment fait fonctionner: github.com/bgrins/InstantSprite/tree/bin-pack
Brian Grinstead

31

Il y a maintenant Sprite Me de Steve Souders. Essayez-le et cela semble fonctionner plutôt bien.

Voici le lien http://spriteme.org/ et voici le billet de blog l'annonçant.

http://www.stevesouders.com/blog/2009/09/14/spriteme/


2
+1 C'est incroyablement facile à utiliser: il suffit de naviguer vers la page que vous voulez et de cliquer sur le bookmarklet SpriteMe ... Il crée les images et CSS automatiquement!
Chuck Le Butt

C'est un bon outil, mais il nécessite un fichier ZIP de vos images et l'ordre dans lequel il place vos sprites est l'ordre ZIP. L'outil de Brian ci-dessous vous permet de télécharger des fichiers et de glisser-déposer pour changer l'ordre.
Ed Bayiates

J'aime le fait que le code source soit disponible gratuitement
lkraav

13

Cela semble prometteur:

http://csssprites.org/

J'ai également trouvé cet article qui contient des informations utiles et même des commentaires de lecteurs qui valent la peine d'être lus.

Apparemment, la boîte à outils Web de Google a également quelque chose - donc si vous l'utilisez, cela vaut la peine de le vérifier.


On dirait que la page ne fonctionne plus ...
Bob

smartsprites.osinski.name a été renommé csssprites.org , je l'ai donc édité pour vous. Cela semble être l'une des rares options qui peuvent être intégrées dans le processus de construction, d'après ce que j'ai vu ici.
ripper234

9

C'est définitivement légitime. Les spritemaps enregistrés IMHO sont une clé, donc seules les images et les lignes de code pertinentes devraient changer au fil du temps, au lieu de recalculer l'ensemble des coordonnées à chaque changement de contenu d'image.
lkraav

7

ZeroSprites est un générateur de sprites CSS visant à minimiser la zone à l'aide d'algorithmes de planage VLSI.


6

trouvé celui-ci assez rapide, bien que la limite de téléchargement de 500K puisse être pénible. le code source est disponible ici


Pourquoi le téléchargement de 500 Ko serait-il pénible? Je ne voudrais probablement jamais télécharger> 100kb
Simon_Weaver

J'ai dit que «pourrait» être une douleur. Cela dépend en quelque sorte de l'application non? .. Un fichier zip plein de PNG de taille moyenne, par exemple, sur une grille de taille ~ ~ pourrait ~ être proche de ce nombre. si ses tous petits bitmaps alors sûr / pas de problème.
Scott Evernden

1
ya mais le but des sprites css est d'éviter que de nombreuses petites images soient chargées avec de nombreuses requêtes. si vous aviez vraiment autant de petits sprites, le chargement prendrait beaucoup de temps et aucun ne serait affiché. mieux pour les garder je penserais au plus 100kb. vous pouvez toujours en faire plusieurs
Simon_Weaver

je travaille beaucoup avec les images. peut-être pas de petits bitmaps css. alors peut-être que c'est pourquoi j'ai donné la mise en garde. vos besoins sont différents / ok. 500kb arriveront en une seconde sur la plupart des haut débit. J'ai été le premier à fournir la réponse acceptée à votre question et me voila ~ voté et défendant ma langue? peu importe ...
Scott Evernden

Ce fut une douleur pour moi, car les images avec lesquelles j'ai commencé ont fini par être un paquet plus grand que cette limite, donc j'ai dû découper ou optimiser avant même de pouvoir les utiliser.
Kzqai


4

On ne sait pas encore s'il sera intégré au framework ASP.NET principal, mais voici un projet Microsoft codeplex pour csssprites:

http://aspnet.codeplex.com/releases/view/50869

si vous l'aimez - utilisez-le - ou aimez simplement l'idée, ajoutez un commentaire. Je pense que ce serait une bonne chose à avoir dans le framework ASP.NET. Je ne l'ai pas utilisé personnellement (j'ai dû inventer la roue moi-même) mais il a obtenu de bonnes critiques.


Il comprend les composants suivants:

  • API pour générer automatiquement des sprites et des images en ligne
  • Contrôles et aides qui fournissent un moyen pratique d'appeler l'API

Fonctionnalités ajoutées dans la deuxième version:

  • Un contrôle de liaison CSS pour les formulaires Web (sélectionne le fichier CSS approprié pour le navigateur de l'utilisateur, mais n'affiche pas d'image)
  • Utilisation de chemins de dossier personnalisés autres que App_Sprites
  • Modification de la direction de la mosaïque des images de sprite
  • Fusion du CSS généré avec le propre CSS d'un utilisateur

Fonctionnalités à l'étude pour les versions futures:

  • Sélection automatique de la couleur d'arrière-plan de sprite la plus efficace
  • Réduire automatiquement le CSS rendu
  • Compilation avec .NET 3.5

4

Utilisez simplement http://sprites.scherpontwikkeling.nl/ il peut également générer des sprites à partir des URL de sites Web ... vous pouvez intégrer vos sprites après avoir développé votre site Web. C'est très simple à utiliser;)


3

Pas une réponse directe mais à mes collègues développeurs et intégrateurs Web, envisagez simplement d'aligner chaque sprite sur des puissances de deux; par exemple une grille de 16 pixels ou de 32 pixels. Cela facilite grandement le calcul des décalages dans le fichier CSS. Tout l'espace blanc entre n'a pas d'importance car les formats gifd et png se compressent très bien.


bon conseil, même si j'essaie principalement de combiner des en-têtes de texte (1 à 2 Ko chacun) dans un seul fichier. Je ne suis pas trop inquiet à propos des espaces blancs parce que je sais qu'il sera compressé - je ne comprends tout simplement pas pourquoi les outils pour créer des sprites en font autant
Simon_Weaver

Une mise en garde à cela - alors que l'espace blanc dans l'image sera compressé pour le transport, il est développé et occupe la mémoire lors du chargement du navigateur. L'utilisation aveugle d'outils de génération automatique de sprites peut conduire à des images énormes, ce qui peut augmenter l'utilisation de la mémoire sur ces pages. Un certain soin est nécessaire dans le regroupement des images pour former des feuilles de sprite pour garder cela dans des limites raisonnables.
Sam Foster

Sam: C'est vrai! Je l'ai découvert plus tard. Si l'image du sprite est très large ou haute, c'est quelque chose à considérer! Surtout pour les applications de téléphonie mobile (moins de mémoire). Simon: l'espace blanc est probablement dû aux limitations de CSS. Même lorsque vous n'utilisez pas de répétition sur un arrière-plan, l'image du sprite apparaîtra à travers le remplissage, la hauteur de ligne et essentiellement toute la zone d'arrière-plan de l'élément à l'exception des marges et des bordures. Disons par exemple que vous avez une icône pour un lien. Si le lien s'étendait sur plusieurs lignes, d'autres icônes du sprite pourraient apparaître. L'ajout de suffisamment d'espaces le rend plus "résilient".

@Simon_Weaver - Sur la base des commentaires de tout le monde ici, j'ai publié un outil de sprite qui est simple stackoverflow.com/a/13281578/1162141
technosaurus


2

Si vous aimez Java, vous pouvez utiliser GWT 1.5+ qui est livré avec quelque chose appelé " ImageBundle ". Le compilateur GWT gérera tous les détails désagréables pour vous. Vous n'aurez même pas à coder une seule ligne de JavaScript ou à écrire du CSS.


2

Voici un script qui combine des images via un script Photoshop dans des sprites CSS . Il ne fera pas de carte de sprite comme vous l'avez demandé, mais il combinera les images en multiples de deux (2, 4, 8) si elles sont de la même taille. Je préfère combiner des images similaires (normales, survolées, sélectionnées, parent de sélectionnées) que d'avoir toutes les images dans un seul fichier.



2

Il existe un nouvel outil appelé ActiveSprites, qui fait partie de la gemme active_assets.

Github: http://bitly.com/eRTwU4

Vous utilisez un dsl ruby ​​pour définir vos sprites puis faites des "sprites rake" et les sprites et les feuilles de style correspondantes sont générés.

C'est rad!

Voici un exemple de code,

# config/sprites.rb
Rails.application.sprites do
  sprite 'sprites/sprite1.png' => 'sprites/sprite1.css' do
    _'sprite_images/sprite1/1.png' => 'a.one'
    _'sprite_images/sprite1/2.png' => 'span.two'
  end
end

2

https://github.com/northpoint/SpeedySprite

Cet outil adopte une approche novatrice en ce sens qu'il assemble les images demandées à la volée en tant que service http. Cela rend l'ensemble du processus assez simple (aucun prétraitement requis, changez les images à tout moment): Vous démarrez le service et puis référencez les images que vous voulez dans votre HTML:

<link href="css/my-images-dir/" rel="stylesheet">
<div class="my-image-name-here" />

Parce qu'il est dynamique, vous pouvez même créer des sprites à partir d'un ensemble dynamique d'images telles qu'une page de vignettes. Cependant, ne prend pas en charge JPEG, mais PNG et GIF fonctionnent bien.


1

Je vous suggère d'utiliser Sprite Master Web . Je génère automatiquement des feuilles de sprite et exporte le code CSS pour vous. Il essaie toujours de générer les plus petites feuilles de sprite avec des algorithmes avancés.

Voici une capture d'écran et une vidéo youtube

entrez la description de l'image ici


À noter, ce n'est pas une application gratuite ou open source mais un prix raisonnable à 3,99 $. Il est bien construit et fait une bonne compression PNG.
t.mikael.d

Mac uniquement. Bummer, celui-ci avait l'air prometteur.
Mahn

1

Aucun de ces outils ne répondait à mes exigences, alors j'en ai écrit un qui utilise la minuscule bibliothèque d'images de Mark Tylers, mtpixel (qui fait maintenant partie de mtcell ) Ce n'est pas très complet mais il est facilement extensible grâce aux fonctions intégrées de mtpixel qui incluent: niveaux de gris, inversion des couleurs , rotation, netteté, quantification, postérisation, retournement (vertical et horizontal), transformation, rgb-> indexé, indexé-> rgb, détection de bord, gaufrage, dessin de polygones, texte et plus encore.

Tout ce que vous faites est de lui passer un ensemble d'images sous forme d'arguments (supports png, gif et jpeg) et il produira un png rgb appelé sprite.png avec les données utiles de découpage d'images vers stdout. Je l'utilise dans des scripts bash pour spritifier un répertoire entier d'images et générer les données de découpage pour la génération automatique de css (avec l'espoir de le rendre éventuellement capable de remplacer automatiquement les balises img existantes par un peu de sed / awk créatif)

Les packages binaires pour chiot linux seront ici:

http://murga-linux.com/puppy/viewtopic.php?t=82009

Mon cas d'utilisation ne nécessitait que l'épissage vertical des images dans un nouveau png, donc c'est tout ce qu'il fait, mais mon code source est du domaine public et la bibliothèque mtcelledit est gpl3. Avec mtpixel lié statiquement, le binaire est <100 kb (seulement quelques ko lorsqu'il est lié dynamiquement) et les seules autres dépendances sont libpng, libjpeg et libgif (et freetype avec le mtpixel officiel, mais je n'avais pas besoin du support de texte, donc je a commenté les bits freetype dans la construction statique)

n'hésitez pas à modifier pour vos propres besoins:

#include <stdlib.h> 
#include <stdio.h> 
#include <string.h> 
#include <mtpixel.h> 

int main( int argc, char *argv[] ){ 
int i=0,height=0,width=0,y=0; 
mtpixel_init(); 
mtImage *imglist[argc]; 
argc--; 
do{   imglist[i] = mtpixel_image_load( argv[i+1] ); 
   height+=imglist[i]->height; 
   if (imglist[i]->width > width) width=imglist[i]->width; 
} while (++i < argc); 
imglist[argc]=mtpixel_image_new_rgb(width,height); 
imglist[argc]->palette.trans=0; 
i=0; 
do{   if (imglist[i]->type == MTPIXEL_IMAGE_INDEXED) 
      mtpixel_image_paste(imglist[argc],mtpixel_image_to_rgb(imglist[i]),mtpixel_brush_new(),0 ,y); 
   else mtpixel_image_paste(imglist[argc],imglist[i],mtpixel_brush_new(),0 ,y); 
   printf("name=%s;width=%d;height=%d;y_offset=%d\n",argv[i+1],imglist[i]->height,imglist[i]->width,y); 
   y+=imglist[i]->height; 
   mtpixel_image_destroy( imglist[i] ); 
}while (++i < argc); 
   mtpixel_image_save( imglist[argc], "sprite.png", MTPIXEL_FILE_TYPE_PNG, 5 ); 
mtpixel_quit(); 
return 0; 
}

0

Si vous utilisez .net, consultez http://www.RequestReduce.com . Il crée non seulement le fichier de sprite automatiquement, mais il le fait à la volée via un HttpModule avec la fusion et la réduction de tous les CSS. Il optimise également l'image du sprite à l'aide de la quantification et de la compression sans perte et gère la diffusion des fichiers générés à l'aide des en-têtes ETags et Expires pour assurer une mise en cache optimale du navigateur. La configuration est triviale impliquant juste un simple changement de web.config. Voir mon article de blog sur son adoption par la galerie d'exemples Microsoft Visual Studio et MSDN.


0

J'ai récemment trouvé ces outils: SpriteRight http://spriterightapp.com/

SpriteRight est un générateur de feuilles de sprites CSS pour Mac qui vous permet d'importer vos images ou feuilles de style existantes. Accélérez le chargement de vos sites, réduisez les coûts de bande passante et gagnez du temps. SpriteRight génère même du code CSS à la volée.


À noter, ce n'est pas une application gratuite ou open source mais un prix raisonnable à 4,99 $. Il est bien construit et fait une bonne compression PNG, plus de fonctionnalités que le "Sprite Master Web" ci-dessus.
t.mikael.d

Et ce n'est que mac.
Mahn
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.