05/01/26 - 08:00
A comment on HackerNews brought the AV1 image format to my attention, and I've decided to utilise it on this site.
So far, the only page with images is the post about the super-resolution photo of a cross-stitch that I made, but I'll make an effort to use it where possible going forward.
Although these days I enjoy a symmetrical gigabit internet connection speed most of the time, for my first few years on the internet, the connections I had accesss to were painfully slow. I think at one point my parents had an ADSL connection, which topped out at maybe 3mbps down and 1mbps up on a good day (megabits, not bytes), if there was only one user in the house. Luckily, I was patient because I'd never experienced much faster, and YouTube still allowed buffering most of a video in the background while you did something else. However, there were likely many sites that I never saw, as I gave up if things didn't start rendering within 10-15 seconds.
The home connection eventually got faster, but around that time I started using a desktop PC, and connected to Wi-Fi with a slow and unreliable USB dongle, so I didn't notice much improvement. It wasn't until I started college that I could (usually) enjoy over 100mbps, and only once I started working did I get used to having gigabit on tap. Once I moved out and had to buy my own internet access, economies of scale in the available providers plans made gigabit the best value (three times the speed for only ~20% more).
So although I now enjoy fast and stable internet, I'm still often aware of web bloat slowing web pages down. It's one of the reasons this site is so minimalist - it's one of my goals that it should be useably fast on slow connections. On my home connection it loads in 137ms, and renders in 156ms, which for most practical purposes is instant. Using Chrome's ability to simulate different connection types, such as 3G, it renders the homepage in 4 seconds (but takes another two to download the favicon), which I'm happy enough with. From analyzing the performance metrics, most of the delay is simulated latency, and with the homepage only being 1.5kb of hand-written HTML and CSS, the cost-benefit trade-off of optimizing it doesn't seem worth it.
However, while the homepage is 1.5kb, the favicon, at a meager resolution of 48x48 pixels, is 15kb. The .ico format doesn't have much in the way of compression, being basically a bitmap, and bitmap images are lossless and therefore large. I could use a different format and save a few kb, but .ico is standard and backward-compatible, and for an optional asset that doesn't affect the user's experience of browsing my site, I've decided it's not worth touching.
Using other image formats for images within pages is a different story. This site is self-hosted from my home server, so there's no CDN or other distribution methods, so it has benefits for both me and visitors.
I swapped out the .png images on the aforementioned blog post for .avif, which roughly halved their size, bringing them from 2mb to 833kb, and 1.2mb to 500kb, respectively. More than a 50% reduction, for under a minute of time, with no visual loss of quality (and I did a pixel-peeping comparison to be sure).
I'm going with .avif as it's now well-supported in most browsers, and it's an open, royalty-free format.
I can appreciate the irony of saving a megabyte on a blog post where the focus of the post is a 400-megapixel, 600mb image, but it was really the only place I could start. Going forward, I can worry 50% less about bloating posts with images, and keep the site 50% more useable on a slow mobile connection.
There are numerous other improvements I'd like to make to my site, such as accessibility and design, but those are still in the ideas phase. This was an easy win.
Addendum 27/08/26: I'm making an exception for web badges, so the homepage is a little bigger and less minimalist now - but still loads in 200ms!