Sprite sheets
Cada imagen adicional que pide el navegador es una espera más para quien visita su sitio o juego. La API para generar sprite sheet toma un lote de imágenes y las empaqueta en un solo atlas junto con un mapa de coordenadas, de modo que un set de íconos, una interfaz o un juego se sirven como un único archivo en lugar de decenas. Envía las imágenes y recibe un PNG más el mapa que indica dónde vive cada pieza.
Ejecútela online
Ejecute esto en nuestros servidores con su cuenta. Las herramientas gratuitas corren en su navegador; esta cobra de su saldo del KIT según el precio de arriba.
Por qué los atlas siguen siendo útiles
Las fuentes de íconos pasaron de moda, pero el problema que resolvían nunca desapareció: decenas de imágenes pequeñas significan decenas de conexiones, y las conexiones son lentas sin importar qué tan rápido sea el enlace. Los motores de videojuegos resolvieron esto hace décadas con atlas de texturas, y el mismo truco funciona hoy para sets de íconos web, librerías de componentes y assets de apps móviles. Este endpoint automatiza el paso de empaquetado que antes exigía un plugin de diseño o un script en el build.
Qué envía y qué recibe
Envía la lista de imágenes de origen por POST a /image/sprite y la tarea las empaqueta con un algoritmo de acomodo de rectángulos que busca un resultado compacto y aproximadamente cuadrado. La respuesta, entregada por webhook o enlace firmado, incluye la imagen del atlas y un mapa en JSON con el nombre, la posición x/y y el ancho/alto de cada imagen dentro de la hoja. Ese mapa es justo lo que necesita para reglas de background-position en CSS o para el cargador de texturas de un motor de juego.
Dónde encaja en un flujo de trabajo
Los equipos llaman a este endpoint como último paso de su flujo de construcción de assets: los íconos se exportan de la herramienta de diseño, se optimizan y luego se empaquetan. Como la tarea es asíncrona, encaja de forma natural en un job de integración continua o un script de despliegue sin bloquear nada más: hace la solicitud, sigue trabajando y el webhook llega cuando el atlas está listo. No hace falta un ciclo de sondeo, aunque el enlace firmado está ahí por si prefiere consultarlo en su propio momento.
Quién necesita esto en realidad
Desarrolladores de videojuegos independientes que empaquetan cuadros de animación, equipos de sistemas de diseño que entregan un solo atlas de íconos en vez de cien SVG, y sitios de marketing que buscan reducir solicitudes HTTP para mejorar su puntaje de rendimiento usan este endpoint por la misma razón de fondo: menos archivos, carga más rápida. No está pensado para edición fotográfica: solo empaqueta y mapea imágenes que ya tiene.
Un precio acorde al trabajo
El costo combina una tarifa fija pequeña por solicitud más un cargo por imagen, así que empaquetar 5 íconos o 200 cuadros de sprite se factura en proporción al trabajo real. Una tarea fallida nunca se cobra: el empaquetador reintenta automáticamente antes de devolver un error claro, así que solo paga por atlas que efectivamente se construyen.
Qué puede hacer con ella
Librería de íconos en un solo archivo
Un equipo de sistema de diseño exporta cada noche 80 íconos en PNG y los empaqueta en un solo atlas con mapa de coordenadas listo para su librería de componentes.
Cuadros de animación de un videojuego 2D
Un estudio independiente empaqueta los cuadros del ciclo de caminata de un personaje en una sola hoja para que el motor cargue una textura en vez de una por cuadro.
Reducción de solicitudes en un sitio de marketing
Una landing page con 30 sellos de confianza y logos de pago los empaqueta en un solo atlas para reducir solicitudes antes de una auditoría de rendimiento.
Empaquetado de assets para app móvil
Un equipo móvil agrupa las ilustraciones de onboarding en un solo atlas durante el build para reducir el tamaño del paquete y las llamadas de carga de assets.
Preguntas frecuentes
¿Cómo acomoda las imágenes la API para generar sprite sheet?
Usa un algoritmo de acomodo de rectángulos que organiza las imágenes recibidas para minimizar espacio desperdiciado y mantener un resultado aproximadamente cuadrado; no controla la posición manualmente.
¿Qué formatos puedo enviar?
Se aceptan imágenes de origen en PNG, JPEG y WebP; el atlas resultante se entrega en PNG para conservar la transparencia cuando existe.
¿Recibo un mapa de coordenadas junto con el atlas?
Sí, el resultado incluye un mapa en JSON con el nombre, la posición y las dimensiones de cada imagen dentro de la hoja, listo para usar en CSS o en un motor de juego.
¿Hay un límite de cuántas imágenes puedo empaquetar a la vez?
Puede enviar un lote completo en una sola solicitud; los lotes muy grandes simplemente tardan un poco más porque el costo y el procesamiento escalan por imagen.
¿Esta API es gratuita?
No hay capa gratuita: las capas gratis se abusan y ralentizan a todos. El acceso funciona con un saldo prepago de ForHosting KIT: se recarga desde $10.00 (no caduca) y cada solicitud se cobra a su precio publicado, así que una llamada sin saldo devuelve HTTP 402. Sin suscripción, sin tokens ni créditos inventados, y una tarea fallida no se cobra.
¿Cómo recibo el resultado, por sondeo o por webhook?
La tarea corre de forma asíncrona y devuelve un task_id de inmediato; el atlas y el mapa terminados llegan por webhook firmado, o puede descargarlos desde un enlace firmado válido por 24 horas.
¿Qué pasa si el empaquetado falla?
La tarea reintenta automáticamente hasta tres veces; si aun así falla, recibe un error claro y no se cobra esa solicitud.
¿Puedo usar esto en lugar de una fuente de íconos?
Sí, un atlas de imágenes con mapa de coordenadas cubre el mismo caso de uso que una fuente de íconos (menos solicitudes que archivos individuales) sin necesitar carga de fuentes ni mapeo de glifos.
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, y pronto desde nuestra app, el email y Telegram.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/sprite \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"image":"https://ejemplo.com/imagen.jpg"}'const res = await fetch("https://api.kit.forhosting.com/image/sprite", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"image": "https://ejemplo.com/imagen.jpg"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/sprite",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"image": "https://ejemplo.com/imagen.jpg"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/sprite", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"image":"https://ejemplo.com/imagen.jpg"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"image":"https://ejemplo.com/imagen.jpg"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/sprite", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Ejemplo de solicitud
{
"image": "https://ejemplo.com/imagen.jpg"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.sprite",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Límites
max_mb | 15 |
max_megapixels | 12 |
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |