App for Cloudflare® Pro 1.8.9

[Joe_Bloggs]

Hey guys,

I'm interested in the all the Polish, Mirage & R2 features of the App for Cloudflare Pro.

But in order to benefit from Image optimisation features in your plugin, do I also need the CF Pro subscription ($20/month) which supports the image optimisation, or the CF Images addon ($5+/month)?

Many thanks,
Jo

 

[digitalpoint]

You do not need a Cloudflare Pro plan or the Images service in order to use R2 (and things like the ability to automatically convert uploaded media to WebP).

The Images service is more for sites that don’t have the ability to do it on their side.

 

[Joe_Bloggs]

Thanks @digitalpoint , very helpful.

So, if I use R2 (from within your App for Cloudflare plugin), then I can basically offload images into R2, serve them from R2 and also make use of the resizing and compressing features with Polish and Mirage, and all that from within App for Cloudflare plugin. (Without the need for a CF subscription), is that correct?

Sorry if my questions sound silly, I'm currently using the 'Offload Media to Cloudflare Images' Wordpress plugin, which has been working pretty well for me (but it requires the CF Images addon).
But now it looks like 'App for Cloudflare' might be even better, so I'm just trying to figure out the differences between the two in regards to the image optimisation features.

 

[digitalpoint]

If you want to use Polish/Mirage, you would need that service from Cloudflare. I don’t personally see a need for either under normal circumstances, but that’s just my personal opinion (other people’s needs may be different).

Polish is more for sites that don’t have the ability to convert their images to a modern format on their side (on their server). Mirage is less useful over time because it downsizes images for mobile devices, but mobile Internet connectivity is always getting better, so the need to reduce media sizes so they can be downloaded in a reasonable amount of time has less and less value as time goes on.

Again, your needs may be different than the sites I manage, but of the 30+ sites I have on Cloudflare, zero of them utilize Polish or Mirage. If your site is geared towards users limits to EDGE or 3G cellular connection, Mirage might make sense for your use case.

 

[Joe_Bloggs]

Ok that makes sense.

Last question, I need to be able to automatically resize the image before it's offloaded, as I don't have control over what people upload in. Very often they don't think twice, so I end up with 7mb images that are 5000px wide and tall.

Currently, the 'Offload Media to Cloudflare Images' works well together with the 'Resize Image after Upload by Shortpixel', so the images are resized after upload, and then are offloaded to CF Images in a new size.

Would I be able to do the same with App for Cloudflare Pro, or does possibly R2 already offer some kind of resizing and compression features?

Thanks @digitalpoint , you've been very helpful.

 

[digitalpoint]

R2 doesn’t do resizing. It’s really just an object (file) storage system. It just stores whatever you throw at it.

 

[digitalpoint]

Had a couple thoughts/questions...

If an uploaded image is huge, are you ultimately wanting to downsize the original image, or keep the original image and present a smaller one to people viewing the site? If it's the latter, WordPress by default is already creating a bunch of variations of images being uploaded at various different sizes. So you could simply always present users with the 1024px variation that already exists.

If you just want to delete the original and keep a resized version as the new "original", it honestly would be fairly trivial from a code standpoint, but it does feel misplaced to put that code into a plugin that's specifically for Cloudflare when it really has nothing to do with the Cloudflare things, rather it's doing image processing.

 

[Joe_Bloggs]

Hey @digitalpoint, thanks for the follow-up.

If the uploaded image is huge, ideally, I would want to downsize it anyway, even if it gets offloaded elsewhere. You only need an image that is no bigger than max 1920px in width anyway, so any images bigger than that are just unnecessary, because they take up unnecessary space.

Even if they are offloaded somewhere else, there will be a time when you'll need to move them, so offloading images that are generally huge in size, with bigger dimensions than needed is just pointless in my opinion.

I know that WordPress generates and serves various image sizes. I've learned this the hard way when I was starting out and experimenting with different plugins, especially image grids etc, because I realised that most of these plugins also generate their own sizes. Then, I ended up with 20 different variants of a single image, so I guess you can imagine the size of the image folder when you have lets say 2000 images x 20 variants for each image. You are basically pushed to purchase the extra server storage because you're running out of space and resources, and that could get quite expensive. Not to mention doing backups, migrations etc. it's just a pain.

I absolutely hate this. I switched all the custom image sizes off and started looking into solutions where an image is uploaded in its original size and only keeps one single variant (in my case, it also gets additionally downsized to 1920px), and then it's served from a CDN in the exact size of a user's viewport.
So basically, if I'm looking at the website from a mobile, then the CDN automatically serves mobile-sized images.

A really great, tried and tested example of this is the Shortpixel's Adaptive Images plugin: https://shortpixel.com/products/shortpixel-adaptive-images.
It does exactly this, and really well. The yearly subscription is reasonable, but again, all images are kept on your server.
They also offer an additional service to offload your images onto their server, from where the images are then served, but that gets a lot more expensive.

Lately, I started experimenting with Cloudflare and Cloudflare Images because CF can do exactly the same thing, however as of now, most CF plugins are not there yet. In terms of the level of automation, just like Shortpixel for example.
I'm still currently experimenting with the Offload & Optimise CF Images plugin: https://wordpress.org/plugins/cf-images/, which so far works quite well. This is currently the only plugin that offloads images to Cloudflare Images automatically. From here, images are then served to the user in Webp and AVIF and also in the size that fits the user's viewport. It works well, but with a large number of images and a high-traffic site, it may get quite expensive.

I'm basically trying to find an alternative to Shortpixel's Adaptive Image or the above CF Images plugin, but with the possibility of using R2, and that's why your plugin seems pretty interesting.

 

[digitalpoint]

Well if you want something to serve up different images based on the browser making the request, it sounds like Cloudflare Mirage might be what you want (if you want to do it all within Cloudflare).

Cloudflare Images could be used to do realtime image transforms, but you would need logic on your server to decide what you want to transform them into exactly (format and size).

Are your users having page load time issues as it is? I’d think that normal cellular speeds these days should be fairly quick, but are you dealing with a crazy number of images on each page?

 

[Joe_Bloggs]

I'm not dealing with load time issues just because I'm keeping on top of them regarding the image optimisations; I'm always looking for more efficient ways to do things.

 

[digitalpoint]

Ya, I agree with that. But I also think it makes sense to pick a format that most can use (for example, these days I go with WebP because AVIF doesn’t have wide enough adoption for it to be realistic without fallback options). When you start going down the road of wanting to store multiple versions (say AVIF, which falls back to WebP which then falls back to JPEG), and then multiple sizes of each format and then adding the overhead of running code/logic on every image request to serve different formats based on the browser’s user agent… it starts to be a lot of storage and a lot of overhead/things that can go wrong with web server config (and other things). Of course, that’s just my personal experience, but I also don’t have any particularly image heavy sites myself.

The way I see it is if a user wants to use a browser that is so old it doesn’t support WebP, they *want* images (and other things) to not work well. 😂

That being said, once Cloudflare makes Snippets to everyone (including free plans), it will be much easier to build something like that without having to try and support users needing to reconfigure their web servers.