CSS Sprite Generator

Klik om een afbeelding te uploaden

Ondersteunde formaten: PNG, JPG, WebP

Indeling

Afbeeldingsspatiëring: 10px

050

Upload afbeelding om sprite voorbeeld te bekijken

Voeg meerdere kleine iconen online samen tot een CSS sprite-blad. De verwerking gebeurt volledig in de lokale browser zonder upload, en de CSS background-position code wordt automatisch gegenereerd voor horizontale, verticale en raster-indelingen.

Gerelateerde aanbevelingen

ICO generator

Afbeeldingen comprimeren

Afbeeldingen converteren

Afbeelding formaat wijzigen

Afbeeldingen bijsnijden

Afbeelding Roteren en Spiegelen

Wat is een CSS sprite?

Een CSS sprite voegt meerdere kleine afbeeldingen samen tot één grotere afbeelding en gebruikt background-position om elk icoon afzonderlijk te tonen. De term sprite komt van vroege spelcomputers, die meerdere animatieframes in één afbeelding bundelden en ze na elkaar toonden. Het web heeft dat idee overgenomen om veel kleine iconen in één verzoek te laden.

**Waarom hebben we sprites nodig?** In het HTTP/1.1-tijdperk zorgde elk afbeeldingsbestand voor een apart verzoek, met TCP-handshake, TLS-handshake en header-overhead. Honderd iconen betekende honderd verzoeken. Een sprite plaatst alle iconen in één afbeelding, rondt het laden af in één verzoek en versnelt de first paint. HTTP/2-multiplexing haalt een deel van die voorsprong weg, maar sprites blijven nuttig voor CDN-cache, gzip-compressie en HTTP/1.1-fallback.

**Hoe het werkt:** stel je een 200x60 sprite voor met drie 60x60 iconen op een rij. Om de eerste te tonen, zet je op een 60x60-element `background: url(sprite.png); background-position: 0 0;`. Verander naar -60px 0 voor de tweede en -120px 0 voor de derde. Deze tool genereert al die coördinaten automatisch voor je.

**Moderne alternatieven:** SVG + use of symbol (aanbevolen, vectorieel, inkleurbaar, animeerbaar), Icon Font (brede compatibiliteit, cross-platform), HTTP/2 server push en webfont-iconen. Elke optie heeft sterke punten: kies op basis van de behoeften van je project.

Toepassingsgevallen

Webprojecten met veel kleine iconen die in een sprite moeten worden samengevoegd om HTTP-verzoeken te beperken en de first paint te versnellen
Frontend-ontwikkelaars die de iconen van een project willen centraliseren en automatisch de CSS background-position-code willen genereren
Teams die sprite en CSS in batch willen genereren en direct integreerbaar willen opleveren
Voer de gecombineerde afbeelding na het samenvoegen door de [afbeelding-compressietool](/image/compress/) om de totale omvang te verkleinen en de LCP te verbeteren
Apps, Electron- of desktop-clients die statische icoonbestanden in één afbeelding moeten bundelen
E-mail-HTML-templates of statische blogs die meerdere iconen nodig hebben en compatibel moeten blijven met mailclients
Ontwerpers die iconen als sprite opleveren zodat frontend-ontwikkelaars ze snel kunnen integreren
Speciale 2x-sprites voor Retina-schermen, aangepast aan 1x- en 2x-schermen via background-size

Hoe te gebruiken

Klik op het uploadgebied of sleep meerdere afbeeldingen erin (JPG, PNG, WebP en GIF worden ondersteund)
Herschik de iconen in de linkerlijst met het sleephandvat of de knoppen omhoog/omlaag
Kies Horizontaal, Verticaal of Raster in het indelingsdeel van het linkerpaneel
Stel met de padding-schuif de pixelafstand tussen de iconen in (1-5 px aanbevolen)
Bekijk de sprite in realtime aan de rechterkant en klik op Downloaden om de PNG op te slaan en Kopiëren om de CSS mee te nemen

Functies

Afbeeldingen in één klik samenvoegen: upload meerdere kleine iconen en combineer ze tot één sprite
Drie indelingsmodi: horizontaal, verticaal en raster, vrij wisselbaar per gebruiksdoel
Verstelbare padding: een schuif van 0 tot 50 px regelt de afstand tussen de iconen
Volgorde verslepen: sleep iconen in de lijst om de samenvoegvolgorde te wijzigen, CSS-coördinaten werken automatisch bij
Volgorde op mobiel: knoppen omhoog en omlaag herschikken iconen op telefoon en tablet
Automatisch gegenereerde CSS: background-position, breedte en hoogte van elk icoon worden voor je klaargezet
Live voorvertoning: de sprite wordt bij elke wijziging direct opnieuw gegenereerd voor een echte WYSIWYG-ervaring
CSS in één klik kopiëren: een ingebouwde knop zet de hele stylesheet in het klembord
PNG in één klik downloaden: de gecombineerde afbeelding wordt lokaal opgeslagen als sprite.png
Lokale browserverwerking: de Canvas-API voegt bestanden lokaal samen, niets wordt geüpload
Meerdere invoerformaten: JPG, PNG, WebP en GIF worden ondersteund
Transparantie behouden: de PNG-uitvoer behoudt de oorspronkelijke transparante achtergrond voor strakke composities

Best Practices

Retina 2x-aanpassing: gebruik 2x-bronbestanden

Als je gebruikers op Retina-schermen werken (Mac, iPhone, Windows HiDPI), upload dan bronnen met 2x-resolutie (bijvoorbeeld 32x32-iconen) en genereer de sprite daaruit. Schaal daarna in CSS terug met background-size: 32px auto naar 16x16. Zo blijven 1x- en 2x-schermen scherp met één sprite.

Sprites blijven waardevol in HTTP/2-projecten

HTTP/2-multiplexing haalt een groot deel van de request-bottleneck weg, maar sprites winnen nog in vier scenario's: CDN-cache-hergebruik, gzip- of Brotli-compressie, doorgifte via interne proxies en HTTP/1.1-fallback. Bedrijfsintranetten, overheid- en banksystemen en e-mailtemplates draaien nog grotendeels op HTTP/1.1, waar sprites onmisbaar zijn.

PNG-8 of PNG-24: kies de juiste kleurdiepte

De tool levert een vaste PNG, maar de kleurdiepte van de bron kies je zelf. Vlakke of monochrome iconen horen PNG-8 te zijn (lossless transparantie, 60-80% kleiner dan PNG-24). Iconen met verlopen, schaduwen of highlights vereisen PNG-24. De tool accepteert elk formaat, dus optimaliseer je bronnen eerst met een PNG-compressor.

CDN-cache-strategie: hash in bestandsnaam voor permanente cache

Vermijd een vaste naam als sprite.png. Hernoem met een inhouds-hash (bijvoorbeeld sprite.a3f2b1.png) en stel Cache-Control: max-age=31536000 in voor permanente cache. De browser downloadt slechts één keer en levert daarna uit de lokale cache, wat meer bandbreedte bespaart dan HTTP/2 alleen. De tool levert sprite.png standaard; je kunt het bestand na download hernoemen.

gzip of Brotli maken sprites nog kleiner

Een gecombineerde sprite heeft meer pixelcontinuïteit dan verspreide kleine afbeeldingen, waardoor gzip of Brotli veel efficiënter comprimeren. Nginx met gzip-niveau 1 verkleint sprites doorgaans met 60-80%, en Brotli haalt 85%+ . Met actieve Content-Encoding kan een sprite van 1 MB worden verzonden als 200-300 KB. Dit is het meest onderschatte sprite-voordeel.

CSS Modules of Vue scoped CSS: wikkel in met :global()

Als je project CSS Modules of Vue scoped CSS gebruikt, worden de door deze tool gegenereerde klassen .icon-home en .sprite lokaal gehasht en werken ze niet meer. Wikkel gedeelde klassen in met :global(.sprite) { ... } in je .module.css, of laat CSS Modules varen en gebruik een BEM-naamgeving.

Combineer met Icon Font: kern-UI in font, complexe iconen in sprite

Het stabielste productiepatroon is een mix. Gebruik Icon Font voor universele UI-iconen (instellingen, sluiten, zoeken, gebruiker) omdat ze inkleurbaar, vectorieel en cross-platform zijn. Gebruik sprites voor complexe gekleurde iconen (productlogo's, bannericonen). De twee aanpakken vullen elkaar aan en vermijden de onderhoudskosten van één keuze.

spritesmith voor engineering-projecten, deze tool voor prototypes

Voor langlopende projecten integreer je spritesmith (Webpack) of gulp.spritesmith in de build-pipeline: bronwijzigingen regenereren de sprite, gehashte bestandsnamen worden uitgegeven en SCSS- of LESS-variabelen worden automatisch aangemaakt. Deze tool is bedoeld voor afhankelijkheidsvrije prototypes en kleine opleveringen; build-plugins passen beter bij CI/CD-pipelines.

Moderne projecten kunnen migreren van sprite naar SVG symbol

Ondersteunt je project moderne browsers (Chrome, Safari, Firefox, Edge, plus IE 11+), overweeg dan de migratie van sprite naar SVG symbol: één bestand beheert alle iconen, CSS regelt kleur en animatie, en je hoeft geen background-position-coördinaten meer bij te houden. De sprite die deze tool oplevert, is een bruikbaar overgangsasset tijdens de migratie.

Veelgestelde vragen

Wat is een CSS sprite en waarom afbeeldingen samenvoegen?

Een CSS sprite voegt meerdere kleine afbeeldingen samen tot één grotere afbeelding en gebruikt background-position om elk icoon afzonderlijk te tonen. Met sprites doet de browser één HTTP-verzoek om alle iconen te laden, wat het aantal verzoeken sterk vermindert en de first paint versnelt vergeleken met tientallen losse bestanden. Het is een klassieke frontend-optimalisatie.

Hoe voeg ik online meerdere iconen samen tot een sprite?

Upload je afbeeldingen en de tool voegt ze samen in de gekozen indeling met live voorvertoning. Rechts genereert de tool de CSS-code met background-position (inclusief breedte en hoogte) voor elk icoon, klaar om in je stylesheet te plakken. De gegenereerde sprite is een PNG en kan in één klik worden gedownload.

Hoe gebruik ik de gegenereerde CSS-code?

Plaats sprite.png in je project (bijvoorbeeld /img/sprite.png) en plak de CSS in je stylesheet. Voeg de klasse .sprite en de bijbehorende .icon-xxx-klasse toe aan elk element dat een icoon moet tonen, bijvoorbeeld <i class="sprite icon-home"></i>. Klassenamen worden automatisch gegenereerd op basis van de oorspronkelijke bestandsnaam.

Welke indelingsmodi worden ondersteund?

Drie modi: horizontaal (iconen van links naar rechts in één rij), verticaal (iconen van boven naar onder gestapeld in één kolom) en raster (iconen automatisch in een vierkante matrix; het aantal kolommen is de afgeronde vierkantswortel). Wissel van modus in het linkerpaneel om het resultaat te bekijken.

Kan ik de afstand tussen de iconen aanpassen?

Ja. In het linkerpaneel zit een padding-schuif van 0 tot 50 px; 1 tot 5 px wordt aanbevolen. Een redelijke padding voorkomt het doorlopen van randpixels bij het CSS-positioneren, maar heeft geen invloed op het uiteindelijke gebruik. De padding zit binnen de sprite, terwijl de CSS alleen de precieze background-position-coördinaten gebruikt.

Kan ik de volgorde van de iconen wijzigen?

Ja. Elk item in de linkerlijst is versleepbaar via het handvat, en de knoppen omhoog/omlaag werken op mobiel. De sprite en de CSS-coördinaten regenereren automatisch zodra de volgorde verandert.

Welke afbeeldingsformaten worden ondersteund?

Alle gangbare formaten: JPG, PNG, WebP, GIF en meer. De uitvoer is altijd PNG (transparantie blijft behouden). PNG als invoer wordt aanbevolen, omdat transparante achtergronden de samenvoeging in de sprite overleven.

Zijn CSS sprites in moderne projecten nog nuttig?

HTTP/2-multiplexing vermindert een deel van het sprite-voordeel, maar sprites blijven waarde toevoegen via CDN-cache, gzip-compressie en een snellere first paint van kerniconen. Heb je minder dan 10 iconen of heb je kleur en animatie nodig, kies dan voor SVG symbol of Icon Font. Voor veel statische PNG-iconen blijft de sprite een stabiele en betrouwbare keuze.

Worden sprites wazig op Retina-schermen? Hoe los je dat op?

Ja, dat kan. Retina-schermen (Mac, iPhone, Windows HiDPI) hebben 2x of 3x fysieke pixels, waardoor een 1x-sprite wordt uitgerekt en wazig oogt. De oplossing is 2x-bronbestanden te uploaden (32x32 in plaats van 16x16) en de sprite in CSS terug te schalen naar 16x16 met background-size: 32px auto.

Verliest het samenvoegen van iconen beeldkwaliteit?

Nee. Bij het samenvoegen wordt elke afbeelding eenvoudigweg op de juiste positie op een groot canvas geplaatst. Er vindt geen resampling, compressie of kleuraanpassing plaats. De PNG-uitvoer behoudt de oorspronkelijke kwaliteit. Wil je het samengevoegde bestand nog verder verkleinen, haal het dan door de [afbeelding-compressietool](/image/compress/).

Worden mijn sprite-afbeeldingen naar een server geüpload?

Nee. Het samenvoegen gebeurt volledig in je lokale browser via de Canvas-API. Bestanden verlaten je apparaat nooit en worden bij het sluiten van de pagina weggegooid. Interne iconen, niet-gepubliceerde logo's en andere gevoelige assets kun je dus met een gerust hart verwerken.

Hoe download ik de gegenereerde sprite?

Zodra de afbeeldingen zijn geüpload, verschijnt er een voorvertoning. Klik op de knop Downloaden in het linkerpaneel om sprite.png lokaal op te slaan. De CSS wordt automatisch gegenereerd, en met één klik op Kopiëren zet je die in het klembord.

Kan ik de klassenamen aanpassen?

Klassenamen worden automatisch gegenereerd op basis van de oorspronkelijke bestandsnaam met het voorvoegsel .icon-. home.png wordt bijvoorbeeld .icon-home. Gebruik Engelse namen, cijfers en koppeltekens voor schone, leesbare klassenamen.

Hoe kies ik tussen sprite, Icon Font en SVG symbol?

Het hangt af van het gebruiksdoel. Veel statische PNG-iconen of de noodzaak om oude IE-versies te ondersteunen: sprite. Universele UI-iconen die van kleur moeten veranderen en cross-platform moeten zijn: Icon Font. Moderne projecten die kleur, animatie en één centraal bestand willen: SVG symbol is de eerste keuze. In de praktijk is mixen gebruikelijk: Icon Font voor de kern-UI-iconen, sprite voor complexe gekleurde iconen.

Kan ik de samengevoegde sprite verkleinen met de compressietool?

Ja. Deze tool levert een lossless PNG op, die behoorlijk groot kan zijn. Een goede workflow: genereer de sprite hier, gebruik daarna de [afbeelding-compressietool](/image/compress/) om de PNG te verkleinen of naar JPG te converteren (als je geen transparantie nodig hebt) en zet het tenslotte met de [afbeelding-converter](/image/convert/) om naar WebP als je dat wilt. De tools combineren maximaliseert de laadprestaties.

Woordenlijst

CSS sprite: Techniek die meerdere kleine afbeeldingen samenvoegt tot één grotere afbeelding en met background-position elk icoon afzonderlijk toont. Een klassieke frontend-optimalisatie.
background-position: CSS-eigenschap die de startcoördinaten van de achtergrondafbeelding instelt. Sprites gebruiken negatieve waarden om de achtergrond naar links of boven te verschuiven tot het gewenste icoon. Voorbeeld: background-position: -60px 0 toont het icoon met 60 px verschuiving.
background-size: CSS-eigenschap die de weergavegrootte van de achtergrondafbeelding regelt. De sleutel voor Retina-aanpassing: na het genereren van een sprite uit 2x-bronnen gebruik je background-size: 32px auto in CSS om terug te schalen naar 1x en 1x- en 2x-schermen scherp te houden.
Rasterindeling: De rastermodus van deze tool berekent het aantal kolommen automatisch als de afgeronde vierkantswortel van het aantal iconen en rangschikt de iconen rij voor rij in een vierkant. Negen iconen worden een 3x3-raster.
Padding (icoonafstand): De pixelafstand tussen aangrenzende deelafbeeldingen binnen een sprite. 1 tot 5 px wordt aanbevolen om het doorlopen van randpixels te voorkomen. De padding zit binnen de sprite, terwijl de CSS alleen de precieze coördinaten gebruikt.
PNG-transparantie: PNG ondersteunt een alfakanaal, waardoor iconen transparante achtergronden kunnen hebben. De sprite-uitvoer behoudt het PNG-formaat, zodat transparante iconen na het samenvoegen transparant blijven.
HTTP/2-multiplexing: HTTP/2 verwerkt meerdere verzoeken parallel over één verbinding, waardoor een deel van het sprite-voordeel verdwijnt. Toch blijft HTTP/2 achter bij een gecombineerde sprite op het gebied van CDN-configuratie, compatibiliteit met oudere browsers en gzip-compressie.
SVG symbol: Het <symbol>-element van SVG met <use>-verwijzingen. Alle iconen leven in één SVG-bestand en CSS regelt fill, stroke en animatie. De eerste vervanger van de sprite in moderne projecten.
DPR (Device Pixel Ratio): De verhouding tussen fysieke pixels en CSS-pixels. Retina-schermen hebben DPR = 2, dus een CSS-icoon van 16x16 vereist 32x32 fysieke pixels. DPR is de kernparameter voor het aanpassen van sprites aan Retina-schermen.

Vergelijking van sprite-indelingen

Indeling	Plaatsingsregel	Typisch gebruik
Horizontaal	Iconen van links naar rechts naast elkaar in één rij	Navigatiebalken, tabbladen, horizontale werkbalken
Verticaal	Iconen van boven naar onder gestapeld in één kolom	Verticale menu's, lijstvoorvoegsels, top-down structuren
Raster	Iconen automatisch in een vierkante matrix gerangschikt op aantal	Algemeen gebruik, beste standaardkeuze bij onbekende aantallen

Aanbevolen padding-waarden voor sprites

Padding (px)	Ideaal voor	Opmerkingen
`0px`	Schone randen, iconen met eigen transparante padding	Maximale compactheid; randpixels kunnen doorlopen
`1-2px`	Hoogwaardige iconen met minimale veiligheidsmarge	Aanbevolen: goed evenwicht tussen compactheid en stabiliteit
`3-5px`	Standaard iconen met schaduwen of contouren	Veilige afstand, gangbare standaard in de branche
`6-10px`	Iconen met sterk uiteenlopende maten of contouren	Voorkomt dat grote iconen kleine overlappen
`10-50px`	Debuggen of visuele groepering	Niet aanbevolen voor productie

Referentie voor Retina 2x sprite-aanpassing

Scherm-DPR	CSS-grootte	Bestandsgrootte bron	background-size
`1x`	`16x16`	`16x16`	`auto`
`2x`	`16x16`	`32x32`	`32px auto`
`3x`	`16x16`	`48x48`	`48px auto`
`2x`	`24x24`	`48x48`	`48px auto`

Authoritative References

ReferenceMDN - CSS background-position
ReferenceMDN - Afbeeldingssprites in CSS implementeren
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> en <use>
ReferenceWeb.dev - Vervang afbeeldingen door CSS sprites
ReferenceWikipedia - Sprite (computergraphics)