Bundel je pictogrammen in een enkel blad

Met Sprite-sheet kunnen fotografen en visuele makers pictogrammen en hun CSS vóór integratie bundelen. Bundel je pictogrammen in een enkel blad, met bijbehorende CSS.

Bundel je pictogrammen in een enkel blad, met bijbehorende CSS. Gebruik het gratis in je browser zonder een account te maken.

Hoe te gebruiken

Kies meerdere PNG-, JPEG- of WebP-afbeeldingen; elke afbeelding moet 20 MB of kleiner zijn, en je hebt tussen 2 en 100 bestanden nodig.
Stel de maximale breedte in die het uiteindelijke sheet in pixels moet hebben.
Voeg een marge rond elke sprite toe zodat de pictogrammen elkaar niet raken.
Bouw het sheet en download zowel de afbeelding als het bijbehorende CSS-bestand.

Voorbeeld

Een front-endontwikkelaar stelt een set kleine pictogrammen voor een navigatiebalk samen. Diegene laadt de bestanden, kiest een verstandige sheetbreedte en een kleine marge, en voegt vervolgens het gegenereerde sheet en de CSS toe aan het project. De pagina kan één afbeelding opvragen in plaats van veel afzonderlijke bestanden.

Limieten en formaten

De uitvoer is een bitmap-sheet, geen vectorpictogrammensysteem, dus zware vergroting kan de pictogrammen zachter maken.
Invoerbestanden moeten PNG, JPEG of WebP zijn, met een maximum van 20 MB per afbeelding en in totaal tussen 2 en 100 bestanden.
Controleer de gegenereerde CSS tegen je projectstructuur, omdat klassennamen of bestandspaden aangepast moeten worden.
Een slecht gekozen breedte of te veel afbeeldingen kan een sheet opleveren die later lastig te onderhouden is.

Waar de verwerking gebeurt

Het bouwen van het sheet en het genereren van de CSS gebeuren in je browser. Je afbeeldingsbestanden worden niet geüpload, er is geen account nodig, en de voltooide bestanden komen op je apparaat beschikbaar om te downloaden.

Veelgestelde vragen

Hoe kies ik de maximale breedte van het sheet?

Denk na over hoeveel pictogrammen je hebt en waar het sheet wordt gebruikt. Een gematigde breedte voorkomt dat het sheet extreem hoog wordt, terwijl een breder sheet de hoogte kan verminderen. Probeer één waarde, bekijk het resultaat en pas aan als de lay-out uit balans aanvoelt.

Moet ik het gegenereerde CSS-bestand gebruiken?

Je kunt het gebruiken zoals het is, aanpassen aan je naamgevingsconventies, of het eenvoudig lezen als positiegids. De CSS beschrijft waar elke sprite in het sheet staat. De sheetafbeelding zelf blijft hetzelfde, of je het CSS-bestand nu bewaart of niet.

Kan ik verschillende afbeeldingsformaten in één sheet mengen?

Ja, PNG-, JPEG- en WebP-bestanden kunnen samen worden geselecteerd. Voor pictogrammen werken PNG-bestanden met transparantie vaak het beste, omdat ze zich netjes met verschillende pagina-achtergronden vermengen. Controleer altijd het uiteindelijke sheet, omdat randen en achtergrondgebieden per bronformaat kunnen verschillen.