Image Delivery Sizes

TruThemes

TruThemes

Member
Can I rerun thumbnails and image optimizations and re-sync them up to R2?
Where can I find your Docs?
Does srcset still work properly from R2?
 
Sort by date Sort by votes
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
Here is the IMG tag from my desktop; I'll add a screenshot from my phone.

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-="">

Screenshot_20240721_144336_Chrome.jpg

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?
 
Upvote 0 Downvote
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).
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
So, yeah, that's about all it does. Plus offsite/remote conversions to reduce compute, if you need that. It does a browser check and serves the best option the browser can support.
 
Upvote 0 Downvote
TruThemes said:
Any plans to have R2/Local transfers in the Media Library list view?
Select X number and transfer?
Click to expand...
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.
 
Upvote 0 Downvote
So, are you going to implement image optimization before the transfer? Without it, I can't use your plugin, as optimization is a priority for me over R2.
How long do you estimate implementation if you do?
 
Upvote 0 Downvote
TruThemes said:
So, are you going to implement image optimization before the transfer? Without it, I can't use your plugin, as optimization is a priority for me over R2.
How long do you estimate implementation if you do?
Click to expand...
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.
 
Upvote 0 Downvote
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.
 
Upvote 0 Downvote
To be clear, when you say "currently," is that the version I have installed, or the one you are currently working on to be released?

I'm on Version 1.8.5
 
Last edited:
Upvote 0 Downvote
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)

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-="">

1722744488505.png

My server has both Imagick and GD.
 
Last edited:
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

M
  • Discussion
Issue with plugin that uses /wp-content/uploads
Replies
3
Views
143
digitalpoint
digitalpoint
TruThemes
  • Discussion
Still can't use srcset
Replies
9
Views
185
digitalpoint
digitalpoint
C
  • Discussion
Issues with thumbnail imagen
Replies
5
Views
115
digitalpoint
digitalpoint
N
  • Discussion
Bug on featured image on 1.8.6
Replies
7
Views
154
digitalpoint
digitalpoint
C
  • Discussion
Imagen error on Upload
Replies
2
Views
153
Carlos
C
Back
Top