CSS-spritesheet generator

Zo maak je een spritesheet

1. Sleep je afbeeldingen naar het uploadvlak, of klik erop om ze te kiezen. PNG, SVG, WebP, JPG en de andere formaten die je browser kan lezen worden geaccepteerd, tot 500 afbeeldingen. Elk bestand verschijnt met zijn formaat in de lijst Afbeeldingen; de knop × verwijdert één afbeelding en Alle afbeeldingen verwijderen maakt de lijst leeg.
2. Kies een Indeling: Raster, Compact (kleinste sheet), Horizontale strook of Verticale strook. Bij Raster bepaalt Kolommen (0 = automatisch) het aantal kolommen.
3. Stel de Tussenruimte (px) tussen de sprites in (standaard 2) en vink Macht van twee (256, 512, 1024…) aan als je engine of GPU dat nodig heeft.
4. Kies het Gegevensbestand: CSS (klassen met background-position), JSON (framemap) of CSS en JSON. Pas de Bestandsnaam en het Voorvoegsel CSS-klasse aan (allebei standaard “sprite”).
5. Controleer het voorbeeld, het Formaat van de sheet en de Benutte ruimte, en klik op ZIP downloaden (PNG + gegevens) of Alleen PNG downloaden. De Gegenereerde code kun je ook direct kopiëren.

De afbeeldingen worden in je browser gedecodeerd en er wordt niets geüpload. Een SVG zonder eigen breedte en hoogte wordt gerasterd met de langste zijde op 256 px.

Een indeling kiezen

• Raster geeft elke afbeelding een vak ter grootte van de grootste afbeelding. Met automatische kolommen is het raster ongeveer vierkant. Eenvoudig en voorspelbaar, en ideaal als alle sprites even groot zijn, zoals bij een tileset.
• Compact (kleinste sheet) gebruikt shelf packing: de afbeeldingen worden gesorteerd van hoog naar laag en van links naar rechts in rijen geplaatst. De tool probeert veel sheetbreedtes en houdt de breedte met de kleinste oppervlakte, rekening houdend met afronding op een macht van twee als die optie aan staat. Het best voor pictogrammen van verschillende formaten.
• Horizontale strook en Verticale strook zetten de afbeeldingen in één rij of kolom, in de volgorde waarin je ze hebt toegevoegd. Dat verwachten veel animatiespelers voor frames.

De sheet mag niet groter zijn dan 16.384 px per zijde of ongeveer 16,7 megapixel, de grens van wat browsers kunnen tekenen.

De CSS gebruiken

De CSS bevat een basisklasse met de sheet als background-image en no-repeat, en daarna één klasse per sprite, genoemd naar het bestand: home.png wordt sprite-home. Namen worden in kleine letters gezet, accenten worden verwijderd, andere tekens worden koppeltekens, en dubbele namen krijgen -2, -3.

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

Elke spriteklasse stelt width, height en een background-position met negatieve verschuivingen in. Een sprite op x = 40, y = 20 krijgt background-position: -40px -20px: de hele sheet schuift binnen het element 40 px naar links en 20 px omhoog, zodat alleen die sprite door het kader van het element zichtbaar is. De tussenruimte voorkomt dat naburige sprites erdoorheen lekken als de pagina wordt ingezoomd of een texture wordt gefilterd.

Schermen met hoge resolutie: teken je afbeeldingen op twee keer hun weergaveformaat, genereer de sheet, voeg dan aan de basisklasse een background-size toe van de helft van het sheetformaat, en halveer de breedtes, hoogtes en verschuivingen. De tool genereert dit niet; het is een handmatige aanpassing.

Zijn sprites nog nuttig met HTTP/2?

Sprites zijn uitgevonden om HTTP-verzoeken te besparen. Met multiplexing in HTTP/2 laden veel kleine bestanden bijna even snel als één, dus de winst voor websites is veel kleiner, en SVG-pictogrammen of icoonlettertypen zijn vaak beter voor schaalbare pictogrammen. Voor 2D-games en animatieframes blijven spritesheets de standaard: één texture betekent minder texturewissels op de GPU en één bestand om te laden.