Atributo srcset del elemento HTML <source>

Definición y uso

srcset Este atributo especifica las URLs de las imágenes a utilizar en diferentes situaciones.

Cuando se utiliza <source> para <picture> En este caso, este atributo es obligatorio.

Ejemplo

Un elemento <picture> que contiene dos archivos de origen y una imagen de respaldo:

<picture>
  <source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
  <source media="(min-width:465px)" srcset="img_white_flower.jpg">
  <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>

Prueba por tu cuenta

Sintaxis

<source srcset="URL">

Valor del atributo

Valor Descripción
URL

Define la URL de la imagen.

Valores posibles:

  • URL absoluta - Se refiere a otro sitio web (por ejemplo, href="http://www.example.com/flower.jpg")
  • URL relativa - Se refiere a un archivo dentro del sitio web (por ejemplo, href="flower.jpg")

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0