Prueba esta demostración
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa
. - Vuelve a cargar la app con diferentes tamaños de navegador. Observa lo diferentes que son las imágenes: no solo tienen diferentes tamaños, sino también diferentes recortes y relaciones de aspecto.
¿Qué sucede aquí?
La dirección de arte muestra diferentes imágenes en diferentes tamaños de pantalla.
Una imagen responsiva carga diferentes tamaños de la misma imagen. La dirección de arte lleva esto un paso más allá y carga imágenes completamente diferentes según la pantalla.
Usa la dirección de arte para mejorar la presentación visual. Por ejemplo, los diferentes recortes de imágenes de esta demostración garantizan que el punto de interés (la flor) siempre se muestre en detalle, independientemente de la pantalla. Los beneficios de la dirección de arte son puramente 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 de arte de esta demostración.
Cómo funciona el código
La dirección de arte usa las etiquetas <picture>, <source> y <img>.
foto
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 medios que muestra un valor verdadero. Si ninguna de las consultas de medios coincide, el navegador recurre a la carga de la imagen especificada por <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>, carga la imagen que especifica la etiqueta <img>.