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:
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 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 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 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 PPP tiene una devicePixelRatio
de 2 (192 ppp/96 ppi = 2) porque "2 de sus píxeles de pantalla tienen el tamaño de 1 píxel de 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 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 lo mejor posible en pantallas de alta resolución, es necesario proporcionar diferentes versiones de imágenes para los distintos 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 si la imagen de origen es... |
---|---|---|
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 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 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 en palabras:
1x
,2x
y3x
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 de1.0
),flower-2x.jpg
(para navegadores con una densidad de píxeles de2.0
) yflower-3x.jpg
(para navegadores con una densidad de píxeles de3.0
). flower.jpg
es la imagen de resguardo para los navegadores que no son compatibles consrcset
.
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 como2x
. - 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 atributosizes
solo se usa con descriptores de ancho.