Tamaños de imagen para sitios web: ajústalos al espacio renderizado, no al monitor
No existe un único tamaño de imagen ideal para la web. El conjunto de fuentes correcto depende del ancho máximo al que se renderiza la imagen, los puntos de quiebre del diseño, la densidad de píxeles del dispositivo, el comportamiento del recorte y el presupuesto de rendimiento.
Por PixoPublicado
Empieza por el espacio renderizado
Mide el espacio CSS más ancho donde se muestra la imagen, no el monitor. Un hero a ancho completo y una tarjeta de 320 píxeles necesitan conjuntos de fuentes distintos. Si un hero se renderiza a 1280 píxeles CSS en pantallas grandes, un candidato de 1280 y quizá otro de 2560 píxeles pueden ser útiles; la tarjeta debe quedarse mucho más pequeña.
Generador de imágenes responsivas Crea variantes de ancho, marcado y un ZIP localmente.
Crea un conjunto pequeño de candidatos útiles
Los conjuntos de anchos deben seguir el diseño: por ejemplo 320, 640, 960, 1280 y 1920 píxeles. No generes todos los tamaños posibles. El navegador elige entre los candidatos, así que cada archivo debe representar un salto significativo en bytes transferidos.
Describe el diseño al navegador con sizes
El atributo srcset lista los anchos candidatos; sizes describe con qué ancho se renderizará la imagen según las condiciones del viewport. Si sizes falta o es impreciso, el navegador puede descargar un candidato más grande de lo necesario.
Elige formato y calidad según el tipo de imagen
Usa formatos modernos con pérdida para las fotografías y salida sin pérdida para los gráficos que la necesiten. Los logotipos suelen funcionar mejor como SVG. Compara texto, rostros, degradados y bordes duros al tamaño renderizado en lugar de aplicar un mismo número de calidad a todos los recursos.
Protege el diseño y la prioridad de carga
Define width y height intrínsecos o una proporción para reservar el espacio. Prioriza la imagen principal que se ve al cargar la página cuando el framework lo admita, y aplica carga diferida a las imágenes que quedan más abajo. Evita dar prioridad alta a todas las imágenes.