Using Cloudflare to resize images

I have been using Cloudflare for quiet some time now and every now and then there are some additions to the offering which are really worth looking into.

I have used a bunch of different CDN tools to host images, but a lot of these come with a cost and do not offer the versatility which Cloudflare Image Resizing offers. We have used statically.io (a free image hosting service) but the main challenge was large image conversion problems and reliability on busy sites.

A short introduction to Cloudflare images

With Image Resizing, you can transform images on Cloudflare’s edge platform. You can resize, adjust quality, and convert images to WebP or AVIF format on demand. Cloudflare will automatically cache every derived image at the edge, so you only need to store one original image at your origin.
Cloudflare

How to implement

Cloudflare images does require a Pro plan and above. You then need to be enabled this on your account and it does have a cost attached to the service.

The basic concept is that your main image resides on your server. We have uploaded high resolution images eg: 3000px wide. The URL of the image would then need to be in the following format when you want to serve this from Cloudflare.

<img src="/cdn-cgi/image/width=600,quality=85/images/yourimage.jpg" />

There are a number of options you can add to the URL format which allows you to upload a high resolution image and then manipulate the image using the parameters provided by Cloudflare.

The options below are the ones which seem to work well for our purposes.

  • f=auto (serves image as either WebP or AVIF)
  • metadata=none (removes meta info)
  • w=800 (width)
  • fit=scale-down (image is scaled down preserving aspect ration)

For further options visit the docs.

Taking it a step further...

With a little programming logic, you can add variables to your code which allow you to do the following: 

  • Create different image sizes for responsive views
  • Apply different quality to images based on different views

Example

// Variables
$cdn_image_576 = 'https://domain.com/cdn-cgi/image/w=576';
$cdn_image_768 = 'https://domain.com/cdn-cgi/image/w=768';
$cdn_image_992 = 'https://domain.com/cdn-cgi/image/w=992';
// Image example
<img src="'.$cdn_image_576.'/images/yourimage.jpg" />
<img src="'.$cdn_image_768.'/images/yourimage.jpg" />
etc...

One negative is that images are cached for 30 days. To change this, you typically have to upload a new image with a different name to replace the one you are trying to change. A huge plus is that the images are cached on the Cloudflare edge, making the delivery fast.

For more information visit Cloudflare Images.