Generador de sprite sheets CSS

Com fer un sprite sheet

1. Deixa anar les imatges a la zona de càrrega, o fes-hi clic per triar-les. S’accepten PNG, SVG, WebP, JPG i els altres formats que el navegador pugui llegir, fins a 500 imatges. Cada fitxer apareix a la llista Imatges amb la seva mida; el botó × elimina una imatge i Elimina totes les imatges buida la llista.
2. Tria una Disposició: Quadrícula, Empaquetada (full més petit), Tira horitzontal o Tira vertical. Amb Quadrícula, Columnes (0 = automàtic) defineix el nombre de columnes.
3. Defineix la Separació (px) entre sprites (2 per defecte) i marca Mida en potència de dos (256, 512, 1024…) si el teu motor o la teva GPU ho necessiten.
4. Tria el Fitxer de dades: CSS (classes de background-position), JSON (mapa de fotogrames) o CSS i JSON. Ajusta el Nom del fitxer i el Prefix de les classes CSS (tots dos «sprite» per defecte).
5. Revisa la vista prèvia, la Mida del full i l’Espai utilitzat, i fes clic a Baixa el ZIP (PNG + dades) o a Baixa només el PNG. El Codi generat també es pot copiar directament.

Les imatges es descodifiquen al navegador i no es puja res. Un SVG sense amplada i alçada pròpies es rasteritza amb el costat més llarg a 256 px.

Com triar una disposició

• Quadrícula dona a cada imatge una cel·la de la mida de la imatge més gran. Amb columnes automàtiques, la quadrícula és aproximadament quadrada. És senzilla i previsible, i ideal quan tots els sprites tenen la mateixa mida, com en un joc de tessel·les.
• Empaquetada (full més petit) fa servir l’empaquetament per prestatges: les imatges s’ordenen de la més alta a la més baixa i es col·loquen d’esquerra a dreta en files. L’eina prova moltes amplades de full i es queda amb la que té l’àrea més petita, tenint en compte l’arrodoniment a potència de dos quan aquesta opció és activada. Ideal per a icones de mides diferents.
• Tira horitzontal i Tira vertical posen les imatges en una sola fila o columna, en l’ordre en què les has afegit. És el que esperen molts reproductors d’animació per als fotogrames.

El full no pot superar els 16 384 px per costat ni uns 16,7 megapíxels, el límit que els navegadors poden dibuixar.

Com fer servir el CSS

El CSS conté una classe base amb el full com a background-image i no-repeat, i després una classe per sprite amb el nom derivat del seu fitxer: home.png esdevé sprite-home. Els noms es passen a minúscules, se’n treuen els accents, la resta de caràcters esdevenen guionets, i els duplicats reben -2, -3.

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

Cada classe de sprite defineix width, height i una background-position amb desplaçaments negatius. Un sprite a x = 40, y = 20 rep background-position: -40px -20px: tot el full es desplaça 40 px cap a l’esquerra i 20 px cap amunt dins de l’element, de manera que només aquell sprite es veu a través del requadre de l’element. La separació evita que els sprites veïns es colin quan es fa zoom a la pàgina o es filtra una textura.

Pantalles d’alta densitat: dibuixa les imatges al doble de la mida de visualització, genera el full, afegeix background-size amb la meitat de la mida del full a la classe base, i divideix per dos les amplades, les alçades i els desplaçaments. L’eina no ho genera; és un retoc manual.

Els sprites encara serveixen amb HTTP/2?

Els sprites es van inventar per estalviar peticions HTTP. Amb la multiplexació d’HTTP/2, molts fitxers petits es carreguen gairebé tan de pressa com un de sol, de manera que el guany per als llocs web és molt menor, i les icones SVG o les fonts d’icones sovint són millors per a icones escalables. Els sprite sheets continuen sent l’estàndard en jocs 2D i fotogrames d’animació: una sola textura vol dir menys canvis de textura a la GPU i un sol fitxer per carregar.