Lazy Load and image size

Can you share your site’s URL so I can look at the HTML source code Mat?

It’s https://mirrorlesscomparison.com/

Thanks

Had a look around, but I don’t seem to see this happening?

I also had a look at the HTML and at first sight all looks OK there as well (as in; no extra sizes added or anything that would explain what you’re seeing).

Is there a specific page I should look maybe?

Sorry, I should have been more specific.

If you go here:
https://mirrorlesscomparison.com/galleries/sony-a7r-iv-sample-photos/

and scroll down to the first images (the ones taken in the woods), if I right click on them and choose open image in a new tab, or copy image address, it should show the Large size image that would end with -700×400.jpg. Instead it looks like the full size has been embedded in the article.

In this other example:
https://mirrorlesscomparison.com/guide/sony-a7-a9-astrophotography-settings/

If you scroll down to the image of the milky way with the boat and do the same, you get this:
https://mirrorlesscomparison.com/wp-content/uploads/2019/12/Sony-A7iii-milky-way-photo-sample-1-1536×1024.jpg

Still can’t reproduce I’m afraid;

When looking at the HTML I do see a reference to the higher res version, but that is also there in the original HTML (which is between the noscript-tags and can also be seen by loading the page with ?ao_noptimize=1 appended to the URL) in the srcset/ data-srcset attributes;

Given this I *think* (expect) you would see the same behavior when AO is not active; it’s the browser using the (data-)srcset and (data-)sizes attributes to determine what version of the image to use?

I’m afraid I’m not sure exactly what you refer to when talking about (data-)srcset and (data-)sizes.

But perhaps I’m the one getting confused. If I want to make sure that the article is loading the Large size images (700×400) instead of the full size ones, what is the best method to check that?

I remember that before, it was easy: with any browser, I would just right click on the image and choose either copy image address or open image in a new tab, and the Large size image would appear rather then original one. Perhaps that’s not what happens anymore, and the browsers load the original image instead?

I’m afraid I’m not sure exactly what you refer to when talking about (data-)srcset and (data-)sizes.

That refers to the HTML added by WordPress/ your theme (irrespective of Autoptimize) to describe the image. That HTML contains srcset and sizes attributes to create “responsive images”, where depending on screen sizes a smaller or larger image is used. You can read more about that technique in this MDN article.

But perhaps I’m the one getting confused. If I want to make sure that the article is loading the Large size images (700×400) instead of the full size ones, what is the best method to check that?

well, what I did is in Firefox right-click the image and select “view image info” from the contextual menu, which results in the dialog you can see in the screenshots I added earlier. as you can see in those screenshots, in my case I always see the 700px wide ones, so things look OK to me.

Ok, that is clear now.

Well, I might have worried for nothing, but thank you very much for your support. Really appreciate it!

you’re welcome, feel free to leave a review of the plugin and support here! ??

have a nice weekend!
frank