The Picture helper for Optimizely CMS 11 now supports creating webp versions for "all" image formats. Up until now webp versions was only created for jpg images. The reason was that the webp versions where lossy. The webp versions of a png image would get grainy/blurry parts, instead of the solid colors in the original … Continue reading Updates for Optimizely CMS 11 Picture helper
ImageProcessor
PictureRenderer for Optimizely CMS 12
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 … Continue reading PictureRenderer for Optimizely CMS 12
Episerver Picture helper now have option for native lazy loading.
The Picture helper in ImageProcessor.Web.Episerver now have an option to render the loading attribute that enables browser-native lazy loading. This makes it even simpler to optimize the loading of images. If you are familiar with the Picture helper you might already know that there are options for rendering the picture element that supports lazy loading. … Continue reading Episerver Picture helper now have option for native lazy loading.
Control the cropping of your images with a focal point
The Image point editor for Optimizely/Episerver CMS can be used together with the Picture helpers in PictureRenderer.Optimizely or ImageProcessor.Web.Episerver to control the cropping of images. If showing the same image in different height and width on your site, you might want to control how the image is cropped. Let's say you are showing super cool, … Continue reading Control the cropping of your images with a focal point
A dead-easy way to optimize the images on your Episerver site.
Earlier this year i wrote about a solution for optimizing the images on your Episerver site. Since then, that solution has been included in the ImageProcessor.Web.Episerver nuget package. With the Picture html helper included in the nuget it's easy to optimize the images in size, quality, and file size. Images will be responsive, and can be … Continue reading A dead-easy way to optimize the images on your Episerver site.
Optimize your images with ImageProcessor
Optimizing the file size for the images on a site can really improve page load time. This article shows how you can use ImageProcessor to minimize the size of your images. UPDATE: The Picture Html helper described below is now included in the ImageProcessor.Web.Episerver nuget. Read more here. I'm extending the solution for responsive images … Continue reading Optimize your images with ImageProcessor
Picture element + ImageProcessor = responsive images made easy
By using the picture element together with ImageProcessor, you can create a robust solution for responsive images. With this solution you can very quickly make sure that you at least don't serve way too big images. Once that is done, you can add more image sizes and fine tune the media queries, to further optimize … Continue reading Picture element + ImageProcessor = responsive images made easy