New! My 44-page ebook "CSS in 44 minutes" is out! 😃

Get it now →

# source

Defines a source for an <audio>, <video>, or <picture> element.

Example: Copy

Picture of a Ha Long Bay sunset 
<picture>
 <source
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  sizes="33.3vw">
 <source
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">
</picture>

src

The URL where the media is hosted.

"/images/tiramisu.jpg"

You can use a relative URL.

"https://htmlreference.io/images/traffic.jpg"

You can use an absolute URL.

srcset

Defines a list of different sources for the same media. The browser will choose the best one to use.

"/images/sunset-360.jpg 360w,
/images/sunset-720.jpg 720w,
/images/sunset-1440.jpg 1440w"

You can use a width descriptor like 360w. This value is divided by one of the source sizes (defined in the sizes attribute) to obtain the pixel density.

@html

sizes

Defines a list of different source sizes. You can combine each of them with a media query.

"(min-width: 800px) 1440px, 720px"

The browser will use the 1440px image (defined in srcset) if the viewport is larger than 800px.
It will use the 720px otherwise.

@html

type

Defines the MIME type of the source.

"image/jpg"

You can only use audio, video, or picture MIME types.

media

Defines a media query for a <picture> source.

"(min-width: 800px)"

The media will only be used on viewports larger than 800px.