CloudFlare Image Resizing for Optimizely DXP and Self-Hosting Customers

Understanding Cloudflare Image Resizing

Cloudflare Image Resizing is a dynamic service provided by Cloudflare, designed to empower web applications with the ability to offload image optimization and resizing to the edge. This enables websites to relinquish the responsibility of manually resizing images, caching, and persisting them for future requests.

Moreover, Cloudflare's edge solutions offer customizable options for image optimization. These include adjusting image quality, reformatting, and resizing, providing flexibility based on your specific needs. Depending on your implementation strategy, these adjustments can be applied either on a per-image basis or uniformly across all your images, ensuring optimal performance and visual quality.

Optimizely DXP and Self-Hosting can benefit

If you're self-hosting and using CloudFlare as your CDN, integrating Image Optimization with Image Resizing is straightforward. It's an add-on that scales according to your usage. Starting with a set number of resizing actions, if your site's demands grow and you exceed this quota, additional costs apply. It's a scalable solution tailored to the varying needs of different websites.

For those using Optimizely DXP, good news - Image Resizing is now a part of the package and is currently in beta. Interested? Sign up here. The process mirrors that of a self-hosted scenario, allowing your developers to leverage image resizing within their code seamlessly.

Implementation Made Easy

Regardless of if you are DXP or self-hosting, getting started with Cloudflare Image Resizing is straightforward. Our recommendation: go for URL transformation. This involves adding specific segments to your image URLs, which Cloudflare recognizes and processes for optimization on the edge before serving them to your users.

Here's a quick guide to the URL structure:

• Zone: This is your domain.
• /cdn-cgi/image/: This segment is Cloudflare's trigger to start the optimization process.
• <Options>: A comma-separated list allowing customization of the optimization.
• <Source-Image>: The actual path of your image, which can be either absolute or relative.

For example, let's say you have an image hosted on your site. The original URL might look something like this:

https://example.com/images/photo.jpg

To optimize it using Cloudflare, you'll transform the URL to something like:

https://example.com/cdn-cgi/image/format=auto,quality=80/images/photo.jpg

This URL tells Cloudflare to automatically choose the best format and set the quality to 80% for the image named photo.jpg.

Original Image:

https://www.hiddenfoundry.com/globalassets/stock-images/uploadtograph.png

1.3 Mb in Size

Resized via CloudFlare:

https://www.hiddenfoundry.com/cdn-cgi/image/f=webp,fit=scale-down,width=420/globalassets/stock-images/uploadtograph.png

19.3KB in Size

Additional Resources for Image Resizing

For those interested in diving deeper into image resizing, there are valuable resources available from experts in the field.

Erik Henningson has developed a remarkable NuGet package specifically designed to enhance image handling. This package is particularly useful as it renders <picture> elements with built-in support for CloudFlare and srcset. This integration significantly simplifies the process of creating responsive images that are optimized for various screen sizes and devices, ensuring your website remains fast and efficient. Here: https://github.com/ErikHen/PictureRenderer.Optimizely

Furthermore, for a more technical exploration, Minesh Shah provides an in-depth look at implementing responsive image rendering at the edge. His detailed blog post can be found here: Responsive Image Rendering at the Edge by Minesh Shah. Shah's article offers a comprehensive technical deep dive, perfect for those who want to understand the nuts and bolts of how to implement this technology effectively in their projects.