CSS-sprite-sheet-generator

Sådan laver du et sprite sheet

1. Slip dine billeder i dropzonen, eller klik på den for at vælge dem. PNG, SVG, WebP, JPG og de andre formater, som din browser kan læse, accepteres, op til 500 billeder. Hver fil vises på listen Billeder med sin størrelse; knappen × fjerner ét billede, og Fjern alle billeder rydder listen.
2. Vælg et Layout: Gitter, Pakket (mindste ark), Vandret strimmel eller Lodret strimmel. Med Gitter angiver Kolonner (0 = automatisk) antallet af kolonner.
3. Indstil Afstand (px) mellem sprites (som standard 2), og afkryds Todelsstørrelse (256, 512, 1024 …), hvis din motor eller dit GPU kræver det.
4. Vælg Datafil: CSS (klasser med background-position), JSON (billedkort) eller CSS og JSON. Tilpas Filnavn og Præfiks til CSS-klasser (begge som standard »sprite«).
5. Tjek eksemplet, Arkets størrelse og Udnyttet plads, og klik derefter på Download ZIP (PNG + data) eller Download kun PNG. Den Genererede kode kan også kopieres direkte.

Billederne afkodes i din browser, og intet uploades. En SVG uden egen bredde og højde rasteriseres med den længste side på 256 px.

Valg af layout

• Gitter giver hvert billede en celle, der har samme størrelse som det største billede. Med automatiske kolonner er gitteret nogenlunde kvadratisk. Det er enkelt og forudsigeligt og ideelt, når alle sprites har samme størrelse, som et sæt fliser.
• Pakket (mindste ark) bruger hylde-pakning: billederne sorteres med de højeste først og placeres fra venstre mod højre i rækker. Værktøjet prøver mange arkbredder og beholder den med det mindste areal, med hensyn til afrunding til todelsstørrelse, når den indstilling er slået til. Bedst til ikoner i forskellige størrelser.
• Vandret strimmel og Lodret strimmel lægger billederne i én række eller kolonne i den rækkefølge, du tilføjede dem. Det er det, mange animationsafspillere forventer til billeder i en animation.

Arket kan ikke overstige 16.384 px pr. side eller ca. 16,7 megapixels, den grænse, browsere kan tegne.

Sådan bruger du CSS’en

CSS’en indeholder en basisklasse med arket som background-image og no-repeat og derefter én klasse pr. sprite opkaldt efter filen: home.png bliver til sprite-home. Navne skrives med små bogstaver, accenter fjernes, andre tegn bliver til bindestreger, og dubletter får -2, -3.

<link rel="stylesheet" href="sprite.css">
<span class="sprite sprite-home"></span>
<span class="sprite sprite-search"></span>

Hver sprite-klasse angiver width, height og en background-position med negative forskydninger. En sprite ved x = 40, y = 20 får background-position: -40px -20px: hele arket forskydes 40 px mod venstre og 20 px opad inde i elementet, så kun den sprite ses gennem elementets boks. Afstanden forhindrer, at nabosprites trænger ind, når siden zoomes, eller en tekstur filtreres.

Skærme med høj DPI: tegn dine billeder i dobbelt så stor størrelse som visningen, generér arket, tilføj derefter background-size sat til halvdelen af arkets størrelse i basisklassen, og halvér bredder, højder og forskydninger. Værktøjet genererer ikke dette; det er en manuel justering.

Er sprites stadig nyttige med HTTP/2?

Sprites blev opfundet for at spare HTTP-forespørgsler. Med multiplexing i HTTP/2 indlæses mange små filer næsten lige så hurtigt som én, så gevinsten for websites er meget mindre, og SVG-ikoner eller ikonskrifttyper er ofte bedre til skalerbare ikoner. Sprite sheets er stadig standarden til 2D-spil og billeder i animationer: én tekstur betyder færre teksturskift i GPU’et og én fil at indlæse.