Image optimization at the edge.

The latest version of PictureRenderer has support for resizing and optimizing images using Cloudflare’s image service.

If you are using Cloudflare’s CDN (Optimizely DXP does) then you can use Cloudflare’s image service for resizing, and deliver the most optimal image format.
This will give you the following benefits:

  • Resizing occurs at the network edge, on the CDN node that’s closest to the end-user, instead of on the CMS server.
  • Images will be converted to AVIF format (if browser supports it), which is an even more efficient format than WebP.
  • There’s a slight reduction in markup in the picture element, as the need to render the WebP alternative is eliminated.

Image service is enabled in the Cloudflare administration portal. If you are using Optimizely DXP you currently must sign up to enable this feature
If you are already using PictureRenderer you just need to change your picture profile to be of type CloudflareProfile to use this feature.

Now, the big question: Cloudflare or ImageSharp?
As always, there are pros and cons. Cloudflare’s Image Service has a slight cost (but it’s covered if you’re on DXP), and all your environments may not be behind a Cloudflare CDN, then images will not show up at all.
It is possible to turn off image resizing completely with the IsDisabled setting in the picture profile. That can be useful if you want images to show up on your local development environment, for example.

See more about PictureRenderer.Optimizely here

Leave a Reply