Cómo usar descriptores de densidad

Katie Hempenius
Katie Hempenius
X

Explorar 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 quieres conocer densidades de pantallas específicas, puedes probar los siguientes dispositivos:

Densidad 1x Guía para BlackBerry, muchos monitores externos
Densidad el doble iPad o iPhone 5/6
Densidad 3 veces mayor Galaxy S5 o iPhone X
  • Consulta index.html para obtener el código que hace que esto funcione.

¿Cómo funciona?

El concepto de descriptores de densidad puede resultar desconocido para la mayoría de las personas. Para entenderlas mejor, es útil conocer un poco más el funcionamiento del navegador con los píxeles.

Qué son los píxeles

Comencemos por definir qué es un píxel. Parece sencillo, pero "pixel" 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 en 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 pantalla") mide la densidad de píxeles del dispositivo en un área física determinada. Por lo general, se mide con píxeles por pulgada (PPP).

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

Esto comenzó a cambiar cuando los monitores LED se hicieron comunes en la década del 2000. En particular, Apple causó una gran 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 visualización más reciente, los "píxeles de dispositivo" comenzaron a variar en tamaño físico y forma, y ya no eran del mismo tamaño que los "píxeles 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 dio lugar a la introducción de devicePixelRatio (a veces llamada "relació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 PPP tiene un devicePixelRatio de 2 (192 ppp/96 ppp = 2) porque "2 de sus píxeles de la pantalla tienen el tamaño de 1 píxel CSS".

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

Entonces, ¿cómo se aplica en realidad esta información?

Tamaño de las imágenes según la proporción 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 imagen 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 de dispositivo = 1 píxel CSS 250 píxeles de ancho
2 2 píxeles de dispositivo = 1 píxel CSS 500 píxeles de ancho
3 3 píxeles de dispositivo = 1 píxel CSS 750 píxeles de ancho

Información que debes tener en cuenta:

  • Las dimensiones de píxeles que se muestran en editores de imágenes, directorios de archivos y otros lugares son una medida de píxeles lógicos.
  • Para pantallas de mayor resolución y pantallas más grandes, necesitarás imágenes con mayores dimensiones. El hecho de ampliar las imágenes más pequeñas anula el propósito de entregar varias versiones de imagen. 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 de

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

  • Revisa el archivo index.html y observa el elemento <img>.
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

Este ejemplo está escrito en palabras:

  • 1x, 2x y 3x son descriptores de densidad que le indican al navegador la densidad de píxeles a la que está destinada 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 (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 usarla:

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