Prueba esta demostración
- Para obtener una vista previa del sitio, presiona View App y, luego,
Fullscreen
. - 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 distintos tamaños de pantalla.
Una imagen responsiva carga diferentes tamaños de la misma imagen. La dirección de arte va 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 imagen 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 proporciona ningún beneficio de rendimiento sobre 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>.
picture
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 devuelve un valor verdadero. Si ninguna de las consultas de medios coincide, el navegador recurre 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>, carga la imagen especificada por la etiqueta <img>.