Imágenes responsive
Una etiqueta de imagen responsive no es un solo archivo, es una familia de archivos: la misma foto renderizada en media docena de anchos para que un teléfono no descargue una imagen pensada para escritorio. Este endpoint genera esa familia completa a partir de una sola imagen de origen, en una sola petición, con el atributo srcset incluido y listo para su marcado.
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.
La brecha entre un sistema de diseño y un flujo real de imágenes
Todo front-end serio ha definido sus puntos de quiebre: los anchos en los que el diseño cambia y las imágenes necesitan servirse en un tamaño distinto. Los atributos srcset y sizes existen precisamente para que el navegador elija el archivo correcto según su viewport, pero eso solo funciona si esos archivos realmente existen en algún lugar. Producirlos a mano para cada imagen subida, en cada punto de quiebre, para cada nuevo contenido, es exactamente el tipo de trabajo repetitivo que pertenece a una llamada de API y no a una tarea de diseño.
Qué produce una sola petición
Envía una imagen de origen y una lista de anchos objetivo, o acepta nuestros valores por defecto que cubren los puntos de quiebre más comunes, y la tarea genera un archivo correctamente proporcionado por cada ancho, preservando la relación de aspecto salvo que indique lo contrario. La respuesta incluye la URL de cada archivo generado junto con una cadena srcset lista para usar, así que el resultado no es solo un montón de imágenes, es marcado que puede pegar directamente en una etiqueta img o picture.
Por qué existe el srcset en primer lugar
Durante buena parte de la historia de la web, las imágenes se servían en un tamaño fijo sin importar el dispositivo, así que un teléfono con datos móviles descargaba la misma imagen de varios megabytes que una computadora con fibra óptica. El atributo srcset, estandarizado a mediados de la década de 2010, finalmente permitió que un solo elemento img ofreciera varios archivos candidatos y dejara que el navegador eligiera según su viewport y densidad de píxeles, pero solo puede elegir entre archivos generados de antemano.
Dónde encaja en un flujo de contenido
Esto encaja de forma natural justo después de que un editor o usuario sube una imagen, ya sea la imagen destacada de un blog, la foto principal de un producto o el banner de una página de marketing: una sola llamada convierte esa única imagen subida en toda la familia de tamaños que un front-end moderno espera, entregada por webhook en el momento en que está lista. Es un complemento natural de un paso de almacenamiento o CDN, ya que los archivos generados están pensados para servirse de forma estática una vez producidos, no para regenerarse en cada carga de página.
En qué se diferencia de un simple redimensionamiento por lote
Una llamada de redimensionamiento en lote sirve para muchas imágenes de origen distintas que van a un mismo tamaño objetivo; este endpoint es la imagen espejo, una sola imagen de origen que va a muchos tamaños objetivo, y está construido específicamente para esa forma, incluyendo el formato srcset que una llamada de lote no produciría por sí sola.
Qué puede hacer con ella
Imágenes destacadas de blog
Una plataforma de publicación genera el conjunto responsive completo de la imagen destacada de un autor en el momento en que se guarda el artículo, para que se vea bien en cualquier dispositivo sin pasos editoriales adicionales.
Fotos principales y de producto en e-commerce
Una tienda en línea genera el srcset de la foto principal de cada producto en cuanto se sube, para que los compradores desde el teléfono nunca descarguen una imagen en resolución de escritorio por una conexión lenta.
Banners de páginas de aterrizaje de marketing
Un equipo de marketing que arma una nueva landing page genera un conjunto responsive completo para el banner principal en una sola llamada, en lugar de exportar seis tamaños a mano desde una herramienta de diseño.
Plataformas de contenido generado por usuarios
Una plataforma social o comunitaria pasa cada imagen subida por este endpoint para que las imágenes del feed carguen rápido en el teléfono sin sacrificar calidad en pantallas más grandes.
Preguntas frecuentes
¿Qué devuelve realmente la api de imágenes responsive?
Un conjunto de imágenes correctamente redimensionadas en los anchos que indica, más una cadena srcset lista para usar que las referencia a todas, así que puede pegar el resultado directo en su marcado.
¿Puedo definir mis propios puntos de quiebre?
Sí, usted indica la lista de anchos objetivo, o puede usar los valores por defecto que cubren los puntos de quiebre más comunes si no necesita unos personalizados.
¿También genera el atributo sizes?
La respuesta se centra en el srcset en sí; el atributo sizes depende de su diseño, así que lo combina con los anchos que ya conoce para sus puntos de quiebre.
¿Existe un plan gratuito para la api de imágenes responsive?
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 se cobra un conjunto responsive?
$0.002 por solicitud más $0.005 por cada imagen generada, así que un conjunto de cinco tamaños cuesta la tarifa base más cinco cargos de imagen.
¿Qué pasa si un ancho objetivo falla al generarse?
La tarea reintenta automáticamente hasta tres veces por archivo; una falla que no se puede resolver se reporta con claridad y nunca se cobra.
¿En qué se diferencia del redimensionamiento en lote?
El redimensionamiento en lote toma muchas imágenes de origen hacia un solo tamaño objetivo; este endpoint toma una sola imagen de origen y produce muchos tamaños, formateados como srcset.
¿Cómo recibo los archivos generados?
Mediante un webhook firmado, que recomendamos para flujos de producción, o a través de un enlace firmado válido por 24 horas después de completarse la tarea.
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/responsive-set \
-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/responsive-set", {
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/responsive-set",
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/responsive-set", 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/responsive-set", 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.responsive_set",
"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. |