Resize Images on the Fly with Optimizely DXP's New CDN Feature

With the latest release, you can now resize images on demand using the Content Delivery Network (CDN). This means no more storing multiple versions of the same image and a significant boost to your website's performance.

How Does it Work?

It's all about the URL. By adding specific parameters to your image URLs, you can instruct the CDN to dynamically resize, crop, and optimize your images before delivering them to the user's browser. This is a game-changer for several reasons:

• Improved Page Load Speed: Smaller image files mean faster loading times, leading to happier visitors and better SEO.
• Reduced Storage Costs: Say goodbye to managing countless image variations.
• Enhanced User Experience: Deliver the perfect image size for any device, ensuring a seamless browsing experience.

Getting Started with Image Resizing

Here's the basic URL structure you will use:

https://<DOMAIN>/cdn-cgi/image/<OPTIONS>/<SOURCE-IMAGE>

Let's break it down:

• <DOMAIN>: Your website's domain (e.g., www.yourdomain.com).
• /cdn-cgi/image/: This tells the CDN to activate the image resizing feature.
• <OPTIONS>: A comma-separated list of transformations (e.g., width=300,quality=80).
• <SOURCE-IMAGE>: The path to your original image file (e.g., globalassets/images/hero-banner.jpg).

Example:

HTML

<img src="/cdn-cgi/image/width=300,quality=80/globalassets/images/hero-banner.jpg" />

This code will deliver a resized version of hero-banner.jpg with a width of 300 pixels and a quality of 80%.

Powerful Options for Customization

Optimizely DXP's CDN offers a wide range of image transformation options, including:

• Resizing: Control width, height, and aspect ratio with different fitting modes like contain, cover, and crop.
• Quality Adjustment: Fine-tune image quality to find the perfect balance between visual fidelity and file size.
• Format Conversion: Automatically serve images in next-gen formats like WebP and AVIF for improved compression.
• Effects and Filters: Apply blur, sharpen, brightness adjustments, and more.
• Cropping and Trimming: Precisely control image composition by cropping from specific sides or coordinates.

Responsive Images Made Easy

With the new .NET tag helpers, implementing responsive images is a breeze. You can define different image sizes for various screen sizes and let the browser choose the most appropriate one. This ensures optimal image delivery for every user, regardless of their device.

Important Considerations

• File Size Limit: For best performance, stick to images under 10MB.
• Third-Party Domains: You cannot resize images hosted on external domains.
• CDN Routing: Image resizing only works when traffic is routed through the Optimizely DXP CDN.
• Versions: This feature is available for CMS 12 and all future versions and CMS (SaaS) customers.

Take Control of Your Images

Optimizely DXP's new image resizing feature empowers you to optimize your website's visuals without sacrificing performance. By leveraging the CDN's capabilities, you can deliver stunning images that load quickly and adapt seamlessly to any device. Start experimenting with the new URL parameters and tag helpers today to unlock the full potential of your website's imagery!

For more DXP release information check out the support center on Optimizely.com.