Skip to main content

<source> ↔ Media Source Inline Element to specify media resource for <audio\>, <picture\> or <video\>

Media Query for <source\>

<picture\>
  <source srcset="logo-md.png" media="(min-width: 800px)" /\>
  <source srcset="logo-sm.png" media="(min-width: 600px)" /\>
  <img src="logo-mob.png" alt="MDN Web Docs" /\>
</picture\>
<picture\>
  <source srcset="landscape.png" media="(min-width: 1000px)" width="1000" height="400"\>
  <source srcset="square.png" media="(min-width: 800px)" width="800" height="800"\>
  <source srcset="portrait.png" media="(min-width: 600px)" width="600" height="800"\>
  <img src="fallback.png" alt="Image when browser not support sources" width="500" height="400"\>
</picture\>

or combine srcset as csv

<img src="logo.png" srcset="logo-sm.png 300w, logo-md.png 800w, logo-l.png 1200w" alt="describe something" /\>

AVIG>WebP

References​