Web in progress
A few words on rebuilding this site, what I learned about image optimization the hard way, and why the next iteration will probably be Markdown.
This site has been a long-running side project. I've rebuilt it two or three times, each time with a different idea of what a personal page should be. The first version was a static page with a few links. The second one tried to be a portfolio of photos. This one is just a notebook.
What I wanted
I wanted a place where I could throw things like a photo, a quote, a half-finished thought. I wanted it to be green and to have some Y2K-era appeal.
The image problem
The photography page was the first real test. I had 38 photos hosted on a third-party image service, each around a megabyte, all being requested at full resolution even though the grid only displays them at 300 pixels wide. The page technically worked, but it was slow in a way that didn't match how the rest of the site felt.
The fix had three parts:
- Download the photos locally so I control the formats and sizes.
- Generate two WebP variants per photo (600w for the grid, 1200w for the lightbox) and serve the smallest appropriate one via
srcset. - Move from a single mega-page to one cover page with sub-pages per session, so the browser only loads the photos in the section you're actually reading.
The bytes-per-page dropped by about 80%. The site felt faster, and it also felt more honest, each session became a thing with its own URL, instead of a scroll-soup of every photo I'd ever taken.
If the site takes long enough to load that the user notices, you've already lost the argument that a notebook is supposed to be quiet.
Now I'm using Lazyvim to edit the site. Also, I'm using an AI assistant called Chii to help me to write the site. Probably many people are against the use of AI in these sites, but for me it's the easiest way to learn, and if I don't rely on my assistant, this site will become a chore and not a hobby.