Hoja de Sprites de Imagen Combina múltiples imágenes en una sola hoja de sprites con columnas y espaciado configurables.

What Is Hoja de Sprites de Imagen?

Un generador de hojas de sprites que combina múltiples imágenes en una sola imagen compuesta dispuesta en una cuadrícula, junto con las coordenadas de posición de fondo CSS para cada sprite. Esencial para la optimización del rendimiento web, las animaciones de sprites de juegos y los conjuntos de iconos. Sube tus imágenes individuales, establece el número de columnas y el relleno, y la herramienta genera tanto la imagen PNG compuesta como el fragmento de CSS.

Why Use Hoja de Sprites de Imagen?

• Genera imagen de hoja de sprites + coordenadas CSS
• Columnas y relleno configurables
• Reduce las solicitudes HTTP para un mejor rendimiento web
• Perfecto para conjuntos de iconos y sprites de juegos

Common Use Cases

Rendimiento web

Combine iconos en una sola hoja de sprites para reducir las solicitudes HTTP.

Desarrollo de juegos

Cree hojas de sprites de animación a partir de imágenes de frames individuales.

Conjuntos de iconos

Empaquete varios iconos en una sola imagen de sprite eficiente.

Sprites CSS

Genere hojas de sprites optimizadas con código CSS listo para usar.

Technical Guide

Las imágenes se cargan y disponen en una cuadrícula con columnas configurables. El número de filas se calcula como ceil(imageCount/columns). Las dimensiones del lienzo se calculan a partir del ancho máximo por columna y la altura total de fila más el relleno. Cada imagen se dibuja en su posición de cuadrícula calculada. Se generan las coordenadas CSS como valores de posición de fondo negativos para cada sprite.

Tips & Best Practices

• 1
  Utilice tamaños de imagen consistentes para una cuadrícula limpia
• 2
  Mantenga el relleno en 1-2 píxeles para minimizar el espacio desperdiciado
• 3
  Asigne nombres descriptivos a sus archivos para mejores nombres de clases CSS
• 4
  Utilice potencias de 2 para la compatibilidad con motores de juego

Related Tools

Redimensionador de Imágenes

Redimensiona imágenes por dimensiones exactas en píxeles o porcentaje manteniendo la proporción.

🖼️ Image Tools

Generador de Favicon

Genera favicons en múltiples tamaños (16x16, 32x32, 48x48 y más) a partir de cualquier imagen.

🖼️ Image Tools

Colaje de Imágenes

Combina varias imágenes en un solo colaje con diseños y espaciado personalizables.

🖼️ Image Tools

Creador de Cuadrícula de Imágenes

Divide una imagen en una cuadrícula de mosaicos del mismo tamaño para publicaciones y rompecabezas de Instagram.

🖼️ Image Tools

Frequently Asked Questions

Q ¿Qué tamaños de imagen funcionan mejor?

Los tamaños consistentes producen los sprites más limpios, pero se admiten tamaños mixtos.

Q ¿Genera CSS?

Sí - CSS completo con valores de background-position para cada sprite.

Q ¿Cuántas imágenes puedo combinar?

Cualquier número de imágenes se puede combinar en una sola hoja de sprites.

Q ¿Y qué hay sobre las pantallas retina?

Utilice imágenes con resolución 2x y reduzca el tamaño de fondo CSS a la mitad para admitir pantallas retina.

Q ¿Puedo usarlo para sprites de juegos?

Absolutamente - organice los frames de animación en secuencia para hojas de sprites de juegos.

About This Tool

Hoja de Sprites de Imagen is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.