Prueba esta demostración
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Vuelve a cargar la app usando diferentes tamaños de navegador. Observa lo diferentes que son las imágenes: no solo tienen distintos tamaños, sino también diferentes recortes y relaciones de aspecto.
¿Qué sucede aquí?
La dirección artística muestra diferentes imágenes en distintos tamaños de visualización.
Una imagen responsiva carga diferentes tamaños de la misma imagen. La dirección artística lleva esto un paso más allá y carga imágenes completamente diferentes según la pantalla.
Usa la dirección artística para mejorar la presentación visual. Por ejemplo, los diferentes recortes de imágenes de esta demostración garantizan que el lugar de interés (la flor) se muestre siempre en detalle, sin importar la pantalla. Los beneficios de la dirección artística son meramente estéticos: no proporcionan ningún beneficio de rendimiento en comparación con las imágenes responsivas.
Consulta el código
- Consulta
index.htmlpara ver el código de dirección artística de esta demostración.
Cómo funciona el código
La dirección artística utiliza las etiquetas <picture>, <source> y <img>.
imagen
La etiqueta <picture> proporciona un wrapper para cero o más etiquetas <source> y una etiqueta <image>.
source
La etiqueta <source> especifica un recurso multimedia.
El navegador usa la primera etiqueta <source> con una consulta de contenido multimedia que muestra el resultado verdadero. Si ninguna de las consultas de medios coincide, el navegador vuelve a cargar la imagen especificada por el <img>.
que tengan la misma etiqueta de red.
img
La etiqueta <img> hace que este código funcione en navegadores que no admiten la etiqueta <picture>.
Si un navegador no admite la etiqueta <picture>, cargará la imagen especificada por la etiqueta <img>.