CSS image sprites gör det möjligt att dramatiskt minska antalet HTTP-förfrågningar på en webbplats genom att kombinera många eller alla bilder på din webbplats till en enda fil. Den här filen kan sedan användas tillsammans med CSS-bakgrundspositionering för att implementera enskilda bilder.
Nackdelen med den här tekniken är att det är en noggrann, inblandad process som kräver att du manuellt kombinerar dina bilder och firas med CSS för att få varje bild att visas korrekt. Lyckligtvis finns det ett antal gratis onlineverktyg som helt automatiserar processen. Idag har vi en fantastisk samling av tolv av de här verktygen, var och en med sin egen unika ta på generationsprocessen. Oavsett om du vill skapa en sprite från en mapp med bilder eller konvertera en befintlig webbplats, har vi verktygen som hjälper dig att få jobbet gjort i sekunder.
CSS Sprite Generator: Projekt Fondue
En bra generator med många alternativ. Du laddar upp en .ZIP av alla bilder som du skulle vilja göra till en sprite och det tar hand om resten. Det spetsar ut en bild och alla de olika? Bakgrundspositionerna? värden som du behöver.
CSS Sprites generator
Ugly and buggy, denna sprite generator tvingar dig att ladda upp varje bild individuellt. Prova att se vad du tycker men ärligt, det finns bättre alternativ på den här listan.
CSS Sprites - Online CSS Sprite Builder / Generator
Den här är ganska snygg. Du kan enkelt ladda upp en massa bilder på en gång, välj din filtyp och välj även att få antingen Sass och CSS-kod som ett resultat. Det finns också några snygga alternativ för att automatiskt generera svävar effekter som desaturated och vänd. Övergripande ganska imponerande, se till att kolla in det.
Spritebox - Skapa CSS från Sprite Images
Den här tar en annan, lite mindre automatiserad rutt. I stället för att skapa en spritbild för dig tillåter du att ladda upp din redan skapade sprite och definiera specifika områden för att generera den resulterande CSS. Ett bra verktyg om du föredrar att bygga sprites i Photoshop och bara vill ha hjälp med koden.
Canvas: CSS Sprites Generator
Om du laddar upp bilder för den här måste du göra det en åt gången, vilket är lite av smärta. Om du har länkar kan du helt enkelt klistra in i en lista med motsvarande klassnamn och du är bra att gå. Alternativen inkluderar vaddering och bakgrundsfärger. Det fungerade bra i min testning, definitivt värt en titt.
Stygn - En HTML5 sprite arkgenerator
Den här låter dig dra i bilder, vilket är jättebra efter att ha använt alla de besvärliga lossare som andra utvecklare har kommit på. Därefter kan du helt enkelt klicka på en knapp för att få bilden och en annan att ta tag i CSS. Det finns nästan inga alternativ och det fungerar bara i Chrome och Firefox, men det är perfekt om du bara vill ha en snabb och enkel lösning.
Spritemapper
Den här är endast för supernerds, det är en nedladdningsbar sprite generator som du kör från kommandoraden. Implementeringen är verkligen smidig, men du pekar det bara på din befintliga CSS-fil och det gör resten av jobbet. Detta gör problemet med långsiktig sprite-hantering en film eftersom du bara kan hänga på dina ursprungliga css- och bildfiler och omprocessera dem när det ändras.
SpriteMe
SpriteMe är ett fantastiskt verktyg som låter dig helt hålla din typiska utvecklingsprocess i takt. Bara bygga din sida som du normalt brukar använda enskilda bilder. Sedan, när du är klar, öppna sidan i en webbläsare och klicka på SpriteMe-bokmärket. Detta tar tag i alla bilder på sidan, skapar en sprite och genererar CSS. Detta är särskilt användbart om du konverterar en spännande webbplats.
Spritefy
Spritefy är ett annat alternativ som låter dig helt enkelt dra en massa filer i webbläsaren för att bearbeta dem. Som med stygn finns det verkligen inga alternativ men det är definitivt ett super snabbt sätt att komma igång med sprites (endast Chrome och Firefox).
CSS Sprite Generator
Den här har några onödiga steg i generations- och installationsprocessen, så det tar några sekunder längre än de flesta andra alternativen, men det har massor av kodutdata inklusive både CSS och HTML tillsammans med olika utdrag för att lägga till varje bild till en div eller span, infoga länkar etc.
SpriteMeister - Automatisk CSS Sprite Generator
SpriteMeister är mycket som SpriteMe ovan, bara mindre automatiserad. I stället för att använda en bokmärke laddar du manuellt upp varje bild och din aktuella CSS-fil och sedan får en nedladdning med uppdaterad kod och en enda bild.
Sprite Creator 2.0
Den här fungerar precis som Spritebox ovanför. Du laddar upp spritbilden som du skapade någon annanstans och använder en enkel urvalsprocess för att automatiskt generera lämplig CSS för varje bild.
Älskar det? Dela det!
Om du haft denna veckas samling av freebies, dela kärleken och skicka ut en länk på dina favoritwebbplatser. Här är ett bekvämt utdrag för att du ska kopiera och klistra in som du vill!
12 gratis CSS Sprite generatorer: http://goo.gl/NhLNR