Prueba esta demostración
- Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona
Pantalla completa
- Vuelve a cargar la app con distintos tamaños de navegador. ¿Notas lo diferentes que son las imágenes no solo son de diferentes tamaños, sino también diferentes cultivos y relaciones de aspecto.
¿Qué sucede aquí?
Dirección artística muestra distintas imágenes en distintos tamaños de visualización.
Una imagen responsiva carga diferentes tamaños de la misma imagen. Toma la dirección artística esto un paso más allá y carga imágenes completamente diferentes según el pantalla.
Usar la dirección artística para mejorar la presentación visual. Por ejemplo, los diferentes los recortes de imágenes en esta demostración garantizan que el lugar de interés (la flor) esté siempre en detalle, independientemente de la pantalla. Los beneficios de la dirección de arte puramente estética; no ofrece un beneficio de rendimiento respecto de las imágenes responsivas.
Consulta el código
- Consulta
index.htmlpara consultar el código de dirección artística de esta demostración.
Cómo funciona el código
En la dirección artística, se usa
<picture>,
<source>,
y <img>.
fotografía
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 true. 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 lo hacen
admitir la etiqueta <picture>.
Si un navegador no admite la etiqueta <picture>, carga el archivo
especificada por la etiqueta <img>.