Cloudflare image resizing

Cloudflare for image resizing in Optimizely DXP


Optimizely DXP supports Cloudflare for image transformation and optimization at the edge. Adaptive Images supports this out-of-the-box, making it dead simple to use.

Estimated read time : 4 minutes

Jump to

Key takeaways

  • Cloudflare edge platform offloads the web app by allowing the CDN to both transform and serve images
  • This is currently a DXP beta feature and must be enabled for your DXP environment
  • A single line of code is enough to enable Cloudflare rendering through Adaptive Images

TL;DR

Cloudflare image rendering can be enabled through Adaptive Images in DXP by installing the AdaptiveImages.Cloudflare NuGet package and adding the following to your Startup class:

services.AddCloudflare();

Prerequisites

  1. "Image resizing at the edge" feature enabled for DXP, apply here for beta access
  2. Adaptive Images including the AdaptiveImages.Cloudflare NuGet package

How to enable Cloudflare for image rendering

To enable Cloudflare, simply invoke AddCloudflare() to render images using the image resizing URL format:

public void ConfigureServices(IServiceCollection services)
{
    services.AddAdaptiveImages()
            .AddCloudflare();
}

What happens when Cloudflare rendering is enabled?

Enabling Cloudflare only affects public-facing image URL:s. Nothing changes in the CMS, so it's safe to enable/disable Cloudflare as required in different environments.

By default, an image is rendered with a URL like:
http://yoursite.url/adaptiveimages/provider/id/image-name.jpg?[parameters]

When Cloudflare is enabled, the image URL will instead look something like:
https://yoursite.url/cdn-cgi/[parameters]/image/adaptiveimages/provider/id/image-name.jpg

Benefits of Cloudflare rendering

The main benefits of enabling Cloudflare are:

  1. Improved auto-cropping
  2. Device-specific image formats
  3. Off-loading the web app, as the CDN takes care of cropping, resizing, optimizing, and serving images

Q&A

Can Cloudflare be used to render images locally?

Outside of DXP environments, for example during local development, you have two options:

  1. Skip services.AddCloudflare() to instead use locally rendered images
  2. Have images render through the DXP environment

The second option requires a public hostname for your environment so Cloudflare can access the original images to transform. This can be achieved for local development using a proxy tunnel service such as ngrok.

You then add something like the following to Startup:

services.AddCloudflare(new CloudflareSettings
{
    SiteHostname = "integration.dxp.uri", // DXP environment where Cloudflare is enabled
    ImagesHostname = "my-localhost.ngrok.io" // Hostname where your local environment is accessible over the internet
});

Should we still have the Adaptive Images cache enabled?

Yes, especially if you use image providers for external images, such as from a DAM. This is because images may be loaded locally in some scenarios in the CMS UI, for example in the crop dialog.

For DXP, or other Azure environments, you should use the AdaptiveImages.Azure package for blob storage caching. More details can be found in the SDK documentation.

Do we need to make any additional changes to image properties, crop settings, etc?

No. Cloudflare can be enabled/disabled without affecting any existing images.

Can we revert to locally rendered images?

Yes, simply omit AddCloudflare() to have images rendered by the web app instead.

We are currently using Cloudinary, can we switch to Cloudflare instead?

Yes. Replace AddCloudinary() with AddCloudflare() to render images using Cloudflare instead of Cloudinary.

We are interested, where can we get assistance?

Refer to the Adaptive Images website.