London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

Scott Reed
Jun 16, 2023
  3454
(8 votes)

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!

Jun 16, 2023

Comments

Senura Dissanayake
Senura Dissanayake Feb 7, 2024 10:26 AM

Thanks for the detailed blog post.👍 May I know whether enabling this Cloudfare feature in DXP would involve an additional fee?

Eric
Eric Jun 26, 2024 11:37 AM

Currently there are no extra cost(to my knowledge) but you need to be part of the beta program and have the feature enabled for your DXP enviroment connected to that customer.

Scott Reed
Scott Reed Jun 26, 2024 12:59 PM

yes, there are no extra costs it's a cloudflare feature

Please login to comment.
Latest blogs
Display page/block thumbnail based on selected site in multi-site solution

In previous blog we described how to control the visibility of the blocks or properties based on the current site in multisite solution. We can use...

Tomek Juranek | May 16, 2025

Understanding the Infrastructure Powering AI Agents for Marketing

The marketing world is increasingly captivated by the potential of AI agents. However, it's crucial to recognize that these agents are not simply...

Patrick Lam | May 15, 2025

Meet the Newest OMVPs – Winter 2025 Cohort

We're excited to officially welcome the latest winter cohort of Optimizely Most Valuable Professionals (OMVPs) - a group of passionate tech...

Satata Satez | May 14, 2025

Helper method to encode query string properly

When using Url.ContentUrl() in Optimizely 12, encodes spaces as + in the query string. If you want to encode the spaces as %20, use the below helpe...

sunylcumar | May 13, 2025