Why srcset does not work in HTML img tag?

Gooldzik 0
Viewed 27

I have a problem with srcset in HTML img tag

<img class="attachment-large size-large" src="/userdata/public/assets/Kopia-jesien-3-1-e1648761286743-1024x694.jpg" sizes="(max-width: 1024px) 100vw, 1024px" srcset="/userdata/public/assets/Kopia-jesien-3-1-e1648761286743-1024x694.jpg 1024w, /userdata/public/assets/jesien-300.jpeg 300w, /userdata/public/assets/jesien-768.jpeg 768w, /userdata/public/assets/jesien-585.jpeg 585w" alt="" width="1024" height="694">

It does not work. URL image is correct.

When I change the page window width, another image is not loading, but it is still the same (1024x694) and it becomes very ugly.

image html
1 Answers

Have you taken a look at this

Note: When testing this with a desktop browser, if the browser fails to load the narrower images when you've got its window set to the narrowest width, have a look at what the viewport is (you can approximate it by going into the browser's JavaScript console and typing in document.querySelector('html').clientWidth). Different browsers have minimum sizes that they'll let you reduce the window width to, and they might be wider than you'd think. When testing it with a mobile browser, you can use tools like Firefox's about:debugging page to inspect the page loaded on the mobile using the desktop developer tools.

To see which images were loaded, you can use Firefox DevTools's Network Monitor tab.

Source https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images

MARVELLOUS IFEZUE0
Related