Cómo usar descriptores de densidad

Katie Hempenius
Katie Hempenius
X

Explora esta demostración

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa 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, estos son algunos dispositivos que puedes probar:

Densidad de 1x Blackberry Playbook, muchos monitores externos
Densidad 2 veces 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 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). 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ó sensación en 2010 cuando presentó 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 reciente, 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 está 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 de la mejor manera posible en pantallas de alta resolución, es necesario proporcionar diferentes versiones de imágenes para diferentes devicePixelRatios.

Relació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…
1 1 píxel del dispositivo = 1 píxel CSS 250 píxeles de ancho
2 2 píxeles del dispositivo = 1 píxel CSS 500 píxeles de ancho
3 3 píxeles del dispositivo = 1 píxel CSS 750 píxeles de ancho

Información que debes tener en cuenta:

  • Las dimensiones de píxeles que se enumeran 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 lo habría hecho de todos modos si no se proporcionaba 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 los navegadores que no son compatibles con srcset.

Cómo usar esta función:

  • Usa un 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.