Image Delivery Sizes
- Thread starter TruThemes
- Start date
How exactly are you wanting to rerun thumbnails and image optimizations? Like is there a specific button or link you are wanting to do it with?
If you just mean using srcset as part of an HTML attribute for img tags, ya it should work fine. srcset just needs a valid URL, which the R2 URLs are.
If you just mean using srcset as part of an HTML attribute for img tags, ya it should work fine. srcset just needs a valid URL, which the R2 URLs are.
TruThemes
Member
When I use srcset, I get cropped images. It's weird; I've never seen this before. I'll set this image of a Thyme plant back to srcset so you can see what I'm talking about. Use DevTools and select mobile to see the cropped version.
https://herbsfor.life/home/?nowprocket
Normally, it resizes the uncropped version, but this site is using custom-cropped images instead. The image I selected is 480 x 0.
Regarding image optimization, my image optimization plugin, "Converter for Media," converts my Adobe PNG files into WebP and AVIF format, but they are not getting converted, and the images in R2 are PNG images.
I very much want to be able to offload images to R2, but I also don't want to manually optimize images prior to uploading them.
Thoughts?
Regards,
~ Cory C.
https://herbsfor.life/home/?nowprocket
Normally, it resizes the uncropped version, but this site is using custom-cropped images instead. The image I selected is 480 x 0.
Regarding image optimization, my image optimization plugin, "Converter for Media," converts my Adobe PNG files into WebP and AVIF format, but they are not getting converted, and the images in R2 are PNG images.
I very much want to be able to offload images to R2, but I also don't want to manually optimize images prior to uploading them.
Thoughts?
Regards,
~ Cory C.
I'm seeing the image look normal there (on both desktop and mobile). Also looking at all the srcset variations via devtools and the 5 variations each look as I would expect. Are you still seeing something funky there, or did you fix whatever it was?
Is that all you use the plugin for (webp and/or avif conversion)? Would need to dig a little bit to be certain, but it honestly probably would be less work to just add webp/avif conversion to this plugin vs. trying to get other plugins to interact/work with R2.
Is that all you use the plugin for (webp and/or avif conversion)? Would need to dig a little bit to be certain, but it honestly probably would be less work to just add webp/avif conversion to this plugin vs. trying to get other plugins to interact/work with R2.
TruThemes
Member
Here is the IMG tag from my desktop; I'll add a screenshot from my phone.
If I have time today, I'll start disabling plugins to see if the tag changes.
Is it possible to make the R2 sequence the last operation after upload so that images can be converted before the transfer happens?
HTML:
<img data-perfmatters-preload="" loading="eager" decoding="async" fetchpriority="high" src="" data-fetchpriority="high" alt="Image of a Thyme plant." class="wp-image-253 no-lazyload" width="600px" height="620" title="Thyme Plant With Blossoms." srcset="https://media.herbsfor.life/medicinal-plant-thyme-480x620.png 480w, https://media.herbsfor.life/medicinal-plant-thyme-116x150.png 116w, https://media.herbsfor.life/medicinal-plant-thyme-768x992.png 768w, https://media.herbsfor.life/medicinal-plant-thyme-150x194.png 150w, https://media.herbsfor.life/medicinal-plant-thyme-842x600.png 842w" sizes="(max-width: 480px) 100vw, 480px" data-="">If I have time today, I'll start disabling plugins to see if the tag changes.
Is it possible to make the R2 sequence the last operation after upload so that images can be converted before the transfer happens?
It wouldn't be as simple as changing the sequence (priority) because that particular plugin is using a different hook. Even if you made changes so they were both using the same hook, it really isn't the "right" solution because that addon simply doesn't know anything about R2. So even in that scenario, if you made it work on initial upload (which would be really hacky), that plugin would still break when trying to work with images after the initial upload (like if it was trying to change formats after the fact).
The "right" solution is for that plugin to understand how to retrieve media from R2 (then it wouldn't matter if it was during initial upload or an after-the-fact image manipulation).
The "right" solution is for that plugin to understand how to retrieve media from R2 (then it wouldn't matter if it was during initial upload or an after-the-fact image manipulation).
TruThemes
Member
I've tried "Move from R2 to Local," ran an optimization on the single image, and then clicked "Move from Local to R2," but it doesn't transfer the optimized images, only the PNG images. However, after doing that, the srcset images are no longer the cropped versions.
For now, it will probably be more efficient for me to disable your plugin and serve optimized images until you can add optimization. The server is fast, and I have plenty of drive space. The optimized images shave a lot of load time off of PNG files. Well, they are no longer PNG files.
For now, it will probably be more efficient for me to disable your plugin and serve optimized images until you can add optimization. The server is fast, and I have plenty of drive space. The optimized images shave a lot of load time off of PNG files. Well, they are no longer PNG files.
I don’t think it would be terribly hard to implement webp and/or avif conversion. Is that all you are doing with that plugin?
TruThemes
Member
Here's the plugin's site: https://mattplugins.com/products/webp-converter-for-media-pro
I think that one has the do with it potentially causing more issues with http request timeouts. Say someone had a bunch of 10MB images, selected 30 to process at a time and in the course of doing that, it’s also processing 10 variations per image underneath it all, and now you are making a single http request that needs to process and upload potentially a couple gigs to R2 before the http request timed out (sometimes as quick as 30 seconds depending on the web server). Granted, it wouldn’t always be that much, but a 10MB image size isn’t anything crazy and I can see people being confused about why things times out or why only some were moved because the web server killed the underlying PHP process for taking too long.
It's already been done on this side. It doesn't have a mechanism to go back and edit already existing media, but for new uploaded, it can convert them to WebP if your server has support (either with ImageMagick or GD, which most PHP installs should have already).
It will be part of the next version.
Yes, currently it's converting incoming JPG and PNG to WEBP. I intentionally left out GIF because if people are trying to upload animated GIFs, I didn't want people to lose their animations.
I just mean currently as in that’s how it already works (but not yet released).
The WEBP conversion setting is there now (requires both the free plugin and Pro plugin to be updated).
TruThemes
Member
I deleted all of my PNG's, enabled the image conversion, set compression to 70, and uploaded 18 PNG logos, but they are still PNG's.
I'm also getting the cropped images again. (Fixed the image cropping)
My server has both Imagick and GD.
I'm also getting the cropped images again. (Fixed the image cropping)
HTML:
<img data-perfmatters-preload="" loading="eager" decoding="async" fetchpriority="high" src="" data-fetchpriority="high" alt="Image of a Thyme plant." class="wp-image-460 no-lazyload" width="600px" height="621" title="Thyme Plant With Blossoms." srcset="https://media.herbsfor.life/medicinal-plant-thyme-1000px-773x600.png 773w, https://media.herbsfor.life/medicinal-plant-thyme-1000px-116x150.png 116w, https://media.herbsfor.life/medicinal-plant-thyme-1000px-768x994.png 768w, https://media.herbsfor.life/medicinal-plant-thyme-1000px-150x194.png 150w, https://media.herbsfor.life/medicinal-plant-thyme-1000px-480x621.png 480w" sizes="(max-width: 773px) 100vw, 773px" data-="">My server has both Imagick and GD.
Last edited:
