<img src="https://picsum.photos/300/200"
  srcset="https://picsum.photos/300/200 300w,
          https://picsum.photos/600/400 600w,
          https://picsum.photos/900/600 900w"/>
        
<img src="https://picsum.photos/300/200" 
   sizes="50vw" 
  srcset="https://picsum.photos/300/200 300w,
          https://picsum.photos/600/400 600w,
          https://picsum.photos/900/600 900w"/>

<img src="images/space-needle.jpg" 
   sizes="(max-width: 40em) 100vw, 50vw" 
  srcset="images/space-needle.jpg 200w, 
          images/space-needle-2x.jpg 400w,
          images/space-needle-hd.jpg 600w">
      

Pixel Density

          
  <img 
    width="300px" 
    height="200px" 
    src="https://picsum.photos/300/200?image=1067" 
    srcset="https://picsum.photos/300/200?image=1067 1x,
            https://picsum.photos/600/400?image=1067 2x,
            https://picsum.photos/900/600?image=1067 3x" 
  />
        
      

Picture Element

<picture>

<source srcset="/image-600.webp" media="(max-width: 600px)" type="image/webp" />
<source srcset="/image-1200.webp" media="(max-width: 1200px)" type="image/webp" />
<source srcset="/image-1900.webp" type="image/webp" />

<source srcset="/image-600.jpg" media="(max-width: 600px)" />
<source srcset="/image-1200.jpg" media="(max-width: 1200px)" />
<source srcset="/image-1900.jpg" />

<img src="/image-1200.jpg" alt="image" />
</picture>