Calculadora de srcset: qué anchos de imagen exportar para cada densidad de pantalla
Calcula los anchos de imagen que debes exportar según el tamaño en tu diseño y la densidad de píxeles (1×, 2×, 3×) y obtén un atributo srcset listo para pegar.
Cómo funciona
ancho a exportar = ancho CSS mostrado × densidad de píxeles (DPR), con un archivo por cada densidad objetivo
Una densidad de píxeles (DPR) de 2 significa que la pantalla mete 2 píxeles físicos en cada píxel CSS, así que una imagen que ocupa 400 px CSS necesita un archivo de 800 px para verse nítida. El atributo srcset enumera cada archivo candidato con su ancho real en unidades «w», y el navegador, con ayuda del atributo sizes, elige el archivo más ligero que todavía cubre la densidad y el ancho de la pantalla de quien visita. Exportar versiones a 1×, 1.5×, 2× y 3× cubre prácticamente todos los dispositivos sin mandar imágenes enormes a pantallas de baja densidad.
Ejemplo resuelto
Ana tiene una foto de producto que se muestra a 400 px en su tienda y quiere cubrir celulares de hasta 3×. Exporta 400 × 1 = 400w, 400 × 1.5 = 600w, 400 × 2 = 800w y 400 × 3 = 1200w, y escribe srcset="image-400.jpg 400w, image-600.jpg 600w, image-800.jpg 800w, image-1200.jpg 1200w" con sizes="400px" para que el navegador elija.
Fuentes: MDN — Responsive images
Preguntas frecuentes
¿Para qué sirve el atributo sizes?
Le dice al navegador qué ancho tendrá la imagen al mostrarse (a menudo con media queries), así puede multiplicarlo por la densidad y elegir la entrada correcta del srcset antes de calcular el diseño. Sin él, el navegador asume 100vw y puede descargar archivos más pesados de lo necesario.
¿De verdad necesito una versión a 3×?
Muchos celulares tienen densidad 3×, pero la mejora visual por encima de 2× es pequeña y el archivo pesa mucho más. Un término medio común es limitar las imágenes grandes de portada a 2× y usar 3× solo en gráficos pequeños con mucho detalle.
¿Uso descriptores w o descriptores x?
Usa descriptores w junto con sizes cuando el ancho de la imagen cambia entre puntos de corte: es la opción más flexible. Los descriptores x (1x, 2x) son más simples, pero solo sirven para imágenes de tamaño fijo que nunca cambian su ancho CSS.
¿Qué es el DPR o densidad de píxeles?
Es cuántos píxeles físicos usa la pantalla por cada píxel CSS. Una pantalla Retina tiene un DPR de 2 y muchos celulares de gama alta llegan a 3.
Calculadoras relacionadas
Esta calculadora tiene fines informativos. Verifica los resultados importantes antes de tomar decisiones.