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 described in another article, but the techniques shown here can be used with any site that uses ImageProcessor. In the end it’s just querystrings that are appended to the image url.

I’m extending my picture html-helper with these three improvements:

Use the “correct” image size

The “main” image on a page might also be used as a thumbnail-image when pages are listed. The thumbnail might be square and the original image might have the aspect 16:9. In that scenario you want to change the aspect ratio when resizing the image to thumbnail size. Specifying the aspect ratio for an image also makes sure that the correct image size is used even if the original image has the wrong aspect ratio.

ImageProcessor parameters that sets correct size: width, mode and heightratio

Tweak image quality

It’s possible to change the quality settings for jpeg and webp images. For most images I think that quality value 80 is a good compromise between file size and image quality. A small thumbnail image might look good with a lower quality setting, and for high-res product images I might decide to use a higher quality setting.

ImageProcessor parameter: quality

Use webp when possible

Unfortunately the webp format is basically only supported by chrome, but that may still be around half of your visitors. My experience is that when using webp the file size will decrease more than 30% compared to jpg. That is a big improvement!

To support webp you need to add the webp plugin and use parameter format.

Improving the picture html-helper

Let’s add these features to the picture html-helper described here

I’m extending the ImageType with a quality setting and aspect ratio. These settings will be used when creating the markup for the picture-element.

 

When the image is of type .jpg, the picture helper will create an additional src-set with webp-versions of the image. By setting type=”image/webp” we tell browsers that support webp that it can select that image instead of the original jpg. Browsers that don’t support webp will fallback to using the jpg versions.

 

Happy imageprocessing 🙂