General note: This site’s appearance, configuration, hosting, and other basic considerations will change over time. As a result, certain content on this page could be at variance with what you’re currently seeing on the site, but the two were consistent when this post originally appeared.
The phrase has been around for about a century: “A picture is worth a thousand words.”
Sometime, it’s worth even more than words. And that’s why there are big ol’ pictures back at the top of each of this site’s posts.
Back in February, I explained why, for the first time since this site’s birth, each post was no longer including a featured image—a “hero image"—at its top. The gist of it was my feeling that having the images no longer justified the site performance hit, and the extensive pre-processing, that their presence required.
Near that post’s end, I said:
Will I miss the hero images? Perhaps. Maybe some of you will, too. And I did think they added a nice feel to things at times. Nonetheless, I hope this decision . . . will ensure that each visitor’s browsing experience will be the best possible.
So, yes, I did leave myself some “outs” there.
While not a single visitor complained about the featured images’ departure, in time I did miss them. But I’m a big (old) boy, and I figured I’d get over it, especially since the site presumably would work better without them.
Recently, though, I decided that, especially in these troubled times, I not only wanted but also flat-out needed to see big, (usually) pretty pictures atop my posts once again. By coincidence, I simultaneously realized that this site in even its sparest form was never going to rank among the fastest in the stable of Eleventy-using sites.
That gave me some leeway.
As long as I didn’t get crazy and I made a few sensible choices here and there concerning the site’s structure and build processes, I could bring back the images while still keeping decent performance.
The site just had to go on a diet. If we were going to put a big piece of pie on each page again, we had to trim some other things to make up for it.
So here’s what happened.
- Lazy-loading—After having used the LazySizes library for lazy-loading images, I opted instead for LazyLoad, sometimes called “vanilla-lazyload.” It does everything I require of this kind of code, but is a smaller download and also seems to be a more efficient steward of browser resources.1
Responsiveness—After I took the site off webpack, I used an Eleventy plugin to create responsive images and inject the appropriate
<picture>HTML into site pages. However, with the return of the hero images, a typical build to Netlify ballooned well past the four-minute mark. Since the Netlify free plan is for 300 build minutes per month, and my site typically has quite a few builds a month, I needed another answer. That turned out to be a combo of two previous efforts of my own: the Sharp-powered
imgxfm.jsbuild-time script for creating responsive images (including highly efficient WebP-formatted images for compatible browsers), and the
lazy-picture.jsshortcode for simplifying placement of those images in my posts.
System fonts—The first fifteen months of this site’s existence, I’d been content to stick with the so-called “system font stack” and reap the performance benefits thereof. Then, with the integration of webpack last December, the site used web fonts for the first time. For the first couple of weeks after dumping webpack, I kept the web fonts, first by self-hosting them and then briefly delivering them straight from Google Fonts. But my re-embrace of Tailwind CSS—which defaults to that same “system font stack”—presented a perfect opportunity to go back to it, so I did.
From the earliest days of this site, I’ve said the following on the home page:
I hope you find this site a source of various little nuggets of helpful info, and occasionally a laugh or two—even if I hadn’t intended it, but especially if I had.
To that, I now add the wish that you find pleasure in the presence of the featured images. Sometimes we just need to take a moment at look at a picture that’s pretty, or interesting, or thought-provoking. Or all of those. Sometimes we just need to feel good about something being where it is, even if it has no practical value.
And, as another way of trying to make you feel better: I uncharacteristically kept this post well under a thousand words (counting footnotes).
Or, counting that big, colorful item at the top of the page, perhaps I should make that “well under two thousand words.”