WordPress wp_get_attachment_image_srcset selects the wrong image based on media size

I’m using WordPress and want to display the right image size based on wp_get_attachment_image_srcset. The browser is changing images as I resize, but not working with the steps it should.

These are my sizes in functions.php

add_image_size(‘s320’, 320, 240, true);
add_image_size(‘s640’, 640, 480, true);
add_image_size(‘s992’, 992, 744, true);
add_image_size(‘s1280’, 1280, 960, true);
add_image_size(‘s2000’, 2000, 1500, true);
add_image_size(‘s2600’, 2600, 1950, true);

And on my index.php, I set sizes as 100vw when under 768 one column and if bigger, two columns. wp_get_attachment_image_srcset sets this dimensions for srcset

<img src=”data:image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=”
srcset=”…image-2000×1500.jpg 2000w,
…image-50×38.jpg 50w,
…image-320×240.jpg 320w,
…image-640×480.jpg 640w,
…image-992×744.jpg 992w,
…image-1280×960.jpg 1280w”
sizes=”
(max-width: 768px) 100vw,
(max-width: 2000px) 50vw,
2000px”
alt=”Alt-text” class=”lazyLoad img-fluid”>

What the browser is doing is:

for a screen < 226: displays currentSrc as 320
225 < screen < 398: as 640
397 < screen < 564: as 992
563 < screen < 1599: as 1280
and then display as 2000

The steps seem to be working with no logic to me… I want the browser to follow my steps. What am I doing wrong?

Read more here:: WordPress wp_get_attachment_image_srcset selects the wrong image based on media size

Leave a Reply

Your email address will not be published. Required fields are marked *