Say hello to PictureRenderer.Optimizely! The html helper that makes it super simple to render HTML Picture elements in your Optimizely CMS 12 solution. Images are automatically cropped and resized, and the browser will always select the most optimal image to use.
The result is optimized (width, format, and quality), lazy loaded, and responsive images.

If you have been using the Picture helpers in the ImageProcessor and/or the ImageResizer libraries for Episerver 11, then you will recognize the concept of Picture profiles, and how to use the Html helper.
Read more about how to use PictureRenderer here.

PictureRenderer.Optimizely is missing some features from the libraries for CMS 11. Rendering WebP version of images is one of those things. Creating WebP images is not yet possible to do in the underlying ImageSharp library, but it’s in progress, hopefully just weeks away. Keep your eyes open for new versions 🙂 .

The ground-work for this is done by Vincent Baaij and his Baaijte.Optimizely.ImageSharp.Web library, which in turn is using the ImageSharp libraries. Show these projects your appreciation by starring them on GitHub.