Optimizing Images for Your Website

The website’s evolution will never stop.

I went ahead and analyzed the home page and the about page with Cloudinary. Even without registration, Cloudinary offered downloads of the images in the same format (optimized with resizing + compression) as well as in WebP format. I saw that Safari in particular is not able to interpret the WebP format yet: Can I use WebP.

With both WebP and traditional image versions in hand, my intention was to offer both to the browser so it could pick the one that suits it better. At first, I was concerned because a top search result pointed to this article, which described how to apply Apache web server modules so the server can intelligently serve the better available format (based on the browser’s user-agent identifier). The advantage of that approach is that the HTML DOM does not have to be modified. On the other hand, it can be fragile because it has many moving parts, not to mention the fact that with a host like Netlify, I cannot tinker with the web server or application server.

The good news is that HTML5 provides srcset capabilities to serve alternative formats or sizes of the same image (Blog reference, Mozilla reference). The actual construct I used in my commit: W3Schools. I may also use the various size options for the carousel banner images, although with the Material Design Lite transition, those may actually go away.

Now, interestingly, the Lighthouse test results didn’t improve. Seemingly, the served images are still the old ones; perhaps the site somehow cached them? That’s unlikely though, but clearly the sizes shown are for yesterday’s non-optimized versions. I’ll revisit the tests again over the next few days.

Stay tuned for the Material Design Lite transition and headless CMS efforts.