As Lightweight As I Can
After my first tries with Weblog’s customization, I decided to work on something similar to LowTechMagazine’s approach to pictures: since their whole website (which is Hugo-based, by the way) is hosted on a solar-powered machine, every kilobyte counts.1 Since I don’t care having high resolution images on my blog, I thought: What if I dither them?
Until a few weeks ago, I think I never heard this term, even if I had already heard about Floyd-Steinberg using image-editing tools.
So, after some research and a few questions to ChatGPT, I created a simple script that swaps the src of an image in a <figure> HTML element with the same one, but with (or without) the _dithered suffix.
So, if I put filename_dithered.jpg on this blog, a nice button appears in the caption that swaps it with the original image.
And also, if the user clicks on the dithered image, the original one is zoomed full-screen.
Of course, I thought about error handling: what if the dithered version of the image, or the non-dithered one, does not exist?
A <div> simply appears, telling that the alternate version of the picture does not exist.
Here is the script.
Was it simple to make? Quite.
Is it useful? I don’t know, but surely this blog is pretty light. Of course, I can always get better.
Look at this cutie sleeping. She’s just 12KB. If you click on her, her chonkiness prevails, and she grows up to 92KB!
Don’t Forget To Squoosh Your Images
One final note: the original image is compressed too, using Squoosh, a formidable web app that allows to quickly compress pictures. Light images make the browsing experience faster, and everybody is happier. In my opinion, every pic on the internet should be squooshed.
🎧 Some more Gojira
📖 The Dark Forest, about 80%
-
This may be a reference to The Bear’s “every second counts” slogan in Season 3. ↩︎
After my first tries with Weblog’s customization, I decided to work on something similar to LowTechMagazine’s approach to pictures: since their whole website (which is Hugo-based, by the way) is hosted on a solar-powered machine, every kilobyte counts.1 Since I don’t care having high resolution images on my blog, I thought: What if I dither them?
Until a few weeks ago, I think I never heard this term, even if I had already heard about Floyd-Steinberg using image-editing tools.
So, after some research and a few questions to ChatGPT, I created a simple script that swaps the src of an image in a <figure> HTML element with the same one, but with (or without) the _dithered suffix.