HTML - Tags - <source>

#120 of 147

source

The source element

audio bgsound image img picture source track video

Media


 <html>
 <body>
     <picture>
         <source srcset="images/waterloo-2k.gif" media="(min-width: 1536px)" />
         <source srcset="images/waterloo-1k.gif" media="(min-width: 1024px)" />
         <img src="images/waterloo-300px.gif" style="max-width: 100%" />
     </picture>
 </body>
 </html>

The source element creates a reference to media content along with a media query that determines when it should be displayed.

A live example:

The resolution of the image will change as you resize your browser window.