Calcule tamaños de imagen responsive por breakpoints
Con densidad doble, una imagen que se ve a 720 píxeles de ancho necesita un original de 1440. Indique cada breakpoint y el ancho al que se muestra la imagen, y obtenga los anchos que debe generar, ordenados y sin repetir, como 640, 1440 y 2160. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Densidad de píxeles
- 2
- Anchos de origen
- 640, 1 440, 2 160
Los diseños responsive suelen indicar cuánto mide una imagen en varios breakpoints CSS, pero el proceso de imágenes necesita los anchos reales en píxeles que debe generar. Esta calculadora convierte cada ancho renderizado en el ancho de origen necesario mediante un multiplicador de densidad, y devuelve una lista ordenada y sin duplicados. Así, la relación entre CSS, densidad de pantalla y recursos queda explícita y lista para automatizar.
Convierta las reglas de diseño en píxeles de origen
Comience con los breakpoints definidos en el diseño o la hoja de estilos. Para cada uno, indique el ancho mínimo del viewport donde se aplica la regla y el ancho real con el que se muestra la imagen. Ambos valores se expresan en píxeles CSS, por lo que puede copiarlos directamente de las especificaciones.
La calculadora ordena las filas por breakpoint, aunque usted las introduzca en otro orden. Cada ancho visible se multiplica por la densidad elegida y el resultado se redondea hacia arriba al píxel entero. Ese redondeo evita que un valor decimal produzca un recurso ligeramente menor de lo necesario.
La salida conserva cada correspondencia para facilitar la revisión y ofrece además una lista separada de anchos de origen sin duplicados. Esta última es la lista práctica de variantes que debe generar, almacenar en caché y usar en su flujo de imágenes responsive.
Elija conscientemente la densidad de píxeles
El multiplicador predeterminado es 2, una referencia útil para mantener imágenes nítidas en pantallas habituales de alta densidad. Por tanto, una imagen mostrada a 480 píxeles CSS necesita un origen de 960 píxeles. Puede seleccionar otro valor entre 0.1 y 8 si su política de entrega tiene objetivos diferentes.
El valor 1 reduce las dimensiones generadas para pantallas de densidad normal, mientras que 3 prepara recursos para paneles más densos a cambio de más almacenamiento y transferencia. Se aplica el mismo multiplicador a todos los breakpoints para mantener una política coherente. La herramienta no decide qué archivo descargará cada visitante ni estima compresión o peso: calcula únicamente los anchos requeridos.
Use la lista resultante en un optimizador o servicio de transformación y deje que el navegador escoja el recurso mediante el marcado y las reglas multimedia del componente.
Integre el resultado en su flujo responsive
La respuesta contiene el multiplicador aplicado, una fila ordenada para cada breakpoint y una lista numérica de anchos de origen únicos. Las filas sirven para comparar la implementación con el diseño, porque muestran juntos el ancho visible original y el ancho calculado. La lista única facilita la automatización cuando dos reglas requieren el mismo recurso.
Por ejemplo, dos condiciones pueden mostrar la imagen a 600 píxeles CSS; con densidad 2, basta generar una variante de 1200 píxeles. Envíe cada ancho único a su etapa de redimensionado, conserve allí la relación de aspecto y utilice las URL generadas en el componente. El recorte, el formato, la calidad y la altura pertenecen a esa etapa posterior, pues dependen de la imagen y de la dirección artística.
Se rechazan listas vacías y breakpoints duplicados porque no describen una especificación inequívoca.
Qué puede hacer con ella
Prepare variantes durante el build
Convierta las especificaciones del componente en los anchos únicos exactos que debe generar un sitio estático.
Revise una entrega de diseño
Compruebe si los recursos entregados contienen suficientes píxeles para la densidad acordada en cada estado.
Configure un CDN de imágenes
Obtenga una lista estable de anchos para solicitudes de redimensionado, ajustes predefinidos o precalentamiento de caché.
Preguntas frecuentes
¿Por qué se redondean los anchos hacia arriba?
Una imagen no puede tener un ancho fraccionario y redondear hacia abajo podría dejarla por debajo de la densidad solicitada.
¿Cuál es la densidad predeterminada?
El multiplicador predeterminado es 2; un ancho visible de 500 píxeles CSS requiere un origen de 1000 píxeles.
¿La herramienta genera o redimensiona imágenes?
No. Calcula los anchos que debe generar; el redimensionado corresponde a un procesador, una herramienta de build o un CDN.
¿Qué ocurre si la lista de breakpoints está vacía?
La solicitud falla con un error de entrada no válida, porque se necesita al menos una regla de diseño.
¿Por qué salen menos anchos de origen que breakpoints?
Porque se eliminan los anchos repetidos. Si la imagen se ve a 720 píxeles tanto en 768 como en 1024, ambos necesitan el mismo original de 1440, así que cuatro breakpoints pueden dar solo tres anchos: 640, 1440 y 2160.
Herramientas relacionadas
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, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
curl -X POST https://api.kit.forhosting.com/image/responsive-breakpoint-sizes \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}'const res = await fetch("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"breakpoints": [
{
"breakpoint": 0,
"display_width": 320
},
{
"breakpoint": 768,
"display_width": 720
},
{
"breakpoint": 1200,
"display_width": 1080
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/image/responsive-breakpoint-sizes",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"breakpoints": [
{
"breakpoint": 0,
"display_width": 320
},
{
"breakpoint": 768,
"display_width": 720
},
{
"breakpoint": 1200,
"display_width": 1080
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"breakpoints":[{"breakpoint":0,"display_width":320},{"breakpoint":768,"display_width":720},{"breakpoint":1200,"display_width":1080}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/image/responsive-breakpoint-sizes", 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
{
"breakpoints": [
{
"breakpoint": 0,
"display_width": 320
},
{
"breakpoint": 768,
"display_width": 720
},
{
"breakpoint": 1200,
"display_width": 1080
}
]
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "image.responsive_breakpoint_sizes",
"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. |
Preguntas técnicas
¿Cuánto cuesta el cálculo?
Cada cálculo mediante la API cuesta $0.002.
¿Por qué aparecen sizes y source_widths?
sizes conserva cada correspondencia para revisarla, mientras que source_widths elimina duplicados para generar recursos con eficiencia.