Cómo usar descriptores de densidad

Katie Hempenius
Katie Hempenius
X

Explora esta demostración

  • Para obtener una vista previa del sitio, presiona View App y, luego, Fullscreen 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 de dispositivos. Si buscas densidades de pantalla específicas, aquí tienes algunos dispositivos para probar:

Densidad de 1x Blackberry Playbook, muchos monitores externos
Densidad 2x iPad o iPhone 5/6
Densidad 3x Galaxy S5 o iPhone X
  • 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 conozcan el concepto de descriptores de densidad. Para comprenderlas mejor, es útil tener un poco de información sobre cómo funciona el navegador con los píxeles.

¿Qué son los píxeles?

Comencemos por definir qué es un píxel. Esto parece simple, 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 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 pantalla" o "densidad de visualización") mide la densidad de 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 ppi fue una densidad de pantalla muy común (por lo que CSS define un píxel como 1/96 de pulgada). A partir de la década de 1980, fue la resolución predeterminada de Windows. Además, era la resolución de los monitores CRT.

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

window.devicePixelRatio

Con la introducción de una tecnología de visualización 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 de CSS" es lo que llevó a la introducción de la devicePixelRatio (a veces llamada "proporción de píxeles de CSS").

devicePixelRatio define la relación entre los píxeles del dispositivo y los píxeles de 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 de CSS".

En la actualidad, la mayoría de los dispositivos tienen una proporción de píxeles de 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 proporciones de píxeles de los dispositivos comunes. La mayoría se encuentra entre 1.0 y 4.0.

¿Cómo se aplica esta información?

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

Para que las imágenes se vean de la mejor manera en pantallas de alta resolución, es necesario proporcionar diferentes versiones de imagen para diferentes devicePixelRatios.

Proporción de píxeles del dispositivo Indica lo siguiente: En este dispositivo, una etiqueta <img> con un ancho de CSS de 250 píxeles se verá mejor cuando la imagen de origen sea de…
1 1 píxel de dispositivo = 1 píxel de CSS 250 píxeles de ancho
2 2 píxeles de dispositivo = 1 píxel de CSS 500 píxeles de ancho
3 3 píxeles de dispositivo = 1 píxel de CSS 750 píxeles de ancho

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 medida de píxeles lógicos.
  • Para pantallas de mayor resolución y más grandes, necesitarás imágenes con dimensiones más grandes. Ampliar las imágenes más pequeñas anula el propósito de publicar varias versiones de imágenes. El navegador lo habría hecho de todos modos 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 proporcionar 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 puede explicar 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 tenga que descargar una imagen para determinar esta información.
  • El navegador puede elegir entre tres imágenes: flower-1x.jpg (destinada a navegadores con una densidad de píxeles de 1.0), flower-2x.jpg (destinada a navegadores con una densidad de píxeles de 2.0) y flower-3x.jpg (destinada a navegadores con una densidad de píxeles de 3.0).
  • flower.jpg es la imagen de resguardo para los navegadores que no admiten srcset.

Cómo usar esta información:

  • Usa un devicePixelRatio y la unidad x para escribir descriptores de densidad. Por ejemplo, el descriptor de densidad para 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 realizar 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.