Batch CSS Sprites Generator
Combineer meerdere pictogrammen of afbeeldingen in één bestand om HTTP-verzoeken te verminderen en je websitesnelheid te verhogen. Genereer automatisch perfecte CSS-code.
Sleep iconen hierheen om sprites te genereren
Ondersteunt PNG, JPG, WebP, AVIF. Combineer meerdere afbeeldingen tot één CSS Sprite Sheet.
Probeer met voorbeelden
Geladen galerij
Sprite Studio
Sprite Sheet Voorbeeldweergave
Individuele Pictogrammen
| Pictogram | Klasnaam | Positie | Grootte | Actie |
|---|
Sprite-opties
Batch Toepassen
Automatisch opnieuw genereren bij wijziging
Professionele CSS Sprites Generatie
Optimaliseer je webassets door meerdere kleine afbeeldingen te combineren tot een enkele sprite sheet. Verminder latentie, bespaar bandbreedte en vereenvoudig je CSS-workflow.
Site Snelheid Verhogen
Minder HTTP-verzoeken betekenen snellere paginalading. Door 50 pictogrammen samen te voegen tot 1 sprite-afbeelding, elimineer je 49 heen-en-weer-verzoeken naar de server.
Automatisch gegenereerde CSS
Geen handmatig pixel tellen meer. Onze tool berekent automatisch achtergrondposities en afmetingen voor elk pictogram in uw blad.
Slimme Lay-outs
Kies tussen verticale, horizontale of geoptimaliseerde rasterlay-outs. Pas opvulling aan om "uitlopen" tussen pictogrammen tijdens schalen te voorkomen.
Hoe je een CSS sprite sheet maakt
Upload uw pictogrammen
Sleep en zet alle kleine afbeeldingen of pictogrammen die je wilt samenvoegen neer. We ondersteunen PNG, JPG, WebP en AVIF.
Sprite-instellingen configureren
Kies de lay-outstijl, pas de opvulling aan en stel je CSS-klassevoorvoegsel in. Het voorbeeld wordt direct bijgewerkt.
Sprite & CSS exporteren
Download de uiteindelijke sprite sheet en de bijbehorende CSS-code als een ZIP-bestand. Gewoon kopiëren en plakken in je project.
Veelgestelde Vragen
Waarom zou ik CSS-sprites moeten gebruiken?
CSS-sprites zijn een klassieke prestatietechniek. Ze verminderen het aantal HTTP-verzoeken, wat vooral gunstig is bij tragere verbindingen of sites met veel kleine assets zoals pictogrammen of UI-elementen.
Welke lay-out moet ik kiezen?
Verticale en horizontale lay-outs zijn het gemakkelijkst om te debuggen. Rasterlay-out is het meest efficiënt voor het minimaliseren van het uiteindelijke beeldgebied en bestandsgrootte.
Hoe zit het met high-DPI (Retina) schermen?
Je kunt een sprite sheet genereren met dubbelgrote iconen en "background-size" in je CSS gebruiken om het te verkleinen voor scherpe weergave op high-DPI schermen.