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
  media="(min-width: 800px)"
  srcset="/images/sunset-360.jpg 360w,
          /images/sunset-720.jpg 720w,
          /images/sunset-1440.jpg 1440w"
  srcset="/images/sunset-720.jpg 2x,
          /images/sunset-360.jpg 1x">
 <img src="/images/sunset.jpg" alt="Picture of a Ha Long Bay sunset">


The URL where the media is hosted.


You can use a relative URL.


You can use an absolute URL.


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.



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.



Defines the MIME type of the source.


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


Defines a media query for a <picture> source.

"(min-width: 800px)"

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