Creación de imágenes para pantallas Retina - Lograr una visualización nítida en pantallas de alto DPI

Por qué las imágenes se ven borrosas en pantallas Retina - Entendiendo la relación de píxeles del dispositivo

Las pantallas Retina (marca registrada de Apple) y las pantallas de alto DPI utilizan múltiples píxeles físicos para renderizar un píxel CSS. Esta relación se denomina relación de píxeles del dispositivo (DPR). Los dispositivos con DPR 2x usan 4 píxeles físicos (2×2) para mostrar 1 píxel CSS, y los dispositivos con DPR 3x usan 9 píxeles físicos (3×3).

Por qué las imágenes estándar se ven borrosas:

Cuando una imagen de 200×200 píxeles se muestra a 200×200 píxeles CSS en un dispositivo con DPR 2x, el navegador debe estirar 200 píxeles para cubrir 400 píxeles físicos. Esta ampliación causa borrosidad porque no hay suficiente información de píxeles para llenar los píxeles físicos.

La solución:

Proporcionar imágenes de 2x o 3x la resolución. Para un área de visualización de 200×200 píxeles CSS:

• Dispositivo 1x: necesita imagen de 200×200 px
• Dispositivo 2x: necesita imagen de 400×400 px
• Dispositivo 3x: necesita imagen de 600×600 px

Distribución actual de DPR en dispositivos:

• DPR 1x: Monitores de escritorio antiguos (en disminución)
• DPR 2x: La mayoría de laptops modernas, iPad, smartphones de gama media
• DPR 3x: Smartphones de gama alta (serie iPhone Pro, Android flagship)
• DPR 4x: Algunos dispositivos de ultra alta resolución

En la práctica, soportar 1x y 2x cubre la gran mayoría de usuarios. El soporte 3x tiene valor para sitios dirigidos a usuarios móviles de gama alta, pero con rendimientos decrecientes.

Cambio de resolución con srcset - Implementación HTML básica

El atributo srcset de HTML permite a los navegadores seleccionar automáticamente la imagen de resolución óptima según el DPR del dispositivo. Este es el método más básico para implementar soporte Retina.

Sintaxis de descriptor de densidad de píxeles:

<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x, logo-3x.png 3x" alt="Logo" width="200" height="50">

El navegador selecciona el archivo de imagen correspondiente según el DPR del dispositivo. En un dispositivo 2x descarga automáticamente logo-2x.png.

Sintaxis de descriptor de ancho:

<img src="photo-800.jpg" srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w, photo-1600.jpg 1600w" sizes="(max-width: 600px) 100vw, 800px" alt="Foto">

Los descriptores de ancho son más flexibles; el navegador considera tanto el ancho de visualización como el DPR para seleccionar. En un contenedor de 800px de ancho, un dispositivo 2x seleccionará la imagen de 1600w.

Elección entre las dos sintaxis:

• Descriptores de densidad de píxeles (1x, 2x): Adecuados para elementos de tamaño fijo (logos, iconos, avatares)
• Descriptores de ancho (w): Adecuados para imágenes de tamaño variable en diseños responsivos (imágenes de artículos, productos)

Notas importantes:

• Siempre establezca los atributos width y height para prevenir desplazamiento de diseño
• El atributo src sirve como respaldo para navegadores antiguos que no soportan srcset
• No proporcione versiones 3x para todas las imágenes: el aumento de tamaño de archivo es significativo mientras la mejora visual es limitada

Elemento picture y dirección artística - Entrega de imágenes específicas por dispositivo

El elemento <picture> proporciona un control más fino que srcset, pudiendo entregar imágenes completamente diferentes según las características del dispositivo, no solo diferentes resoluciones.

Combinando formato y resolución:

<picture>
<source type="image/avif" srcset="hero-2x.avif 2x, hero-1x.avif 1x">
<source type="image/webp" srcset="hero-2x.webp 2x, hero-1x.webp 1x">
<img src="hero-1x.jpg" srcset="hero-2x.jpg 2x" alt="Banner principal">
</picture>

Esto logra simultáneamente la negociación de formato (AVIF > WebP > JPEG) y el cambio de resolución.

Dirección artística combinada con DPR:

Cambiar no solo la resolución sino también el contenido de la imagen en diferentes dispositivos:

<picture>
<source media="(max-width: 600px)" srcset="product-mobile-2x.jpg 2x, product-mobile-1x.jpg 1x">
<source media="(min-width: 601px)" srcset="product-desktop-2x.jpg 2x, product-desktop-1x.jpg 1x">
<img src="product-desktop-1x.jpg" alt="Imagen de producto">
</picture>

Móvil muestra un primer plano del producto (versión recortada), escritorio muestra la vista completa, ambos proporcionando versiones 2x.

Consejos prácticos:

• Para la mayoría de las imágenes, srcset con descriptores de ancho es suficiente
• <picture> se usa principalmente para escenarios que requieren diferentes recortes o diferentes formatos
• El uso excesivo de <picture> aumenta la complejidad del HTML y el costo de mantenimiento

Soporte CSS de alto DPI - image-set() y optimización de imágenes de fondo

Las imágenes de fondo y contenido CSS también necesitan soporte para pantallas de alto DPI. La función image-set() permite que CSS seleccione diferentes imágenes según la resolución del dispositivo.

Sintaxis de image-set():

.hero { background-image: image-set(url("bg-1x.jpg") 1x, url("bg-2x.jpg") 2x); }

El navegador selecciona automáticamente la imagen de fondo apropiada según el DPR del dispositivo.

Método con media queries (mejor compatibilidad):

.logo { background-image: url("logo-1x.png"); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.logo { background-image: url("logo-2x.png"); background-size: 200px 50px; }
}

Notas clave:

• Use background-size para asegurar que las imágenes de alta resolución se muestren al tamaño CSS correcto
• min-resolution: 192dpi equivale a DPR 2x
• -webkit-min-device-pixel-ratio es un prefijo WebKit para compatibilidad con versiones antiguas de Safari

SVG como alternativa:

Para iconos, logos y gráficos simples, SVG es la mejor solución de alto DPI. SVG es un formato vectorial que se mantiene nítido a cualquier resolución, sin necesidad de proporcionar múltiples tamaños. Un solo archivo SVG se adapta perfectamente a todos los DPR.

Gráficos generados por CSS:

Los efectos visuales generados por CSS como degradados, bordes y sombras soportan nativamente alto DPI sin procesamiento adicional. Usar CSS en lugar de imágenes siempre que sea posible reduce las solicitudes HTTP y se adapta automáticamente a todas las resoluciones.

Flujo de trabajo de exportación de imágenes - Generación eficiente de versiones multirresolución

Establecer un flujo de trabajo eficiente de generación de imágenes Retina reduce directamente los costos operativos. La exportación manual multirresolución es tanto lenta como propensa a errores.

Exportación desde herramientas de diseño:

• Figma: Seleccione exportación simultánea en 1x, 2x, 3x en la configuración de exportación. Soporta exportación por lotes de todos los recursos
• Sketch: Use presets de exportación para configurar múltiples resoluciones. Automatizable mediante plugins
• Adobe XD: El panel de exportación soporta múltiples escalas de salida simultáneas

Generación automática en tiempo de construcción:

Use bibliotecas de procesamiento de imágenes como Sharp para generar automáticamente múltiples resoluciones en el pipeline de construcción:

const sizes = [1, 2, 3]; // multiplicadores DPR
const baseWidth = 400; // ancho CSS base
for (const dpr of sizes) {
await sharp('input.jpg')
.resize(baseWidth * dpr)
.jpeg({ quality: dpr === 1 ? 80 : 70 })
.toFile(`output-${dpr}x.jpg`);
}

Estrategia de configuración de calidad:

Las imágenes de alta resolución pueden usar menor calidad de compresión sin afectar el resultado visual. Debido a que la densidad de píxeles es mayor, los artefactos de compresión son más pequeños en tamaño físico y menos perceptibles:

• Imágenes 1x: calidad 80-85%
• Imágenes 2x: calidad 65-75%
• Imágenes 3x: calidad 55-65%

Esta estrategia puede reducir significativamente el tamaño de archivo de imágenes 2x/3x mientras mantiene la calidad visual.

高解像度対応の Web デザイン書籍も Amazon で探せます

Equilibrio de rendimiento - Gestión del costo del soporte de alto DPI

El soporte de alto DPI mejora directamente la calidad de imagen, pero aumenta el costo en tamaño de archivo. Las imágenes 2x tienen aproximadamente 4 veces los píxeles de 1x (ancho y alto duplicados), con tamaños de archivo típicamente 2-3 veces mayores. Es necesario encontrar un equilibrio entre calidad y rendimiento.

Impacto en el tamaño de archivo:

• 1x (400×300): aproximadamente 40KB (JPEG calidad 80)
• 2x (800×600): aproximadamente 100KB (JPEG calidad 70)
• 3x (1200×900): aproximadamente 180KB (JPEG calidad 60)

Estrategias de optimización:

• Usar formatos modernos: AVIF y WebP son 30-50% más pequeños que JPEG a la misma calidad. Un AVIF 2x puede ser más pequeño que un JPEG 1x
• Reducir la calidad de imágenes de alto DPI: Como se mencionó, las imágenes 2x/3x pueden usar menor calidad de compresión
• Limitar el DPR máximo: Para la mayoría de los sitios, soportar hasta 2x es suficiente. La mejora visual de 3x es limitada pero el aumento de tamaño de archivo es significativo
• Carga diferida: Use carga diferida para imágenes de alto DPI debajo del pliegue, reduciendo la carga inicial

Cuándo no se necesita alto DPI:

• Texturas de fondo e imágenes decorativas: la borrosidad no es notable
• Fondos fotográficos de gran área: los usuarios no los examinan de cerca
• Miniaturas de video: se reproducirá el video al hacer clic

Monitoreo y medición:

Use el panel de red de Chrome DevTools para verificar los tamaños de imagen realmente descargados. Si el tamaño de archivo de imágenes 2x causa degradación del LCP, considere reducir la calidad o limitar a 1.5x. Use la auditoría de imágenes de Lighthouse para verificar si se envían imágenes demasiado grandes a dispositivos que no las necesitan.