New! My 44-page ebook "CSS in 44 minutes" is out! 😃
# source
Defines a source for an <audio>
, <video>
, or <picture>
element.
Example: Copy
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"
/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.