Generador de CSS Sprite

Feu clic per pujar una imatge

Formats compatibles: PNG, JPG, WebP

Disseny

Espaiat de la imatge: 10px

050

Puja una imatge per prévisualitzar l'sprite

Fusiona múltiples icones petites en un full de CSS sprite en línia. El processament local al navegador significa zero pujades, i el codi CSS amb background-position es genera automàticament per a les disposicions horitzontal, vertical i en graella.

Relacionats

Generador ICO

Comprimir imatges

Convertir imatges

Redimensionar imatges

Retallar imatges

Girar i Voltejar Imatges

Què és un CSS sprite?

Un CSS sprite combina múltiples imatges petites en una de més gran i utilitza background-position per mostrar icones individuals. El terme sprite prové de les primeres consoles de jocs, que agrupaven múltiples fotogrames d'animació en una sola imatge gran i canviaven de fotograma en seqüència. La web va manllevar la idea i l'utilitza per carregar moltes icones petites en una sola sol·licitud.

**Per què necessitem sprites?** A l'era HTTP/1.1, cada fitxer d'imatge activa una sol·licitud independent, amb sobrecàrrega d'establiment de connexió TCP, TLS i capçaleres. Cent icones signifiquen cent sol·licituds. Un sprite col·loca cada icona en una sola imatge, completant totes les càrregues d'icones en una sola sol·licitud i accelerant el primer pintat. La multiplexació HTTP/2 redueix part d'aquest avantatge, però els sprites encara ajuden amb la caché CDN, la compressió gzip i la caiguda HTTP/1.1.

**Com funciona:** Imagina un sprite de 200x60 amb tres icones de 60x60 en fila. Per mostrar la primera, estableix un element de 60x60 amb `background: url(sprite.png); background-position: 0 0;`. Canvia a -60px 0 per a la segona i -120px 0 per a la tercera. Aquesta eina genera totes aquestes coordenades automàticament.

**Alternatives modernes:** SVG + use o symbol (recomanat, vectorial, amb color, animable), Icon Font (compatibilitat àmplia, multiplataforma), HTTP/2 server push, i icones de font web. Cadascun té els seus punts forts, de manera que escull segons les necessitats del teu projecte.

Casos d'ús

Projectes web amb moltes icones petites que necessiten combinar-se en un sprite per reduir sol·licituds HTTP i accelerar el primer pintat
Desenvolupadors frontend que necessiten centralitzar actius d'icones i generar codi CSS de background-position automàticament
Equips que volen generar per lots sprite més codi CSS i lliurar-lo llest per integrar
Després de fusionar, passa la imatge combinada per l'[eina de compressió d'imatges](/image/compress/) per reduir la mida total i millorar LCP
Clients d'apps, Electron o escriptori que necessiten agrupar actius d'icones estàtiques en una sola imatge
Plantilles HTML de correu o blogs estàtics que necessiten múltiples icones mantenint la compatibilitat amb clients de correu
Dissenyadors que lliuren actius d'icones en forma de sprite perquè els enginyers frontend integrin ràpidament
Sprites dedicats 2x per a pantalles Retina, adaptats a pantalles 1x i 2x mitjançant background-size

Com usar-ho

Fes clic a l'àrea de pujada o arrossega múltiples imatges (JPG, PNG, WebP i GIF són compatibles)
Reordena les icones a la llista esquerra amb la nansa d'arrossegament o els botons amunt i avall
Tria Horitzontal, Vertical o Graella a la secció de disposició a l'esquerra
Ajusta el control lliscant de padding per establir l'espai en píxels entre icones (es recomana d'1 a 5px)
Previsualitza el sprite en temps real a la dreta, després fes clic a Descarregar per desar el PNG i Copiar per obtenir el CSS

Característiques

Fusió d'imatges amb un clic: puja múltiples icones petites i combina-les en un sol sprite
Tres modes de disposició: horitzontal, vertical i en graella, canvien lliurement per a diferents usos
Padding ajustable: un control lliscant de 0 a 50px controla l'espai entre icones
Arrossega per reordenar: arrossega icones a la llista per canviar l'ordre de fusió, les coordenades CSS s'actualitzen automàticament
Reordenació en mòbil: botons amunt i avall reordenen icones en telèfons i tauletes
Sortida CSS automàtica: el background-position, l'amplada i l'alçada de cada icona es generen per a tu
Previsualització en directe: el sprite es regenera a l'instant en qualsevol canvi per a una experiència WYSIWYG
Copiar CSS amb un clic: un botó integrat copia el full d'estils complet al porta-retalls
Descàrrega PNG amb un clic: la imatge combinada es desa localment com a sprite.png
Processament local al navegador: l'API Canvas fusiona fitxers localment, de manera que no es puja res
Múltiples formats d'entrada: JPG, PNG, WebP i GIF són tots compatibles
Transparència preservada: la sortida PNG manté el fons transparent original per a una composició neta d'icones

Best Practices

Adaptació Retina 2x: utilitza fitxers origen 2x

Si els teus usuaris fan servir pantalles Retina (Mac, iPhone, Windows HiDPI), puja fitxers origen en resolució 2x (com icones de 32x32) i genera el sprite a partir d'aquests, després fes servir background-size: 32px auto al CSS per escalar de tornada a 16x16. D'aquesta manera, tant les pantalles 1x com 2x es renderitzen amb nitidesa amb un sol sprite.

Els sprites continuen sent valuosos en projectes HTTP/2

La multiplexació d'HTTP/2 elimina gran part del coll d'ampolla de recompte de sol·licituds, però els sprites continuen guanyant en quatre escenaris: reutilització de caché CDN, compressió gzip o Brotli, travessa de proxy intranet i caiguda HTTP/1.1. Les intranets d'empresa, els sistemes governamentals i bancaris, i les plantilles HTML de correu continuen sent majoritàriament HTTP/1.1, on els sprites són insubstituïbles.

PNG-8 vs PNG-24: tria la profunditat de bits correcta

L'eina genera PNG fix, però tu tries la profunditat de bits origen. Icones planes o d'un sol color haurien de ser PNG-8 (transparència sense pèrdues, un 60-80% més petit que PNG-24). Icones amb degradats, ombres o reflexos necessiten PNG-24. L'eina accepta qualsevol format, de manera que optimitza els origens amb una eina de compressió PNG primer.

Estratègia de caché CDN: aplica hash al nom del fitxer per a caché permanent

Evita un nom de fitxer sprite.png fix. Canvia'l amb un hash de contingut (com sprite.a3f2b1.png) i configura Cache-Control: max-age=31536000 per a caché permanent. El navegador descarrega una vegada i després serveix des de la caché local, estalviant més ample de banda que només HTTP/2. L'eina genera sprite.png per defecte; pots canviar el nom després de descarregar.

La compressió gzip / Brotli fa els sprites encara més petits

Un sprite combinat té més continuïtat de píxels que imatges petites disperses, de manera que gzip o Brotli el comprimeixen molt més eficaçment. Nginx amb gzip nivell 1 típicament redueix els sprites un 60-80%, i Brotli arriba al 85%+. Amb Content-Encoding activat, un sprite d'1MB pot transmetre's com a 200-300KB. Aquest és l'avantatge del sprite més infravalorat.

CSS Modules / Vue scoped CSS: embolica amb :global()

Si el teu projecte utilitza CSS Modules o Vue scoped CSS, els noms de classe .icon-home i .sprite d'aquesta eina seran codificats localment amb hash i deixaran de funcionar. Embolica les classes compartides amb :global(.sprite) { ... } al teu .module.css, o evita CSS Modules i confia en la nomenclatura BEM.

Combina amb Icon Font: icones UI bàsiques en Font, icones complexes en sprites

El patró de producció més estable és una barreja. Fes servir Icon Font per a icones UI universals (configuració, tancar, cerca, usuari) perquè admeten color, són vectorials i multiplataforma. Fes servir sprites per a icones complexes de colors (logotips de producte, icones de bàner). Els dos enfocaments es complementen i eviten el cost de manteniment d'anar amb un de sol.

Utilitza spritesmith per a projectes d'enginyeria, aquesta eina per a prototips

Per a projectes a llarg termini, integra spritesmith (Webpack) o gulp.spritesmith al pipeline de build: els canvis al codi font es regeneren automàticament, s'emeten noms de fitxer amb hash i es produeixen variables SCSS o LESS automàticament. Aquesta eina està dissenyada per a prototips sense dependències i entregues petites, mentre que els complements de build s'adapten a pipelines CI/CD.

Els projectes moderns poden migrar de sprites a SVG symbol

Si el teu projecte admet navegadors moderns (Chrome, Safari, Firefox, Edge, més IE 11+), considera migrar de sprites a SVG symbol: un sol fitxer gestiona totes les icones, el CSS controla el color i l'animació, i no hi ha cost de manteniment de coordenades de background-position. El sprite que genera aquesta eina és un actiu d'un sol ús que funciona com a transició durant la migració.

Preguntes freqients

Què és un CSS sprite i per què combinar imatges en una de sola?

Un CSS sprite combina múltiples imatges petites en una de més gran i fa servir background-position per mostrar icones individuals. Amb els sprites, el navegador fa una sola sol·licitud HTTP per carregar cada icona, cosa que redueix dràsticament el recompte de sol·licituds i accelera el primer pintat en comparació amb carregar desenes de fitxers separats. És una tècnica clàssica de rendiment frontend.

Com combino múltiples icones en un sprite en línia?

Puja les teves imatges i l'eina les fusiona en la disposició escollida amb una previsualització en directe. A la dreta genera codi CSS de background-position (amb amplada i alçada) per a cada icona, llest per enganxar al teu full d'estils. El sprite generat és PNG i es pot descarregar amb un sol clic.

Com faig servir el codi CSS generat?

Col·loca sprite.png al teu projecte (per exemple /img/sprite.png) i enganxa el CSS al teu full d'estils. Afegeix la classe .sprite més la classe .icon-xxx corresponent a qualsevol element que hagi de mostrar una icona, com ara <i class="sprite icon-home"></i>. Els noms de classe es generen automàticament a partir dels noms de fitxer originals.

Quins modes de disposició s'admeten?

Tres modes: Horitzontal (icones d'esquerra a dreta en una fila), Vertical (icones apilades de dalt a baix en una columna) i Graella (icones disposades automàticament en una matriu quadrada; les columnes són l'arrel quadrada arrodonida cap amunt). Canvia de mode al panell esquerre per previsualitzar el resultat.

Puc ajustar l'espai entre icones?

Sí. El panell esquerre té un control lliscant de padding de 0 a 50px; es recomana d'1 a 5px. Un padding raonable evita que els píxels de vora es barregin durant el posicionament CSS però no afecta l'ús. El padding viu dins del sprite, mentre que el CSS només utilitza les coordenades precises de background-position.

Puc reordenar les icones?

Sí. Cada element de la llista esquerra admet arrossegar per reordenar amb la nansa, i els botons amunt/avall funcionen en mòbil. El sprite i les coordenades CSS es regeneren automàticament tan bon punt canvia l'ordre.

Quins formats d'imatge s'admeten?

Tots els formats habituals: JPG, PNG, WebP, GIF, i més. La sortida sempre és PNG (conserva la transparència). Es recomana l'entrada PNG perquè els fons transparents sobreviuen a la fusió en el sprite.

Els CSS sprites encara són útils en projectes moderns?

La multiplexació HTTP/2 redueix part de l'avantatge del sprite, però els sprites continuen aportant valor mitjançant la caché CDN, la compressió gzip i un primer pintat més ràpid per a icones clau. Si tens menys de 10 icones, o necessites color i animació, prefereix SVG symbol o Icon Font. Per a moltes icones PNG estàtiques, els sprites continuen sent una opció estable i fiable.

Els sprites es veuen borrosos en pantalles Retina? Com ho soluciono?

Sí, poden veure's. Les pantalles Retina (Mac, iPhone, Windows HiDPI) tenen 2x o 3x píxels físics, de manera que un sprite 1x s'estira i es veu difús. La solució és pujar fitxers origen 2x (32x32 en lloc de 16x16) i escalar el sprite de tornada a 16x16 al CSS amb background-size: 32px auto.

Fusionar icones perd qualitat d'imatge?

No. Fusionar simplement col·loca cada imatge a la seva posició en un llenç gran. No es produeix cap reescalat, compressió ni ajust de color. El PNG de sortida manté la qualitat original. Si necessites reduir més el fitxer fusionat, passa'l per l'[eina de compressió d'imatges](/image/compress/).

Les meves imatges de sprite es pugen a un servidor?

No. Tota la fusió passa al teu navegador local a través de l'API Canvas. Els fitxers mai surten del teu dispositiu i es descarten quan tanques la pàgina. Icones internes, logotips no publicats i altres actius sensibles es poden processar amb seguretat.

Com descarrego el sprite generat?

Tan bon punt es pugen les imatges, es genera una previsualització. Fes clic al botó de descàrrega a l'esquerra per desar sprite.png localment. El CSS també es produeix automàticament, i un sol clic a Copiar l'envia al porta-retalls.

Puc personalitzar els noms de classe?

Els noms de classe es generen automàticament a partir dels noms de fitxer originals amb el prefix .icon-. Per exemple, home.png es converteix en .icon-home. Fes servir anglès, dígits i guionets en els noms de fitxer per obtenir noms de classe nets i llegibles.

Com trio entre sprites, Icon Font i SVG symbol?

Depèn del cas d'ús. Moltes icones PNG estàtiques o necessitat de suportar versions antigues d'IE: sprites. Icones UI universals que necessiten canviar de color i mantenir-se multiplataforma: Icon Font. Projectes moderns que necessiten color, animació i un sol fitxer per gestionar: SVG symbol és la millor opció. A la pràctica, és habitual barrejar-los: Icon Font per a icones UI bàsiques, sprites per a icones complexes de colors.

Puc reduir el sprite fusionat amb l'eina de compressió d'imatges?

Sí. Aquesta eina genera PNG sense pèrdues, que pot ser gran. Un bon flux de treball és: genera el sprite aquí, després utilitza l'[eina de compressió d'imatges](/image/compress/) per reduir el PNG o convertir a JPG (si no necessites transparència), i finalment fes servir el [convertidor d'imatges](/image/convert/) per canviar a WebP si vols. Combinar les eines maximitza el rendiment de càrrega.

Glossari

CSS sprite: Una tècnica que combina moltes imatges petites en una de més gran i utilitza background-position per mostrar icones individuals. Una optimització clàssica de rendiment frontend.
background-position: Una propietat CSS que estableix les coordenades d'inici d'una imatge de fons. Els sprites utilitzen valors negatius per desplaçar el fons cap a l'esquerra o cap amunt fins a la icona objectiu. Per exemple, background-position: -60px 0 mostra la icona a un desplaçament de 60px.
background-size: Una propietat CSS que controla la mida renderitzada d'una imatge de fons. La clau per a l'adaptació Retina: després de generar un sprite a partir d'origens 2x, utilitza background-size: 32px auto al CSS per escalar de tornada a 1x, mantenint nítides tant les pantalles 1x com 2x.
Disposició en graella: El mode graella d'aquesta eina calcula automàticament el nombre de columnes com l'arrel quadrada del nombre d'icones (arrodonit cap amunt) i disposa les icones per files en un quadrat. Nou icones es converteixen en una graella 3x3.
Padding (espai entre icones): L'espai en píxels entre sub-imatges adjacents en un sprite. Es recomana d'1 a 5px per evitar que els píxels de vora es barregin. El padding viu dins del sprite, mentre que el CSS només utilitza les coordenades precises.
Transparència PNG: PNG admet un canal alfa, de manera que les icones poden tenir fons transparents. La sortida del sprite manté el format PNG, de manera que les icones transparents continuen sent transparents després de la fusió.
Multiplexació HTTP/2: HTTP/2 processa múltiples sol·licituds en paral·lel en una sola connexió, reduint part de l'avantatge del sprite. HTTP/2 encara es queda curt davant un sprite combinat en configuració CDN, compatibilitat amb navegadors antics i compressió gzip.
SVG symbol: L'element <symbol> de SVG amb referències <use>. Cada icona viu en un sol fitxer SVG, i el CSS controla farciment, contorn i animació. La substitució de primera opció per als sprites en projectes moderns.
DPR (Device Pixel Ratio): La relació entre píxels físics i píxels CSS. Les pantalles Retina tenen DPR = 2, de manera que una icona CSS de 16x16 necessita 32x32 píxels físics. DPR és el paràmetre clau per adaptar els sprites a pantalles Retina.

Comparació dels modes de disposició del sprite

Disposició	Regla d'arranjament	Ús típic
Horitzontal	Icones col·locades d'esquerra a dreta en una sola fila	Barres de navegació, botons de pestanya, barres d'eines horitzontals
Vertical	Icones apilades de dalt a baix en una sola columna	Menús verticals, prefixes de llistes, estructures de dalt a baix
Graella	Icones disposades automàticament en una matriu quadrada segons la quantitat	Ús general, millor opció per defecte per a quantitats desconegudes

Valors de padding recomanats per a sprites

Padding (px)	Ideal per a	Notes
`0px`	Vores netes, icones que ja inclouen padding transparent	Màxima compactesa; els píxels de vora poden barrejar-se
`1-2px`	Icones d'alta qualitat amb un marge de seguretat mínim	Recomanat: equilibra compactesa i estabilitat
`3-5px`	Icones estàndard amb ombres o contorns	Distància segura, valor per defecte àmpliament usat
`6-10px`	Icones amb mides mixtes o contorns	Evita que les icones grans se superposin amb les petites
`10-50px`	Depuració o agrupació visual	No recomanat per a producció

Adaptació de sprite Retina 2x - Taula de referència

DPR de pantalla	Mida CSS	Mida del fitxer origen	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 - Implementació d'sprites d'imatge al CSS
ReferenceMDN - background-size
ReferenceMDN - SVG <symbol> i <use>
ReferenceWeb.dev - Substitueix imatges per CSS sprite
ReferenceViquipèdia - Sprite (gràfics per computador)