Scott Reed
Jun 16, 2023
  2460
(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
Optimizely Forms: You cannot submit this form because an administrator has turned off data storage.

Do not let this error message scare you, the solution is quite simple!

Tomas Hensrud Gulla | Oct 4, 2024 | Syndicated blog

Add your own tools to the Optimizely CMS 12 admin menu

The menus in Optimizely CMS can be extended using a MenuProvider, and using the path parameter you decide what menu you want to add additional menu...

Tomas Hensrud Gulla | Oct 3, 2024 | Syndicated blog

Integrating Optimizely DAM with Your Website

This article is the second in a series about integrating Optimizely DAM with websites. It discusses how to install the necessary package and code t...

Andrew Markham | Sep 28, 2024 | Syndicated blog

Opticon 2024 - highlights

I went to Opticon in Stockholm and here are my brief highlights based on the demos, presentations and roadmaps  Optimizely CMS SaaS will start to...

Daniel Ovaska | Sep 27, 2024

Required fields support in Optimizely Graph

It's been possible to have "required" properties (value must be entered) in the CMS for a long time. The required metadata haven't been reflected i...

Jonas Bergqvist | Sep 25, 2024

How to write a bespoke notification management system

Websites can be the perfect vehicle for notifying customers of important information quickly, whether it’s the latest offer, an operational message...

Nicole Drath | Sep 25, 2024