Cómo usar descriptores de densidad

Katie Hempenius

Explora esta demostración

• Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa.
• Vuelve a cargar la página con diferentes dispositivos para ver cómo el navegador carga diferentes imágenes.

Para ello, puedes usar el emulador del dispositivo. Si buscas densidades de pantalla específicas, estos son algunos dispositivos que puedes probar:

• Consulta index.html para ver el código que hace que esto funcione.

¿Cómo funciona?

Es posible que la mayoría de las personas no estén familiarizadas con el concepto de descriptores de densidad. Para comprenderlos mejor, es útil tener algunos conocimientos previos sobre cómo funciona el navegador con los píxeles.

Qué son los píxeles

Comencemos desde el principio definiendo qué es un píxel. Esto suena sencillo, pero "píxel" puede tener muchos significados:

Píxel del dispositivo (también conocido como "píxel físico")

Es el punto de color más pequeño que se puede mostrar en un dispositivo.

Píxel lógico

Es la información que especifica el color en una ubicación en particular de una cuadrícula. Este tipo de píxel no tiene un tamaño físico inherente.

Píxel de CSS

La especificación de CSS define un píxel como una unidad de medida física. 1 píxel = 1/96 de pulgada.

Densidad de píxeles

La densidad de píxeles (también conocida como "densidad de la pantalla" o "densidad de la pantalla") mide la densidad de los píxeles del dispositivo en un área física determinada. Por lo general, se mide en píxeles por pulgada (ppi).

Durante muchos años, 96 ppp fue una densidad de pantalla muy común (por lo que CSS define un píxel como 1/96 de pulgada). Desde la década de 1980, era la resolución predeterminada de Windows. Además, era la resolución de los monitores de CRT.

Esto comenzó a cambiar a medida que los monitores LED se volvieron comunes en la década de 2000. En particular, Apple tuvo un gran impacto en 2010 cuando introdujo las pantallas Retina. Estas pantallas tenían una resolución mínima de 192 ppp, que era el doble de la resolución de las pantallas "normales" (192 ppp/96 ppp = 2).

window.devicePixelRatio

Con la introducción de una tecnología de pantalla más nueva, los "píxeles del dispositivo" comenzaron a variar en tamaño físico y forma, y ya no tenían el mismo tamaño que los "píxeles de CSS". La necesidad de definir la relación entre el tamaño de los "píxeles del dispositivo" y los "píxeles CSS" es lo que llevó a la introducción de devicePixelRatio (a veces llamada "relación de píxeles CSS").

devicePixelRatio define la relación entre los píxeles del dispositivo y los píxeles CSS para un dispositivo en particular. Un dispositivo de 192 ppi tiene un devicePixelRatio de 2 (192 ppi/96 ppi = 2) porque "2 de sus píxeles de pantalla tienen el tamaño de 1 píxel CSS".

En la actualidad, la mayoría de los dispositivos tienen una relación de píxeles del dispositivo entre 1.0 y 4.0.

• Para determinar la densidad de píxeles de un dispositivo, escribe window.devicePixelRatio en la consola.

• Consulta esta tabla para ver las relaciones de píxeles de los dispositivos comunes. La mayoría se encuentran entre 1.0 y 4.0.

Entonces, ¿cómo aplicas esta información?

Ajusta el tamaño de las imágenes según las relaciones de píxeles del dispositivo

Para que las imágenes se vean lo mejor posible en pantallas de alta resolución, es necesario proporcionar diferentes versiones de imágenes para los distintos devicePixelRatios.

Información que debes tener en cuenta:

• Las dimensiones de píxeles que se indican en los editores de imágenes, los directorios de archivos y otros lugares son una medición de píxeles lógicos.
• Para pantallas de mayor resolución y pantallas más grandes, necesitarás imágenes con dimensiones más grandes. Simplemente agrandar las imágenes más pequeñas desvirtúa el propósito de publicar varias versiones de imágenes. El navegador habría hecho esto de todas formas si no se hubiera proporcionado una imagen de alta resolución.

Usa descriptores de densidad para publicar varias imágenes

Los descriptores de densidad, junto con el atributo "srcset", se pueden usar para entregar diferentes imágenes a diferentes devicePixelRatios.

• Observa el archivo index.html y toma nota del elemento <img>.

<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Este ejemplo se expresa de la siguiente manera:

• 1x, 2x y 3x son descriptores de densidad que le indican al navegador la densidad de píxeles para la que está diseñada una imagen. Esto evita que el navegador necesite descargar una imagen para determinar esta información.
• El navegador puede elegir entre tres imágenes: flower-1x.jpg (para navegadores con una densidad de píxeles de 1.0), flower-2x.jpg (para navegadores con una densidad de píxeles de 2.0) y flower-3x.jpg (para navegadores con una densidad de píxeles de 3.0).
• flower.jpg es la imagen de resguardo para navegadores que no admiten srcset.

Cómo usar esta función:

• Usa devicePixelRatio y la unidad x para escribir descriptores de densidad. Por ejemplo, el descriptor de densidad de muchas pantallas Retina (window.devicePixelRatio = 2) se escribiría como 2x.
• Si no se proporciona un descriptor de densidad, se supone que es 1x.
• Incluir descriptores de densidad en los nombres de archivo es una convención común (y te ayudará a hacer un seguimiento de los archivos), pero no es necesario. Las imágenes pueden tener cualquier nombre de archivo.
• No es necesario incluir un atributo sizes. El atributo sizes solo se usa con descriptores de ancho.