Dirección artística

Katie Hempenius
Katie Hempenius

  • Para obtener una vista previa del sitio, presiona Ver app. Luego, presiona Pantalla completa 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.

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.html para 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>.