Try our conversational search powered by Generative AI!

Scott Reed
Jun 16, 2023
  2028
(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?

Please login to comment.
Latest blogs
Change the IP HTTP Header used for geo-lookup in Application Insights

.

Johan Kronberg | Jun 10, 2024 | Syndicated blog

Copying property values

In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts...

Grzegorz Wiecheć | Jun 8, 2024 | Syndicated blog

Auto-translate with OpenAI GPT-4o in Optimizely CMS

Improvements for Episerver.Labs.LanguageManager! It's now possible to auto-translate both a page and its children at the same time! Additionally, m...

Tomas Hensrud Gulla | Jun 7, 2024 | Syndicated blog

Upgrade To Optimizely CMS 12 Issue: List item fields have become Required

There are many funny details to be aware of when upgrading from Episerver CMS 11 to Optimizely CMS 12. One of them that might feel a bit confusing ...

Allan Thraen | Jun 7, 2024 | Syndicated blog