Rewrite is specifying original image maximum size
ShaleSubaru opened this issue · comments
Hello,
I've got this plugin working almost perfectly, yay! It's a huge help, given Cloudflare hasn't done this themselves. Thank you.
Odd issue: all image rewrites are taking on the original image dimensions, rather than the container or the specified image width/height. Eg: woocommerce images in the image gallery are rewritten as 2000px, while the width and height attributes are 600px (as is the container).
Is this something I need to add to config.php?
Cheers!
Hello,
I`m aware of this issue and working on a way to fix it. The issue comes because I do not query the database at all to get the sizes needed, most likely the regex fails (Try extract from img url (eg: /wp-content/uploads/2020/07/project-9-1200x848.jpg)) and then it gets the sizes from the disk (getimagesize).
Can you show me some images to get an idea?
BTW: You can install the plugin from here now: https://wordpress.org/plugins/cf-image-resizing/
Thanks
If it helps, here's an example from the website in question - but anything that's not a thumbnail displays this issue.
I've just reinstalled from the link you supplied too.
Thanks for looking into this.
If it helps, here's an example from the website in question - but anything that's not a thumbnail displays this issue.
I've just reinstalled from the link you supplied too.
Thanks for looking into this.
Thank you. I see the following issues right now:
- Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin
- You have hundreds of CSP load errors: https://i.imgur.com/fKwZ8xM.png
Images are loaded correctly, even the woo commerce size is correct:
Notice the URL of the original image is https://www.treebrushapothecary.nz/wp-content/uploads/2021/07/thuck-kawakawa-balm-all-sizes.jpg (1500x1500) and the CDN URL is: https://www.treebrushapothecary.nz/cdn-cgi/image/quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/07/thuck-kawakawa-balm-all-sizes.jpg (1500x1500).
Woocomerce seems to need a large image so the zoom feature works and the image is being delivered from the CDN instead of your server, which is fine.
As a result, I do not see a problem with this plugin. However, I went onto other pages to check the "2000px" issue which you mentioned, for example on: https://www.treebrushapothecary.nz/.
<img data-testid="product-image" alt="Good Vibes fragranced soy wax melts" src="https://www.treebrushapothecary.nz/cdn-cgi/image/width=2000,height=2000,fit=crop,quality=80,format=auto,onerror=redirect,metadata=none/wp-content/uploads/2021/12/goodvibes-soy-wax-melts.jpg" srcset="" sizes="(max-width: 2000px) 100vw, 2000px">
Once again, the plugin works correctly. Notice the sizes="(max-width: 2000px) 100vw, 2000px" and the srcset="" is empty. I believe this is coming from the theme itself, but to confirm 100% please turn off the CF plugin so we can see the result without it.
In other words your image container is forced to show an image inside 400px but the image is loaded as 2000px from the theme itself rather than a 400px image. Again, please turn off the CF plugin so we can confirm this.
Thanks
You are super thorough, thank you so much.
I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.
Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin
Looks like this is the case at first glance?
I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.
You are super thorough, thank you so much.
I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.
Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin
Looks like this is the case at first glance?
I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.
No problem, I`m in this to the end so. Your main issue seems to be the theme or another plugin breaking image sizes. Normally the theme/plugin should insert all the correct srcset="" images and then everything would be OK.
You are not the only one with such issues, however, it's not really an "issue". Sometimes you are limited by the theme, it does what it can. And using my plugin you just deliver the images from CF instead of your server, which is no loss or performance overhead.
So at the end of the day if you cannot do anything to the theme/plugins to amend those size, you can just use the plugin as is because it functions correctly.
You are super thorough, thank you so much.
I've disabled the plugin for the moment to check the srcset and sizes attributes, and correct - looks like they're still coming through without the plugin.
Images have "?fit=1500%2C1500&ssl=1" added, not sure from which plugin
Looks like this is the case at first glance?
I'll tackle the srcset and sizes attributes from the theme's end, I imagine I'm not the only one that'll be having CF issues.
do you have Wordpress Photon enabled by chance?
do you have Wordpress Photon enabled by chance?
I do have Jetpack, though site accelerator (formerly proton?) is disabled.
Looking around, I think I can isolate the broken srcset to the implementation of WooCommerce on the home page. Will rectify and should be able to confirm that the plugin is working exactly as intended soon.
Edit: So that was a fun rabbit hole. I've narrowed down the broken srcset and obnoxious sizes attributes down to Gutenberg. Apparently this is also a known thing people have been complaining about for years. So I'm off to find a replacement product gallery for the homepage, and this "issue" is indeed not an issue!
Glad you solved it, will be closing this.