Imágenes Retina: Sirve gráficos nítidos en pantallas de alta DPI

Última actualización: June 30, 2026

Las pantallas Retina y de alto DPI empaquetan más píxeles en el mismo espacio físico, por lo que una imagen dimensionada para una pantalla estándar se ve suave y pixelada en ellas. Servir imágenes nítidas en estas pantallas implica preparar versiones de mayor resolución e indicar al navegador cuándo usarlas. Esta guía cubre el flujo de trabajo 2x y 3x, la marca srcset que entrega el archivo correcto, y el equilibrio entre nitidez y peso de página.

Respuesta rápida: ¿cómo se hacen nítidas las imágenes en pantallas Retina?

Crea una versión de la imagen con el doble (y para teléfonos, triple) de las dimensiones de píxeles de visualización, y luego usa el atributo srcset para ofrecer ambas versiones. El navegador carga el archivo de alta resolución solo en las pantallas que pueden mostrarlo, por lo que las pantallas estándar no descargan los bytes adicionales. Una foto mostrada a 400 píxeles de ancho necesita una fuente de 800 píxeles (2x) para Retina. Exporta ambas con compresión adecuada: el archivo 2x es más grande pero no el doble, porque la eficiencia de la compresión mejora con la resolución.

¿Qué es un display Retina o de alto DPI?

Un display Retina es un término de marketing para una pantalla con suficiente densidad de píxeles que el ojo no puede distinguir píxeles individuales a distancia normal de visualización. Apple acuñó el término, pero el concepto se aplica a la mayoría de los teléfonos, tabletas y portátiles modernos. La medida práctica es la relación de píxeles del dispositivo (DPR) —cuántos píxeles físicos representan un píxel CSS.

• Una pantalla 2x necesita el doble de píxeles lineales (cuatro veces el total) para verse nítida.
• Una pantalla de teléfono 3x necesita tres veces los píxeles lineales.
• Las pantallas estándar 1x descargan la imagen base y no desperdician nada.

La guía de Mozilla sobre la relación de píxeles del dispositivo documenta cómo los navegadores informan y usan el DPR, que es la base de toda estrategia de imágenes Retina.

¿Cómo se crean versiones de imagen 2x y 3x?

Empieza con una fuente de alta resolución y Redimensionador de Imágenes a cada objetivo en lugar de escalar un archivo pequeño. Una foto destinada a un espacio de visualización de 400 píxeles necesita una versión de 400px (1x) y 800px (2x), y una versión de 1200px (3x) para teléfonos.

1. Empieza con una fuente al menos tan grande como tu objetivo más grande (3x).
2. Redimensionador de Imágenes a anchos 1x, 2x y 3x.
3. Compresor de Imágenes cada versión: los archivos 2x y 3x se comprimen mejor por píxel.
4. Exporta como WebP para obtener los archivos más pequeños de alta calidad.
5. Sirve todas las versiones y deja que el navegador elija.

• Nunca escales una imagen pequeña a 2x, ya que seguirá suave y solo será más pesada.
• El archivo 2x suele ser menos del doble de bytes que el 1x debido a la mejor compresión.
• Las versiones 3x son las que más importan para los teléfonos con pantallas pequeñas y densas.

¿Cómo servir la versión correcta con srcset?

El atributo srcset en una etiqueta <img> le dice al navegador qué archivo cargar basándose en el DPR de la pantalla. El navegador maneja la selección, por lo que tú proporcionas las opciones y la marca.

<img
  src="photo-1x.webp"
  srcset="photo-1x.webp 1x, photo-2x.webp 2x, photo-3x.webp 3x"
  alt="Texto alternativo descriptivo"
  width="400" height="300"
/>

• Los descriptores 1x, 2x y 3x mapean archivos a las relaciones de píxeles del dispositivo.
• El navegador carga solo la versión que coincide con la pantalla.
• Incluye siempre ancho y alto para evitar el desplazamiento del diseño (layout shift).
• El atributo src es el fallback para navegadores más antiguos.

Para imágenes responsivas que también cambian dimensiones a través del ancho de la pantalla, combina srcset con el atributo sizes y los descriptores de ancho (400w, 800w) en lugar de los descriptores DPR. La guía de imágenes responsivas cubre ese patrón más avanzado, y la guía de SEO de imágenes explica cómo las imágenes nítidas y correctamente dimensionadas también ayudan al rendimiento de búsqueda.

Cuándo usar SVG en lugar de ráster

Para logotipos, iconos e ilustraciones con formas planas, puedes evitar todo el problema 2x/3x usando SVG. Los gráficos vectoriales escalan infinitamente sin penalización de resolución: el mismo archivo SVG es nítido como una navaja en un monitor 1x y en un teléfono 3x, porque se dibuja a partir de matemáticas en lugar de almacenarse como píxeles.

SVG es la respuesta correcta siempre que la imagen esté hecha de formas en lugar de detalles fotográficos. La contrapartida es que los SVGs necesitan ser optimizados: metadatos sin usar y residuos del editor los hinchan, y la guía de SVG a PNG cubre el flujo de trabajo cuando realmente necesitas un fallback ráster para un entorno que no puede renderizar vectores. Para un sitio web corporativo con un logo en el encabezado, un SVG elimina por completo la pregunta Retina para ese elemento.

Probar tus imágenes Retina

Generar los archivos es la mitad del trabajo; verificar que carguen correctamente es la otra mitad. Algunas comprobaciones confirman que la configuración funciona en lugar de servir silenciosamente el archivo incorrecto.

1. Abre la página en un dispositivo Retina o establece el DPR del navegador a 2x en las herramientas de desarrollo.
2. Inspecciona el elemento de imagen y confirma que el currentSrc cargado es el archivo 2x o 3x.
3. Cambia a un DPR 1x y confirma que carga el archivo 1x en su lugar.
4. Revisa la pestaña red para verificar que solo se descargue una versión por pantalla.
5. Visualiza al 100% en la pantalla Retina y confirma que la imagen es nítida, no suave.

La anulación del DPR de píxeles del dispositivo en las herramientas de desarrollo del navegador te permite probar sin dispositivos físicos, aunque una pantalla Retina real es la prueba final. Un modo de fallo común es un error tipográfico en el srcset que hace que el navegador vuelva a usar el src base, lo cual se ve suave en Retina sin lanzar un error. La pestaña red detecta esto inmediatamente: si ves que se carga el archivo 1x en una pantalla 2x, el srcset no está conectado correctamente.

Equilibrando nitidez y peso de página

La trampa con las imágenes Retina es servir archivos de alta resolución a todas las pantallas, lo que duplica o triplica el peso de la página para los usuarios que no pueden ver la diferencia. El enfoque srcset evita esto, pero solo si realmente generas las versiones más pequeñas y las referencias. Un único archivo 3x servido a todos es el error más común.

La guía de web.dev sobre imágenes responsivas documenta el impacto en el rendimiento de hacerlo bien, y la guía de Core Web Vitals conecta directamente el peso de las imágenes con la métrica LCP que afecta el ranking. El objetivo es nitidez donde se muestra y contención en todas partes: deja que el navegador elija, y genera cada versión para que tenga algo bueno de qué elegir.

Preguntas frecuentes

¿Cómo hago nítidas las imágenes en pantallas Retina?

Sirve versiones 2x (y opcionalmente 3x) de imágenes ráster al tamaño de visualización, usando srcset para que el navegador elija el archivo correcto según la relación de píxeles del dispositivo. Una imagen 1x en una pantalla Retina se ve suave; la variante 2x restaura la nitidez.

¿Necesito imágenes 2x para todos los gráficos?

Para gráficos nítidos y fotos principales, sí: las pantallas Retina muestran suavidad por lo demás. Para imágenes decorativas o debajo del pliegue (below-the-fold), a menudo es suficiente con un solo archivo 1x. Sirve ambos con srcset para que los dispositivos no Retina no descarguen el archivo grande.

¿Cuándo debo usar SVG en lugar de ráster 2x?

Para logotipos, iconos y gráficos planos, sí: SVG es independiente de la resolución y se mantiene nítido a cualquier tamaño sin archivos adicionales. Para fotografías, ráster (con variantes 2x) sigue siendo la opción correcta. Consulta la guía de SVG a PNG.

¿Cómo sirvo imágenes Retina?

Usa srcset con fuentes 1x y 2x (y opcionalmente 3x), dejando que el navegador elija según la relación de píxeles del dispositivo. Envía el 1x como src predeterminado para que los navegadores más antiguos fallen limpiamente. El navegador descarga solo la variante que necesita.

¿Ralentiza srcset la página?

No: el navegador solo descarga la única variante que necesita, por lo que una pantalla pequeña obtiene el archivo pequeño. Sin srcset, cada dispositivo descarga el archivo más grande. srcset ahorra bytes, no los añade.