I want to use responsive images with the help of the srcset attribute.
At the moment the browser (Google Chrome) doesn't take the correct-sized image. It always uses the largest resolution of the image.
This is my html code:
<div style="text-align: center;">
<a href="images/images/categories/map-hd.webp" class="jcepopup" style="margin-left: auto; margin-right: auto;" data-mediabox="1" data-mediabox-title="Quelle: xy">
<picture>
<source srcset="images/images/categories/map-hd.webp" media="(min-width: 501px)" />
<source srcset="images/images/categories/map-1x.webp" media="(max-width: 500px)" /> <img src="images/images/categories/map-hd.webp" srcset="images/images/categories/map-hd.webp 1200w,images/images/categories/map-1x.webp 500w" alt="fyrakk raid amirdrassil hd" width="700" height="394" id="fyrakk-raid-amirdrassil" class="lazy imagepopup" style="display: block; margin-left: auto; margin-right: auto;" />
</picture>
</a></div>
If I look in the Google Chrome's developer tools I see that it always uses the map-hd image no matter what resolution I test. For testing, I'm using the incognito modus so no cached images are used.
I can't find a working solution. So what would be the correct way?