logo
GeekFormat

Generador de Sprites

Cliqueu per pujar fotografies

Format de implementació: PNG, JPG, WebP

050

Puja una imatge per prévisualitzar l'sprite

Combina múltiples icones en una sola imatge CSS Sprite i genera codi CSS automàticament per optimitzar el rendiment web.

Relacionats

Escàner de codis QR

Redimensionar imatges

Girar i capgirar imatges

Generador ASCII

Base64 a Imatge

Generador de Slug URL

Casos d'ús

  • Optimitzar la càrrega d'icones en una web reduint les sol·licituds HTTP
  • Crear sprite sheets per a biblioteques de components UI
  • Generar codi CSS amb background-position precís per a desenvolupament frontend
  • Combinar icones de xarxes socials o elements de navegació en una sola imatge

Característiques

  • Combinació d'icones amb un clic: càrrega massiva de múltiples imatges, genera ràpidament CSS Sprites d'alta qualitat i redueix les sol·licituds HTTP
  • Generació intel·ligent de codi: calcula i genera automàticament codi CSS amb background-position precís, copiar i enganxar directament
  • Control flexible de disposició: tres modes (horitzontal, vertical i graella), arrossega per ajustar l'ordre de les icones
  • Espai personalitzable: defineix amb precisió l'espai entre icones per evitar superposicions o errors de posicionament CSS
  • Previsualització i exportació en temps real: processament ràpid al navegador, previsualitza l'efecte i el codi en temps real

Com usar-ho

  1. Carrega les icones PNG o JPG que vols combinar
  2. Ajusta l'ordre arrossegant i tria la disposició (horitzontal, vertical o graella)
  3. Configura l'espai entre icones si cal
  4. Descarrega el sprite sheet i copia el codi CSS generat

Preguntes freqients

Què són els CSS Sprites? Per què s'han d'utilitzar?

Els CSS Sprites combinen múltiples icones o botons d'una web en una sola imatge. Això redueix significativament el nombre de sol·licituds HTTP al servidor, alleujant la càrrega i accelerant la pàgina.

Com es genera un sprite sheet i s'obté el codi CSS?

Carrega els fitxers d'icones (PNG, JPG, etc.) de forma massiva i l'eina els combinarà automàticament. Pots ajustar l'ordre arrossegant, triar disposició horitzontal, vertical o en graella, i previsualitzar el resultat. El sistema genera automàticament el codi CSS amb background-position precís.

Es pot personalitzar l'espai entre icones?

Sí. Pots configurar l'espai horitzontal i vertical entre icones per evitar superposicions de vores o errors de visualització en el posicionament CSS.

Quins tipus de disposició admet?

Oferim disposició horitzontal, vertical i en graella (matriu). Tria la que millor s'adapti al teu projecte per aprofitar al màxim l'espai de la imatge.

Es comprimeix la qualitat de la imatge?

No. El processament es fa de forma lossless directament al navegador, i el sprite sheet generat conserva completament la nitidesa i els detalls de les imatges originals.