Best practice of managing your Optimizely nuget packages
Understanding Cloudflare Image Resizing
Cloudflare Image Resizing is a dynamic service provided by Cloudflare, designed to empower web applications with the ability to offload image optimization and resizing to the edge. This enables websites to relinquish the responsibility of manually resizing images, caching, and persisting them for future requests.
Moreover, Cloudflare's edge solutions offer customizable options for image optimization. These include adjusting image quality, reformatting, and resizing, providing flexibility based on your specific needs. Depending on your implementation strategy, these adjustments can be applied either on a per-image basis or uniformly across all your images, ensuring optimal performance and visual quality.
Optimizely DXP and Self-Hosting can benefit
If you're self-hosting and using CloudFlare as your CDN, integrating Image Optimization with Image Resizing is straightforward. It's an add-on that scales according to your usage. Starting with a set number of resizing actions, if your site's demands grow and you exceed this quota, additional costs apply. It's a scalable solution tailored to the varying needs of different websites.
For those using Optimizely DXP, good news - Image Resizing is now a part of the package and is currently in beta. Interested? Sign up here. The process mirrors that of a self-hosted scenario, allowing your developers to leverage image resizing within their code seamlessly.
Implementation Made Easy
Regardless of if you are DXP or self-hosting, getting started with Cloudflare Image Resizing is straightforward. Our recommendation: go for URL transformation. This involves adding specific segments to your image URLs, which Cloudflare recognizes and processes for optimization on the edge before serving them to your users.
Here's a quick guide to the URL structure:
- Zone: This is your domain.
- /cdn-cgi/image/: This segment is Cloudflare's trigger to start the optimization process.
- <Options>: A comma-separated list allowing customization of the optimization.
- <Source-Image>: The actual path of your image, which can be either absolute or relative.
For example, let's say you have an image hosted on your site. The original URL might look something like this:
To optimize it using Cloudflare, you'll transform the URL to something like:
This URL tells Cloudflare to automatically choose the best format and set the quality to 80% for the image named
1.3 Mb in Size
Resized via CloudFlare:
19.3KB in Size
Additional Resources for Image Resizing
For those interested in diving deeper into image resizing, there are valuable resources available from experts in the field.
Erik Henningson has developed a remarkable NuGet package specifically designed to enhance image handling. This package is particularly useful as it renders
<picture> elements with built-in support for CloudFlare and
srcset. This integration significantly simplifies the process of creating responsive images that are optimized for various screen sizes and devices, ensuring your website remains fast and efficient. Here: https://github.com/ErikHen/PictureRenderer.Optimizely
Furthermore, for a more technical exploration, Minesh Shah provides an in-depth look at implementing responsive image rendering at the edge. His detailed blog post can be found here: Responsive Image Rendering at the Edge by Minesh Shah. Shah's article offers a comprehensive technical deep dive, perfect for those who want to understand the nuts and bolts of how to implement this technology effectively in their projects.
Critical parts of an upgrade can help you understand the different stages of an upgrade. Let's discu
Optimizely Customers now have a choice between using CMS on either PaaS or SaaS