Samla dina ikoner i ett enda ark, med tillhörande CSS

Med Sprite-ark kan fotografer och visuella kreatörer samla ikoner och deras CSS före integrering. Samla dina ikoner i ett enda ark, med tillhörande CSS.

Samla dina ikoner i ett enda ark, med tillhörande CSS. Verktyget är gratis i webbläsaren och visar resultatet utan att kräva ett konto.

Så använder du

Välj flera PNG-, JPEG- eller WebP-bilder; var och en måste vara 20 MB eller mindre, och du behöver mellan 2 och 100 filer.
Ange den maximala bredden du vill ha för det slutliga arket, i pixlar.
Lägg till en marginal runt varje sprite så att ikonerna inte rör vid varandra.
Bygg arket och ladda ner både bilden och dess CSS-stilmall.

Exempel

En frontendutvecklare sätter ihop en uppsättning små ikoner för en navigeringsfält. Hen laddar filerna, väljer en rimlig arkbredd och en liten marginal och lägger sedan till det genererade arket och CSS i projektet. Sidan kan begära en bild i stället för många separata filer.

Gränser och format

Utdata är ett bitmappsark, inte ett vektorikonsystem, så kraftig förstoring kan göra ikonerna mjukare.
Indatafiler måste vara PNG, JPEG eller WebP, med ett tak på 20 MB per bild och totalt mellan 2 och 100 filer.
Kontrollera den genererade CSS-koden mot din projektstruktur, eftersom klassnamn eller filsökvägar kan behöva justeras.
En dåligt vald bredd eller för många bilder kan skapa ett ark som är besvärligt att underhålla senare.

Var bearbetningen sker

Arkbygget och CSS-genereringen körs i din webbläsare. Dina bildfiler laddas inte upp, inget konto krävs och de färdiga tillgångarna blir tillgängliga för nedladdning på din enhet.

Vanliga frågor

Hur bör jag välja den maximala arkbredden?

Tänk på hur många ikoner du har och var arket ska användas. En måttlig bredd hindrar arket från att bli extremt högt, medan ett bredare ark kan minska höjden. Prova ett värde, granska resultatet och justera om layouten känns obalanserad.

Måste jag använda den genererade CSS-filen?

Du kan använda den som den är, anpassa den till dina namnkonventioner eller helt enkelt läsa den som en placeringsguide. CSS:en beskriver var varje sprite finns i arket. Själva arkbilden förblir densamma oavsett om du behåller stilmallen eller inte.

Kan jag blanda olika bildformat i ett ark?

Ja, PNG-, JPEG- och WebP-filer kan väljas tillsammans. För ikoner fungerar ofta PNG-filer med genomskinlighet bäst eftersom de smälter in snyggt mot olika sidbakgrunder. Granska alltid det slutliga arket, eftersom kanter och bakgrundsområden kan variera beroende på källformat.