Slash page load time using webp format

I recently when to great pains to upgrade a website to the latest versions of .Net and Bootstrap. However, just before it was about to go live I checked the site's performance using Google Page Speed tools. Sadly page load times had become extremely long.

One of the recommendations was to use the webp format instead of png and jpeg which I was using. During the upgrade I had added a lot of images so switching to this format was therefore a priority.

I didn't know anything about the webp format but I quickly found that you can save Photoshop files in the webp format. Unfortunately, it's not one of the Quick Export formats but you can use Save As to save the Photoshop file itself in that format and then use it directly in a website.

Unfortunately, I have over a hundred images on my site so saving each file individually wasn't something that I wanted to do. Instead I found a .Net library called Six Labors which can save png, jpeg, jpg and bmp files in the webp format. In order to convert my png and jpeg files into webp and load them into Azure I developed an Azure Logic App to take the files from my hard drive and connected it to an Azure function which did the rest.

In most cases the results were fine but some files didn't convert well when exported to webp. Therefore, you should check each image before switching using the webp version.