I have an archive page with posts which pull in a single image for each post. I've set this to be the thumbnail size (300 x 200px) so the images load up fast. This is very important to me. But when I examine the output on the website I see:
<img width="300" height="200" loading="lazy" src="hidden link" alt="Norfolk Outdoor Activity Centres" class="wp-image-660" srcset="hidden link 300w, hidden link 720w, hidden link 768w, hidden link 600w, hidden link 960w" sizes="(max-width: 300px) 100vw, 300px">
Because it sees my viewport as being over 960w I think it's pulling in the big image instead, when it doesn't need to.
And when I save an image from the page for examination, the image saved isn't the thumbnail image. It saves the 960px wide image. It doesn't matter what size viewport/device is being used, I always want it to use the thumbnail image only, as it will never be displayed in the grid more than 300 x 200, on any device, no matter what their screen size is. Why is it doing this?
Is there any documentation that you are following? No.
Is there a similar example that we can see?
This site does it correctly: hidden link
What is the link to your site? hidden link (but not currently viewable as not launched)
I just checked something similar on my own test site, and I found that when I choose the thumbnail size then only that size is set in the img markup, but if I choose any of the larger sizes then the srcset and sizes attributes are added, as in your example.
You say you chose the thumbnail size, but that's actually the standard medium size in WordPress, not the smallest thumbnail size.
If you use a custom size rather than an existing registered size then the src is always set just to that size and the srcset and sizes attributes are not used.
So, in your case, you could set a custom size of 301px x 201px for example, and that image size would be used.
Weird what you say about the 'thumbnail' size not actually being the smallest size as described in the Media options. But nonetheless, your solution worked.
