R2, Images, and Image Transformation

This page is going to demonstrate how you can use some of the function of Cloudflare images.

This is just a basic image stored in a R2 bucket made public through attaching a custom domain:

Using the Transform abilities of Cloudflare Images, you can convert and resize images by requesting them via a specially-formatted URL. This way you do not need to write any code, only change HTML markup of your website to use the new URLs. The format is:

https://<ZONE>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

Here is a breakdown of each part of the URL:

• <ZONE>
• Your domain name on Cloudflare. Unlike other third-party image resizing services, image transformations do not use a separate domain name for an API. Every Cloudflare zone with image transformations enabled can handle resizing itself. In URLs used on your website this part can be omitted, so that URLs start with /cdn-cgi/image/.
• /cdn-cgi/image/
• A fixed prefix that identifies that this is a special path handled by Cloudflare's built-in Worker.
• <OPTIONS>
• A comma-separated list of options such as width, height, and quality.
• <SOURCE-IMAGE>
• An absolute path on the origin server, or an absolute URL (starting with https:// or http://), pointing to an image to resize. The path is not URL-encoded, so the resizing URL can be safely constructed by concatenating /cdn-cgi/image/options and the original image URL. For example: /cdn-cgi/image/width=100/https://s3.example.com/bucket/image.png.

Below is an example of a transformation that shrinks the image and changes the quality:

Here is another example that rotates the image, and removes metadata: