DXP Beta Features & Cloudflare Edge Image Resizing

Overview

We all love access to the latest and greatest features on the Optimizely DXP platform, as by using the cutting edge we can create faster Optimizely experiences that provide a better customer experience to end users! Optimizely has a lot of great features as part of the DXP and is continuing to innovate by providing new features and opening up areas of the DXP more and more for our use. 

Recently it's very exciting to the see a beta signup page some to Optimizely https://www.optimizely.com/beta that allows us to see beta features in progress and sign up to for use on our own projects, such as just to name a few key ones

• Edge Image Resizing
• ODP real time segmentation
• GA 4 Web Experimentation Reporting
• Vendor Manged Invetory for Configured Commerce (B2B)
• Opti ID Single Sign On across all the Optimizely provided products

However I'd like to call out one specifically I'm very excitied about on this list

Cloudflare Edge Image Resizing

In the modern world we are serving websites across many different devices such as mobile, tablet and desktop and it's been common for some time for developers to be using responsive design and CSS to provide optimized delivery of the content. As part of that as we also want to serve the images at the right size with the smallest physical size and request footprint to users loading on every different device profile.

For some time now a common solution would be to install a package such as ImageResizer, ImageSharp or build your own (which has been even more needed with changes in CMS 12 with .NET 6)

However, this gives us a few downsides

• Building and maintenance of the library or updating it due to bugs
• Potential issues that may exist in the library
• CPU overhead of the webapps/server running the image resizing code on Azure
• Increase in blob storage assets if caching resized version which can cause environment restoring to be a hassle

Cloudflare Edge Image Resizing https://developers.cloudflare.com/images/image-resizing/ gives us a solution to this as it's a feature long provided in Cloudflare which can resizie images to WebP and AVIF formats on cloudflares edge platform based upon the parameters defined in the URL.

This allows us to offload the resizing processing and the caching off the images through to cloudflare eliminating the pain points in using a .NET library. Image configurations https://developers.cloudflare.com/images/image-resizing/url-format/ can be defined by passing the OPTIONs part of the URL allowing the height, width and quality to be set.

On the DXP right now this can be enabled by signing up on the beta page and once given access this will be enabled for the DXP. This means that for any environments such as preproduction and production with custom hostnames (as direct dxcloud domains bypass the CDN) the images will be resized.

This should be a simple development activity to replace by steps such as

1. Removing your resizer package
2. Creating an application service that can rewrite image URLs in the desired format
3. Deploying to prep for testing

You can also test once enabled by directly navigating to the URL in the browser!

Picture Renderer

A quick update (01-07-2022) that the Picture Rendered by Erik Henningson has been updated to support cloudflare image resizing https://github.com/ErikHen/PictureRenderer.Optimizely so this gives anyone a head start with using this feature for picture element based image resizing

Hopefully this has been useful! Thanks all!