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)

Conclusion quality

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:

@Html.ResizeImageWithFallback(Model.CurrentPage.Image,
“/content/img/defaultimg.webp”)
.Width(795).Height(530).FitMode(FitMode.Crop)
.Add(“quality”,”30″).Add(“format”,”webp”)”

NOT WORKING?

Add mimetype:

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

Links

• https://imageresizing.net/
• https://github.com/imazen/resizer/issues/191
• https://github.com/valdisiljuconoks/ImageResizer.Plugins.EPiServerBlobReader
• https://web.dev/uses-webp-images/
• https://web.dev/image-aspect-ratio/
• https://web.dev/uses-responsive-images/

About the author

Luc Gosso
– Independent Senior Web Developer
working with Azure and Optimizely

Twitter: @LucGosso
LinkedIn: linkedin.com/in/luc-gosso/
Github: github.com/lucgosso