¿Qué es el Device Pixel Ratio (DPR)? Por qué las imágenes se ven borrosas en pantallas Retina

Pasas días diseñando un sitio web. Subes un logotipo PNG impecable y nítido, lo previsualizas en el monitor de tu ordenador de escritorio y todo se ve perfecto. Luego abres exactamente la misma página web en un iPhone, un MacBook o una pantalla 4K, y tu logotipo se ve apagado, suave y visiblemente borroso en los bordes.

Mientras tanto, el texto de esa misma página se ve con una definición asombrosa. Los títulos parecen grabados en cristal, pero las fotos, los iconos y los banners principales parecen sacados de un sitio web antiguo de 2005.

¿Por qué una pantalla cara de alta resolución hace que los gráficos se vean peor en lugar de mejor?

La respuesta se reduce a un solo número: Device Pixel Ratio (DPR) (Relación de píxeles del dispositivo).

Entender el DPR es una de las habilidades más prácticas que puedes adquirir como diseñador web, desarrollador frontend o propietario de un sitio. Una vez que comprendas cómo gestionan los navegadores las pantallas de alta densidad, nunca más volverás a subir una imagen borrosa ni a tener problemas con la entrega de recursos adaptables.

---

El problema principal: Píxeles de hardware vs. Píxeles de diseño

Para entender el DPR, debemos recordar cómo funcionaban los monitores de ordenador en el pasado.

Durante décadas, las pantallas digitales eran sencillas: un píxel en tu código equivalía a un diodo físico en el monitor.

Si tu monitor tenía una resolución nativa de 1024 × 768, contenía 1.024 emisores de luz RGB microscópicos horizontalmente y 768 verticalmente. Si escribías una línea de CSS como width: 200px;, tu navegador le ordenaba al monitor encender exactamente 200 puntos de hardware a lo largo del panel.

En aquel entonces, las pantallas tenían una densidad de aproximadamente 72 a 96 píxeles por pulgada (PPI). Un botón de 100 píxeles tenía prácticamente el mismo tamaño físico en casi cualquier monitor de oficina del planeta.

La revolución de los smartphones rompió esta regla

Todo cambió en 2010 cuando las pantallas de alta densidad (como la primera «Retina Display» de Apple en el iPhone 4) llegaron al mercado de consumo.

Los fabricantes de hardware introdujeron cuatro veces más píxeles en exactamente el mismo tamaño de panel físico. La pantalla de un iPhone, que antes albergaba 320 × 480 píxeles, pasó de repente a integrar 640 × 960 píxeles físicos en una pequeña pantalla de bolsillo de 3,5 pulgadas.

Ese salto generó una crisis inmediata para la web.

Si los navegadores hubieran seguido tratando un píxel CSS como un píxel físico:

• Un sitio web estándar diseñado para escritorio (de 960px de ancho) se habría reducido al tamaño de un sello postal.
• Los enlaces de navegación y los botones habrían medido solo 2 o 3 milímetros de ancho, siendo imposibles de pulsar con un dedo humano.
• El texto del cuerpo habría requerido una lupa para poder leerse.

Los navegadores no podían permitirse romper todos los sitios web de Internet. Para resolver esto, los ingenieros de navegadores y los grupos de estándares web dividieron el concepto de «píxel» en dos entidades completamente independientes:

1. Píxeles físicos (Píxeles de hardware): Los puntos de luz microscópicos reales integrados físicamente en el panel de la pantalla.
2. Píxeles CSS (Píxeles lógicos / Píxeles de referencia): Una unidad abstracta utilizada por los navegadores web para maquetación, tipografía, espaciado y media queries.

El Device Pixel Ratio (DPR) es simplemente el factor de conversión entre estos dos mundos.

---

¿Qué es exactamente el Device Pixel Ratio (DPR)?

El Device Pixel Ratio (DPR) es la proporción entre los píxeles físicos de hardware y los píxeles lógicos de CSS en una pantalla determinada.

$$\text{DPR} = \frac{\text{Píxeles físicos de hardware}}{\text{Píxeles lógicos CSS}}$$

También puedes entender el DPR como la respuesta a esta pregunta básica:

«¿Cuántos puntos físicos de hardware utiliza esta pantalla para dibujar una sola caja de 1px definida en mi hoja de estilos CSS?»

Así es como traducen esta fórmula los tipos de pantalla más habituales:

1. Pantallas estándar (DPR = 1.0)

• Qué significa: 1 píxel CSS = 1 píxel físico de hardware.
• Dónde se encuentran: Monitores de escritorio 1080p antiguos (24 o 27 pulgadas), portátiles de oficina económicos, televisores antiguos.
• Cómo se renderiza: Una imagen de 100 × 100 píxeles ocupa exactamente 100 × 100 diodos de hardware en la pantalla. No hay escalado, ni interpolación, ni deformación.

2. Pantallas High-DPI / Retina (DPR = 2.0)

• Qué significa: 1 píxel CSS = 2 píxeles físicos en cada eje.
• Dónde se encuentran: MacBook Air, MacBook Pro, iPad, monitores 4K configurados al 200% de escala, muchas tablets Android.
• Cómo se renderiza: Dado que los píxeles se calculan en dos dimensiones (ancho y alto), un área de $1 \times 1$ píxel CSS está respaldada por una cuadrícula de $2 \times 2$, lo que significa que se utilizan 4 píxeles físicos para dibujar una sola unidad lógica de diseño.

3. Pantallas móviles de densidad ultra alta (DPR = 3.0)

• Qué significa: 1 píxel CSS = 3 píxeles físicos en cada eje.
• Dónde se encuentran: iPhone 13 Pro hasta iPhone 16 Pro, serie Samsung Galaxy S, teléfonos insignia Google Pixel.
• Cómo se renderiza: Un área de $1 \times 1$ píxel CSS está respaldada por una cuadrícula de $3 \times 3$ diodos de hardware. Esto significa que se iluminan 9 puntos físicos de hardware por cada píxel CSS individual.

---

Tabla de referencia de DPR: Dispositivos populares

Dispositivo	Resolución física de pantalla	Tamaño del viewport CSS	Device Pixel Ratio (DPR)	Puntos físicos por píxel CSS
Monitor de oficina estándar de 24”	1920 × 1080	1920 × 1080	1.0x	1 punto ($1 \times 1$)
MacBook Air 13” (M2/M3)	2560 × 1664	1280 × 832	2.0x	4 puntos ($2 \times 2$)
MacBook Pro 16” (M3 Max)	3456 × 2234	1728 × 1117	2.0x	4 puntos ($2 \times 2$)
Monitor 4K de 27” (al 200% de escala)	3840 × 2160	1920 × 1080	2.0x	4 puntos ($2 \times 2$)
Portátil Windows de 14” (al 150% de escala)	1920 × 1080	1280 × 720	1.5x	2.25 puntos
iPhone 15 / 16 (Base)	2556 × 1179	393 × 852	3.0x	9 puntos ($3 \times 3$)
Samsung Galaxy S24 Ultra	3120 × 1440	384 × 832	3.0x	9 puntos ($3 \times 3$)
iPad Air 11”	2360 × 1640	1180 × 820	2.0x	4 puntos ($2 \times 2$)

¿Notas algo curioso en los portátiles con Windows?
Observa el DPR de 1.5x en el portátil con Windows. Mientras que Apple se ciñe estrictamente a escalas enteras (como 2.0x y 3.0x), la configuración de pantalla de Windows permite un escalado fraccionario (125%, 150%, 175%). Esto significa que el DPR puede ser un número decimal como 1.25 o 1.5.

---

¿Por qué las imágenes se ven borrosas en pantallas con DPR alto?

Ahora que entiendes que un iPhone o un MacBook utiliza entre 4 y 9 puntos de hardware por cada píxel de maquetación CSS, la causa de los gráficos borrosos resulta evidente.

Veamos un ejemplo concreto paso a paso:

Imagina que tienes el logotipo de un cliente. En tu hoja de estilos CSS, defines un tamaño de diseño claro:

.site-logo {
  width: 200px;
  height: 60px;
}

Para cubrir este espacio, exportas un archivo PNG llamado logo.png que mide exactamente 200 × 60 píxeles y lo colocas en tu página:

<img src="logo.png" class="site-logo" alt="Acme Corp">

Esto es lo que sucede entre bastidores según el monitor que utilice tu visitante:

Escenario A: Tu visitante usa un monitor de oficina 1080p (DPR = 1)

• El navegador reserva un espacio de 200 × 60 píxeles CSS en la pantalla.
• La pantalla tiene 1 punto de hardware por píxel CSS.
• Área total de hardware: $200 \times 60 = 12,000$ diodos de hardware.
• Tu archivo de imagen suministra: $200 \times 60 = 12,000$ píxeles de imagen.
• Resultado: Coincidencia perfecta 1 a 1. Cada píxel del archivo de imagen encaja exactamente en un píxel de hardware. El logotipo se ve totalmente nítido.

Escenario B: Tu visitante usa un MacBook Pro o un monitor 4K (DPR = 2)

• El navegador sigue reservando una caja de maquetación de 200 × 60 píxeles CSS para que el diseño del sitio no se desmorone.
• PERO la pantalla tiene un DPR de 2.0. ¡Esa caja de diseño abarca ahora 400 × 120 píxeles físicos de hardware!
• Área total de hardware: $400 \times 120 = 48,000$ diodos de hardware.
• Tu archivo de imagen sigue teniendo solo: $200 \times 60 = 12,000$ píxeles.
• ¡Al navegador le faltan de pronto 36.000 píxeles de datos visuales!
• Resultado: El navegador no tiene más remedio que estirar la imagen al doble de su tamaño original. Aplica una interpolación bilineal o bicúbica para calcular qué color deberían tener los píxeles que faltan. Los bordes se difuminan, las líneas nítidas se suavizan y el logotipo parece fuera de foco.

Escenario C: Tu visitante usa un iPhone 16 Pro (DPR = 3)

• La caja CSS de 200 × 60 cubre ahora 600 × 180 píxeles físicos ($108,000$ diodos de hardware).
• ¡Tu imagen de 12.000 píxeles se estira hasta alcanzar 9 veces su superficie de píxeles original!
• Resultado: Desenfoque grave, pixelación y texto difuso.

Por qué el texto no sufre este problema

Quizás te preguntes: si las imágenes se estiran, ¿por qué el texto HTML permanece nítido?

El texto no utiliza píxeles de mapa de bits (bitmap). Las fuentes son trazados vectoriales descritos matemáticamente mediante curvas y coordenadas (curvas de Bézier).

Cuando un navegador renderiza un párrafo de texto en una pantalla de 2x o 3x, el sistema operativo vuelve a renderizar la geometría de la tipografía directamente en la resolución física nativa de la pantalla. Calcula las curvas con máxima nitidez utilizando todos los 48.000 o 108.000 píxeles de hardware disponibles.

Por esa razón, las imágenes ráster borrosas resultan especialmente chirriantes en pantallas de alta densidad: ¡aparecen junto a una tipografía vectorial impecablemente definida!

---

Cómo comprobar tu DPR actual en cualquier navegador

No necesitas herramientas sofisticadas ni extensiones de navegador para comprobar el Device Pixel Ratio de la pantalla en la que estás leyendo esto ahora mismo.

Método 1: Usando la consola del navegador

1. Abre las herramientas de desarrollo de tu navegador (pulsa F12 en Windows/Linux o Cmd + Option + I en Mac).
2. Haz clic en la pestaña Consola (Console).
3. Escribe:

   window.devicePixelRatio

4. Pulsa Enter.

El número devuelto es el DPR activo exacto de tu pantalla. En un monitor estándar devolverá 1. En un MacBook Retina devolverá 2. En un iPhone devolverá 3.

Método 2: Detectar cambios de DPR en JavaScript

¿Sabías que el DPR puede cambiar dinámicamente sobre la marcha?

Si un usuario amplía con el zoom del navegador (Cmd + o Ctrl +), traslada una ventana de la pantalla del portátil a un monitor externo 1080p o cambia la escala de pantalla en la configuración de Windows, el DPR del navegador se actualiza al instante.

Puedes supervisar los cambios de DPR utilizando JavaScript moderno con matchMedia:

const updateDprNotice = () => {
  console.log(`El DPR actual ahora es: ${window.devicePixelRatio}`);
};

// Crear una media query que coincida con la resolución actual
const dprQuery = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);

// Escuchar cambios de resolución (por ejemplo, zoom o cambio de monitor)
dprQuery.addEventListener("change", updateDprNotice);

---

Cómo solucionar las imágenes borrosas: 5 estrategias comprobadas

Pasemos a la parte práctica. ¿Cómo nos aseguramos de que nuestros gráficos y fotos se vean con total claridad en todas las pantallas, sin enviar archivos gigantescos de carga lenta a monitores más antiguos?

Estas son las 5 técnicas estándar utilizadas en el desarrollo web moderno:

1. Utiliza SVG para logotipos, iconos y gráficos sencillos

Siempre que una imagen esté formada por formas geométricas, colores planos o logotipos, nunca la exportes como PNG o JPEG. Utiliza SVG (Scalable Vector Graphics) en su lugar.

Al igual que las fuentes, los archivos SVG son archivos vectoriales compuestos por coordenadas XML en lugar de cuadrículas de mapa de bits. Ya sea que se visualice en un monitor 1x, en un iPhone 3x o en una valla publicitaria impresa en 16K, el SVG se renderiza a la resolución física máxima de la pantalla con una nitidez matemáticamente perfecta.

<!-- Nítido en cualquier pantalla existente, peso de archivo minúsculo -->
<img src="/logo.svg" width="200" height="60" alt="Logotipo de la empresa">

Regla general:

• Logotipos, iconos, insignias de interfaz, flechas e ilustraciones vectoriales $\rightarrow$ SVG.
• Fotografía, capturas de pantalla detalladas y obras visuales complejas $\rightarrow$ Ráster con srcset adaptable (ver a continuación).

---

2. La regla del 2x para imágenes ráster (Solución rápida)

Si tienes una imagen ráster (como una foto de avatar o el retrato de un autor) que siempre se mostrará a un tamaño CSS fijo, por ejemplo, 80px × 80px:

1. Exporta el archivo de imagen al doble de resolución: 160px × 160px.
2. Guárdalo en un formato moderno como WebP o AVIF para mantener el peso del archivo reducido.
3. Restringe explícitamente las dimensiones en tu HTML o CSS al tamaño de visualización deseado:

<!-- El archivo físico es de 160x160, pero se limita a 80x80 píxeles CSS -->
<img src="/avatar@2x.webp" width="80" height="80" alt="Foto de perfil">

En un monitor 1x, el navegador submuestrea la imagen ligeramente, manteniéndola limpia. En una pantalla Retina 2x, cada diodo de hardware recibe información visual nativa, logrando una foto perfectamente definida.

---

3. Usa srcset con descriptores de densidad de píxeles (1x, 2x)

¿Qué ocurre si no quieres obligar a los visitantes con conexiones móviles lentas o pantallas estándar 1x a descargar archivos de imagen del doble de tamaño?

HTML ofrece compatibilidad nativa para alternar imágenes según el DPR utilizando el atributo srcset con descriptores de densidad (1x, 2x, 3x):

<img 
  src="/hero-800.webp" 
  srcset="/hero-800.webp 1x, 
          /hero-1600.webp 2x, 
          /hero-2400.webp 3x"
  width="800" 
  height="450" 
  alt="Espacio de trabajo moderno"
  loading="lazy">

Cómo evalúa esto el navegador:

• Un usuario en un PC de oficina estándar 1080p (DPR 1.0) descarga hero-800.webp (~45 KB).
• Un usuario en un MacBook Pro (DPR 2.0) descarga hero-1600.webp (~120 KB).
• Un usuario en un iPhone 16 Pro (DPR 3.0) descarga hero-2400.webp (~220 KB).

Cada dispositivo obtiene exactamente la densidad que puede mostrar físicamente, ahorrando ancho de banda y garantizando nitidez de forma automática.

---

4. Imágenes fluidas y adaptables con srcset y sizes (Para diseños dinámicos)

En sitios web adaptables (responsive), las imágenes rara vez se mantienen en un ancho fijo. La imagen de una tarjeta puede ocupar el 100% de la pantalla en móviles, pero solo el 33% dentro de una cuadrícula de 3 columnas en escritorio.

Cuando el ancho de la imagen varía según el tamaño de la pantalla, los descriptores de densidad (1x, 2x) no son suficientes. En su lugar, utiliza descriptores de ancho (w) combinados con el atributo sizes:

<img 
  src="/article-cover-800.webp"
  srcset="/article-cover-400.webp 400w,
          /article-cover-800.webp 800w,
          /article-cover-1200.webp 1200w,
          /article-cover-1600.webp 1600w"
  sizes="(max-width: 640px) 100vw, 
         (max-width: 1024px) 50vw, 
         33vw"
  width="800" 
  height="450" 
  alt="Comprender la resolución de pantalla"
  loading="lazy">

Por qué funciona a la perfección:

El navegador multiplica el tamaño del contenedor CSS renderizado por el Device Pixel Ratio de la pantalla:

• Un teléfono móvil tiene un viewport de 390px (con DPR 3.0). La imagen ocupa 100vw ($390\text{px}$). El navegador calcula: $$390\text{px} \times 3.0 = 1,170\text{ píxeles físicos necesarios}$$ Y selecciona article-cover-1200.webp.
• Un usuario de escritorio en 1080p tiene una ventana de navegador de 1280px (con DPR 1.0). La imagen ocupa 33vw ($422\text{px}$). El navegador calcula: $$422\text{px} \times 1.0 = 422\text{ píxeles físicos necesarios}$$ Y selecciona article-cover-400.webp.

Sin necesidad de JavaScript. El navegador realiza el cálculo óptimo antes de pintar un solo píxel.

---

5. Fondos CSS de alta densidad con image-set() o Media Queries

Si defines imágenes de fondo en tu hoja de estilos CSS, las media queries estándar o la función moderna image-set() te permiten servir recursos de alta densidad sin esfuerzo.

Opción A: Función moderna image-set() (Recomendado)

Compatible con todos los navegadores modernos (Chrome, Safari, Firefox, Edge):

.hero-banner {
  background-image: image-set(
    url("/hero-bg.webp") 1x,
    url("/hero-bg@2x.webp") 2x
  );
  background-size: cover;
  background-position: center;
}

Opción B: Media Queries CSS con min-resolution

Si necesitas un control detallado sobre breakpoints y densidad al mismo tiempo:

/* Fondo estándar 1x */
.card-header {
  background-image: url("/card-bg.webp");
  background-size: 300px 180px;
}

/* Fondo 2x Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .card-header {
    background-image: url("/card-bg@2x.webp");
  }
}

¿Por qué 192dpi?
La resolución base estándar en CSS está definida en 96 puntos por pulgada (DPI). Duplica eso para una pantalla 2x y obtienes $96 \times 2 = 192\text{dpi}$ (o 2dppx, que significa dots per pixel unit o puntos por unidad de píxel).

---

La trampa oculta: Canvas y WebGL en pantallas de alta densidad

Si trabajas con el elemento <canvas> de HTML5 (para gráficos interactivos, diagramas, videojuegos o paneles de firma digital), te toparás con el problema del desenfoque por DPR de forma aún más acusada.

Por defecto, un elemento canvas de HTML crea un búfer de dibujo basado exclusivamente en sus atributos HTML:

<!-- Canvas por defecto: Crea un búfer de dibujo de 300x150 -->
<canvas id="chart"></canvas>

Si aplicas estilos CSS a este canvas para adaptarlo a tu diseño:

#chart {
  width: 300px;
  height: 150px;
}

En un MacBook o un monitor 4K, el texto y las líneas dentro del canvas se verán sorprendentemente borrosos.

¿Por qué? Porque el canvas generó un búfer de mapa de bits de tan solo 300 × 150 píxeles, ¡y el navegador estiró ese pequeño mapa de bits sobre un área física de hardware de 600 × 300!

La forma correcta de renderizar un Canvas HTML nítido en pantallas Retina:

Para corregir esto, debes escalar el búfer interno de dibujo del canvas mediante window.devicePixelRatio manteniendo bloqueado su tamaño de visualización en CSS:

const canvas = document.getElementById("chart");
const ctx = canvas.getContext("2d");

// Tamaño de diseño deseado en píxeles CSS
const cssWidth = 300;
const cssHeight = 150;

// Obtener la densidad de pantalla actual
const dpr = window.devicePixelRatio || 1;

// 1. Establecer el tamaño del búfer físico multiplicado por el DPR
canvas.width = cssWidth * dpr;
canvas.height = cssHeight * dpr;

// 2. Fijar el tamaño visual en la página usando píxeles CSS
canvas.style.width = `${cssWidth}px`;
canvas.style.height = `${cssHeight}px`;

// 3. Escalar todas las operaciones de dibujo para que las coordenadas sigan en unidades CSS
ctx.scale(dpr, dpr);

// Ahora dibuja tus formas con normalidad: ¡se renderizarán completamente nítidas!
ctx.fillStyle = "#2563eb";
ctx.fillRect(20, 20, 100, 50);

Este sencillo fragmento de código garantiza que bibliotecas de gráficos, motores de juegos y aplicaciones de dibujo vectorial se rendericen con una nitidez impecable en pantallas Retina.

---

Rendimiento vs. Nitidez: Cómo encontrar el equilibrio ideal

Ahora que sabes cómo servir imágenes 2x y 3x, surge una pregunta importante: ¿Deberías servir imágenes 3x a todos los smartphones modernos?

En prácticamente todos los casos, la respuesta es no.

Esta es la razón:

1. Rendimientos decrecientes para el ojo humano:
   En un smartphone moderno sostenido a una distancia de lectura habitual (de 25 a 30 cm), la vista humana no puede distinguir píxeles individuales una vez que la densidad supera aproximadamente los 300 a 350 PPI. Una imagen 2x en una pantalla de smartphone 3x es indistinguible de una imagen 3x real para el 99% de los usuarios.

2. Aumento exponencial del tamaño de archivo:
   El área de píxeles escala de forma cuadrática:

   • Una imagen 1x tiene 1x de datos.
   • Una imagen 2x tiene 4x de datos ($2 \times 2$).
   • Una imagen 3x tiene 9x de datos ($3 \times 3$).

   Servir imágenes 3x reales para fotografías grandes puede convertir una imagen WebP razonable de 120 KB en un archivo descomunal de 800 KB. Eso consume planes de datos móviles, perjudica las Core Web Vitals (especialmente Largest Contentful Paint / LCP) y ralentiza los tiempos de carga de la página.

Las mejores prácticas recomendadas para 2026:

• UI vectorial (Logos e iconos): Utiliza siempre SVG. Cero desenfoque y peso de archivo diminuto.
• Fotos estándar y banners principales: Limita tu srcset adaptable a un máximo de 2.0x. Servir imágenes 2x a teléfonos 3x proporciona el 95% de la nitidez visual ahorrando hasta un 60% de ancho de banda.
• Compresión moderna: Codifica siempre tus imágenes de alta resolución utilizando WebP o AVIF. Dado que las pantallas de alta densidad empaquetan los píxeles con tanta proximidad, puedes aplicar con seguridad una compresión ligeramente mayor (ajuste de calidad alrededor de 75–80) sin degradación visual apreciable.

---

Preguntas frecuentes

¿Cuál es la diferencia entre PPI, DPI y DPR?

• PPI (Pixels Per Inch / Píxeles por pulgada): La densidad física del hardware: cuántos emisores de luz reales caben en una pulgada física del panel.
• DPI (Dots Per Inch / Puntos por pulgada): Originalmente un término de impresión que describe cuántos puntos de tinta rocía una impresora por pulgada. En desarrollo web se suele utilizar como sinónimo de PPI.
• DPR (Device Pixel Ratio / Relación de píxeles del dispositivo): Un multiplicador por software utilizado por navegadores y sistemas operativos para traducir unidades lógicas de diseño (píxeles CSS) en píxeles físicos de hardware.

¿Por qué mi monitor 4K reporta una resolución de 1920 × 1080?

Si tienes una pantalla 4K (3840 × 2160) y Windows o macOS tiene configurado el escalado de pantalla al 200%, el sistema operativo informa a los navegadores web de que el ancho de tu escritorio es de 1920 × 1080 píxeles lógicos, con un Device Pixel Ratio de 2.0.

Tu monitor sigue mostrando una auténtica imagen en 4K. El sistema operativo simplemente utiliza grupos de 4 píxeles físicos ($2 \times 2$) para renderizar cada píxel lógico del escritorio, evitando así que el texto y las ventanas sean ridículamente pequeños e imposibles de leer.

¿Puede el DPR ser un número decimal como 1.25 o 1.5?

Sí. En dispositivos con Windows y ChromeOS, los usuarios pueden configurar porcentajes de escala personalizados como 125%, 150% o 175%. Cuando un usuario ajusta el escalado de pantalla al 150%, la propiedad window.devicePixelRatio del navegador pasa a ser 1.5.

¿Hacer zoom en el navegador cambia el DPR?

¡Sí! Al presionar Ctrl + o Cmd + para hacer zoom en una página web, los navegadores modernos no estiran la página como una lupa. En su lugar, aumentan el valor de window.devicePixelRatio, lo que recalcula la maquetación e incita a los atributos srcset adaptables a solicitar recursos de imagen más nítidos.

---

Conclusiones clave

1. Existen dos tipos de píxeles: Los píxeles físicos son los diodos de hardware de la pantalla; los píxeles CSS son los bloques de construcción de maquetación que emplean los navegadores.
2. El DPR es el factor de conversión: El DPR indica cuántos puntos físicos se utilizan para dibujar un solo píxel CSS.
3. El motivo del desenfoque: Cuando una imagen solo proporciona 1 píxel de imagen para un área respaldada por 4 o 9 puntos físicos, el navegador tiene que estirarla, lo que provoca desenfoque.
4. Prioriza el uso de SVG: Cualquier forma geométrica, icono o logotipo que pueda ser vectorial debe ser SVG.
5. Apunta a 2x para fotos: Para fotografía ráster, servir recursos en 2x mediante srcset proporciona nitidez Retina sin sobrecargar el peso de la página.

¿Quieres comprobar qué valores reporta tu propio dispositivo en este instante? Vuelve a nuestra herramienta en la página de inicio en WhatIsMyScreenResolutions.com para ver tu viewport en directo, tu resolución de pantalla y tu Device Pixel Ratio medidos al instante.