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
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.
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
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.
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
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