Calcule tamaños de imagen responsive por breakpoints

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.