Serve images in next-gen formats with ImageResizer
How to get started with WEBP format and make the web better, using ImageResizer.
Published 15th Sept 2021
You may already be using ImageResizer to serve your images in the right size and format, if not you can use and download ImageResizer from nuget. And for Episerver/Optimizely CMS sites, you got fancy and popular ImageResizer.Plugins.EPiServerBlobReader plugin from MVP-star Valdis Tech Fellow.
WebP and its advantage
For decades we’ve been using jpgs and pngs, it’s time to move to better formats. As an example, content images with width of 600px being about 130kb, using webp format, serves the same images down to 27kb, WOAW, all this without with minimal quality loss, or not? On a front page with 10 images the savings would be 1mb.
WebP (pronounced Weppy) is developed by Google to reduce the size of images without having to sacrifice quality. WebP images has generally better compression than JPEG, PNG and GIF and is designed to supersede them. Its royalty-free and working in all modern browsers.
Quality loss experiment
Can you spot the difference? (you may open the images in new tabs)
Yes there is small differences. Maybe hard to see in this blogpost, when the images are smaller, you may open the image in new tabs and compare, then you see the details in the dogs furr are blurry. So depending how important the quality is on your site you need to adjust the quality parameter. Anyhow my opinion is that if you use images in listing, and the format is small, the quality can be set to 30%.
Install WebP with ImageResizer
Install ImageResizer.Plugins.WebP from nuget.org
Implement the ImageResizer on the fly formating, see section “How to use with ImageResizer“
Compile and Run the site
“Unable to load DLL ‘libwebp’: The specified module could not be found.“— ASP.NET Version:4.8
If you get the missing DLL libwebp runtime server error when images are called, you might add the downloadnativedependencies attribute like this in web.config:
<resizer> <plugins> <add name="EPiServerBlobReaderPlugin" /> <add name="WebPEncoder" downloadnativedependencies="true" /> <add name="WebPDecoder" downloadnativedependencies="true" /> </plugins> </resizer>
Seems that the lib is downloaded at runtime when the attribute is used, I wonder why it is just not included in the nuget package? always downloads the latest? or is google keeping track of downloads?
How to use with ImageResizer
Examples 1. /contentassets/imagepath/filename.jpg?w=420&h=280&mode=crop&quality=30&format=webp
Example 2. with ImageResizer.Plugins.EPiServerBlobReader and Optimizely CMS:
<system.webServer> <staticContent> <mimeMap fileExtension=".webp" mimeType="image/webp" /> </staticContent> </system.webServer>
Pro Tips – Google Lighthouse report actions
While you are at it working with performance. Google Lighthouse tests, like https://web.dev/measure/ and https://developers.google.com/speed/pagespeed/insights/ will give you the tip to “Displays images with correct aspect ratio”, this is done by just adding width and height attribute on the img-tag. Back to basics. If you have a responsive site, the CSS will override the attributes, but i guess it helps to fasten the first load.
Also by using ImageResizer, you will serve the images in their right properly size, combining it with webp, you will gain kudos in the Lighthouse report.
About the author
– Independent Senior Web Developer
working with Azure and Optimizely