Edit in JSFiddle

<!-- Defining the width of the image being referenced with the w descriptor -->
<img src="https://placehold.it/100x100"
srcset="https://placehold.it/100x100 100w, https://placehold.it/200x100 200w, https://placehold.it/300x100 300w" alt="My FPO img" />

<img src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 600w, https://placehold.it/1200x100 1200w, https://placehold.it/1800x100 1800w" alt="My FPO img" />

<img src="https://placehold.it/2000x100" srcset="https://placehold.it/2000x100 2000w, https://placehold.it/4000x100 4000w, https://placehold.it/6000x100 6000w" alt="My FPO img" />

<!-- Defining device-pixel ratio with the x descriptor -->

<!-- Example does not flex with browser resize -->
<img src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 1x, https://placehold.it/1200x200 2x, https://placehold.it/1800x300 3x" alt="My FPO img" />

<!-- With the responsive-image class, the following example does flex with browser resize -->
<img class="responsive-img" src="https://placehold.it/600x100" srcset="https://placehold.it/600x100 1x, https://placehold.it/1200x200 2x, https://placehold.it/1800x300 3x" alt="My FPO img" />
.responsive-img {
      max-width: 100%;
      height: auto;
      width: 100%;
}