Closed maupet closed 1 year ago
Hi,
The plugin has no consideration of viewports, it rewrites all the images it can at once. What changes your images "on-the-fly" is the srcset of images. For example:
<img data-perfmatters-preload="" width="1200" height="628" src="https://mustreadquotes.com/cdn-cgi/image/width=1200,height=628,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg" class="hero attachment-full size-full wp-image-5952" alt="Stay in Your Lane" srcset="https://mustreadquotes.com/cdn-cgi/image/width=1200,height=628,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg 1200w, https://mustreadquotes.com/cdn-cgi/image/width=300,height=157,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg 300w, https://mustreadquotes.com/cdn-cgi/image/width=1080,height=565,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg 1080w, https://mustreadquotes.com/cdn-cgi/image/width=768,height=402,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg 768w" sizes="100vw">
When you minimize to mobile it will load automatically the version: https://mustreadquotes.com/cdn-cgi/image/width=768,height=402,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/Stay-in-Your-Lane.jpg
This is working as it "should" but it's not "correct" (here is why: https://mecanik.dev/en/posts/how-to-deal-with-responsive-images/)
It's the best you will get out of wordpress. It generates the srcset erratically and you have no control over it.
But the final answer to your question is that the plugin works as it should and the smaller image is loaded on lower viewports.
Thank you for the explaination, I will check the link you provided.
Hello,
The plugin is working as expected on Desktop and larger viewports, but on mobile and smaller viewports the images are not getting resized properly.
Example URL: https://mustreadquotes.com/stay-in-your-lane/ The main image is 1200 pixel wide, but the plugin is not changing the image URL to resize it on the fly, resulting in a larger-than-needed image being loaded.