Image Processing to Improve Hugo Site Performance

Not paying for medium? Find most of the same content here: https://blog.concannon.tech/tech-talk/img-srcset/

I was able to achieve a perfect score of 100 on Google Lighthouse by using Hugo’s built-in image processing capabilities to resize my raw image files in the build. Read on to find out how, and to find links to my hosted example!

Hugo Shortcodes to Process Your Images!

If you are unfamiliar with the srcset attribute, it essentially provides a way for a browser to pick the size of an image that is most appropriate for the browser to display at that time. You can read more about it here.

Google Lighthouse

From the Google Lighthouse homepage:

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

I ran Lighthouse against two webpages I created to showcase the effects of using <img srcset=””>, vs. a plain-old <img src=””> .

Direct Comparison Using srcset

So what is the effect on your performance score if you’re not using the srcset attribute? Let’s look at a real head-to-head comparison between two pages with the same images. Note that if you compare these now, the slower example is still going to be pretty good because it is cached by Cloudflare. But Lighthouse will still identify room for performance improvements related to images.

  1. https://blog.concannon.tech/tech-talk/img-srcset/no-srcset
  • does not use the srcset attribute, and uses .jpgfiles imported from my iPhone 11

2. https://blog.concannon.tech/tech-talk/img-srcset/srcset

  • uses the srcset attribute to resize images and employ other best practices (like using alt attributes)

Without srcset

But as you can see from the screenshot below, Lighthouse identified many improvements that I could make related to “properly sized images” and avoiding “enormous network payloads” from the full image downloads.

Google Lighthouse areas for improvement include enormous image sizes and inefficient encoding
Google Lighthouse areas for improvement include enormous image sizes and inefficient encoding

Perfect Score with srcset

Google Lighthouse score of 100 for performance
Google Lighthouse score of 100 for performance

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store