Descripción
El elemento picture permite a los desarrolladores proporcionar varias versiones de una imagen y permite al navegador elegir la mejor opción en función de su capacidad y las condiciones de la red.
Es especialmente útil para las imágenes responsivas, ya que permite especificar diferentes imágenes para diferentes resoluciones y tamaños de pantalla. También puede ser útil para las condiciones de baja conexión, al proporcionar versiones más pequeñas y menos detalladas de las imágenes.
Sintaxis
El elemento picture está compuesto por una serie de etiquetas source y una etiqueta img al final.
<picture>
<source>
<img>
</picture>
Atributos Globales
- accesskey
- autocapitalize
- autofocus
- contenteditable
- dir
- draggable
- enterkeyhint
- hidden
- inputmode
- is
- itemid
- itemprop
- itemref
- itemscope
- itemtype
- lang
- nonce
- spellcheck
- style
- tabindex
- title
- translate
Ejemplo
<picture>
<source media="(min-width: 650px)" srcset="imagen_media.jpg">
<source media="(min-width: 465px)" srcset="imagen_mini.jpg">
<img src="imagen.jpg" alt="Flowers" style="width:auto;">
</picture>
Artículos
Vídeos HTML
Disfruta también de nuestros artículos sobre HTML en formato vídeo. Aprovecha y suscribete a nuestro canal.