<h1>Sizes affect how the image is shown</h1>
<h2>No srcset -> Image has natural width:</h2>
<img src="https://via.placeholder.com/300x150.png"/>

<h2>srcset (300w) without sizes -> Image gets streched to 100vw:</h2>
<img src="https://via.placeholder.com/300x150.png"
     srcset="https://via.placeholder.com/300x150.png 300w"/>

<h2>srcset (300w) without sizes but CSS width (300px) -> Too big image would be loaded if available and viewport > 300px:</h2>
<img src="https://via.placeholder.com/300x150.png"
     srcset="https://via.placeholder.com/300x150.png 300w"
     class="img-300w"/>

<h2>srcset (300w) with sizes (300px) -> Image gets displayed correctly:</h2>
<img src="https://via.placeholder.com/300x150.png"
     srcset="https://via.placeholder.com/300x150.png 300w"
     sizes="300px"/>

<h2>srcset (300w) with wrong sizes (150px) -> Image gets displayed too small:</h2>
<img src="https://via.placeholder.com/300x150.png"
     srcset="https://via.placeholder.com/300x150.png 300w"
     sizes="150px"/>

.img-300w {
  width: 300px;
}