CSS-sprite-generator
Gratis online CSS-sprite-generator
Wat is een CSS-sprite?
Een CSS-sprite combineert meerdere kleine afbeeldingen in één afbeeldingsbestand (sprite sheet). CSS background-position wordt vervolgens gebruikt om individuele afbeeldingen uit het gecombineerde bestand weer te geven. Dit vermindert het aantal HTTP-verzoeken en verbetert de laadprestaties van pagina's.
Een CSS-sprite maken
Upload meerdere afbeeldingen. Kies een lay-out (horizontaal, verticaal of raster). De tool combineert ze in één sprite sheet en genereert de CSS met background-position-waarden voor elke afbeelding.
▶Zijn CSS-sprites nog steeds nuttig?
Met HTTP/2-multiplexing is het prestatievoordeel van sprites afgenomen. Maar sprites helpen nog steeds bij het serveren van veel kleine pictogrammen of bij het gebruik van pictogramsystemen die single-file-caching nodig hebben.
▶Wat is de beste lay-out voor sprites?
Horizontale lay-out is compact voor weinig afbeeldingen. Rasterlay-out werkt goed voor veel pictogrammen van vergelijkbare grootte. Verticale lay-out is nuttig wanneer alle afbeeldingen dezelfde breedte hebben.
▶Hoe gebruik ik de gegenereerde CSS?
De CSS gebruikt background-image op de sprite sheet en background-position voor elk pictogram. Pas de gegenereerde klassen toe op uw HTML-elementen.