Viewport images Lazy loaded

the VPI will take time to generate, meanwhile , please try use Polpettone-vegano-plumcake in exclude setting , purge all , see how it goes

Hello @qtwrk,

Thank you for your reply.
I purged but the issue persist.
I have noticed though that if I open the post in the edit mode, in the “LiteSpeed Options” metabox, under Viewport images – mobile, QUIC.cloud automatically populated it with this link to image “Polpettone-vegano-plumcake-Large-800×840.jpg”, which is not actually the exact image that is visualised on the published post “https://scriccia.com/wp-content/uploads/2024/07/Polpettone-vegano-plumcake-Large-762×1024.jpg.webp” which is the optimized one.

Since I have this problem on a few posts, and I haven’t changed the image recently, but the images have been optimized by QUIC.cloud, is there a way to tell QUIC.cloud to scan again all my posts and find the correct images to include in the viewport?

Thank you

I went on QUIC.cloud Page optimization and indeed all the VPI images are the .jpg images and not the .webp images.

I was going to add an image but I don’t know how to copy and paste an image here (if you could kindly explain I can attach an image).

How can I tell QUIC.cloud to include the webp images in the VPI?

Thanks

it should be partial match , by that saying something.jpg will match both something.jpg and something.jpg.webp

Thank you, but unfortunately it doesn’t work because the original image name is “Polpettone-vegano-plumcake-Large-800×840.jpg”, and the on the published one, which has been optimized by QUIC.cloud is “Polpettone-vegano-plumcake-Large-762×1024.jpg.webp”.

I am not sure how this has happened?

it could happens because the theme is giving different image sizes based on incoming request/device , for example I did not see this 762-1024 image on my browser , as well as my browser simulator

Thank you @qtwrk ,
thank you for the explanation.

Is there a way I can cope with this in order to make sure that the viewport image is going to be excluded from lazy loading, no matter in which device is being opened?

Apart from doing it manually, is there an automatic way to do so?

Many thanks

could you please check in wp-content/uploads/2024/07/Polpettone-vegano-plumcake-Large- , as how many resized images there are ?

Hello qtwrk,
I was playing around with that particular post and eventually I removed the picture and uploaded another one.

But we can use another post as an example: https://scriccia.com/torta-con-biscotti-avanzati-e-yogurt/

• The viewport images are:
  • On my laptop: torta-con-biscotti-sbriciolati-scriccia-copy-768×967.jpg.webp
  • On my phone: torta-con-biscotti-sbriciolati-scriccia-copy.jpg
• While the filename in LiteSpeed Options “metabox” is: torta-con-biscotti-sbriciolati-scriccia-copy-800×840.jpg
• I had a look in the wp-content/uploads/ and I found an unbelievable number of files of different dimensions + the optimized ones. Page 1, and page 2.

I have recently changed theme, from Blossom to Astra, and I guess this may have increased the number of files, but oh my God, I wasn’t thinking to find such a bloat!

So, as I thought that trying to figure something out with that mess is a bit too complicated, I have created a temporary post. I uploaded a fresh new picture (Blackberries.jpg), to see how many copies and sizes get created now with the new theme.

• The viewport images are:
  • On my laptop: Blackberries-768×759.jpg
  • On my phone: Blackberries.jpg.webp
• The filename in LiteSpeed Options metabox is: Blackberries.jpg
• The number of sizes in the wp-content/uploads is more reasonable: here. (Although I have now another question: Why only one image has been converted in webp, and not all the other file sizes in this case?)

I am utterly confused at this point as I am not sure what to do! ??
Please @qtwrk can you advise?
If you also have a suggestion on which plugin to use to remove ALL the unused images in wp-content/uploads it would be awesome.

Thank you!

based on that unbelievable and unusual number of images that created , here is what I imagined , that your theme , or something from your system that classified in a very detailed manner for different devices/sizes/resolutions

by default , as wordpress does , we classify pages into 2 types , mobile and desktop , but if it’s been classified so detailed on your site , there will be certain “overlap” or “imprecise” result for image

like our VPI generator has one size, your device has another size , user device comes with another different size, they all gets different image sizes , which is, unfortunately, impossible for VPI to mimic all these sizes and create so many metaboxes to accommodate them all

for webp , yes, sometimes, some image may not have webp format , usually due to the webp file to be larger than jpg , thus no point to keep it

This blog also migrated from blogspot in April. So, maybe combined with the fact that I switched from Blossom theme to the Astra theme now I have a pure mess of files. Which I hate because I like to keep things clean.

I’ll have a closer look at the new images that I upload to understand the new theme behaviour, an maybe get in touch with Astra to understand this better.

In the meantime, I really would love to clear some of this craziness. Do you have any plugin to clean unused images (including unused sizes) that I can use to clean up my upload folder?

Thank you for your time

unfortunately I am not aware of such plugin ??