Unidad 5. Imágenes (IX)

5.11. Etiqueta <picture>. Tipo de imagen

Otra posibilidad de la etiqueta picture es utilizar el tipo de imagen como condición.

Por ejemplo, en este caso si el dispositivo en el que se está viendo la página web es capaz de mostrar imágenes de tipo webp, se mostrará la imagen indicada en srcset, en caso contrario se ejecutará la siguiente instrucción, en este caso la etiqueta img.

<picture>

<source  type="image/webp" srcset="graficos/en_rio_pequenya_300.webp">

<img src="graficos/por_si_acaso.jpg" alt="Si no se cumple ninguna condición">

</picture>

Este tipo de condiciones se suelen usar si disponemos de más de una imagen de distinto tipo (webp, png, jpg, ...) y queremos que muestren preferentemente las de un tipo más nuevo y para asegurarnos la compatibilidad con los navegadores más antiguos colocamos también la imagen en un tipo de archivo más común, como jpg o png, en ese caso basta colocarlas en diferentes etiquetas source ordenadas según nuestras preferencias.

 Cursos Informática Gratuitos