Why so blurry?

Why do I have blurry thumbnails on the main page?

This is intentionally done to reduce the size of index to minimum in a creative way.

Hugo, the static site generator that I’m using to build my site, creates two sets of thumbnails: higher quality JPEGs and compressed WEBPs.

Before WEBP I used dithered gifs:

{{ $thumb := .Resources.Get "_thumb.jpg" }}
{{ $thumb := $thumb.Fit "1000x750 jpeg q85" }}
{{ $thumb_opt := $thumb.Fit "400x300 webp q1" }}
{{ $opts := dict
    "colors" (slice "0000ff" "999999" "ffffff")
    "method" "FloydSteinberg"
    "strength" 0.5
}}
{{ $thumb_opt := $thumb.Fit "400x300 gif" }}
{{ $filter := images.Dither $opts }}i
{{ $thumb_opt := $thumb_opt | images.Filter $filter }}

Here’s a snipped that compresses thumbnail images for the section.

This is how the page looked like with dithered gifs:

…

This specific setting with FloydSteinberg dithering method and a 3-color palette of blue, grey and white make index page size below 700KB. This posting began as an explanation of “Why is my site so blue?”. I thought of making it even lighter, played with dithering methods and realized that it’s nearly impossible to achieve smaller sizes of thumbnails.

So while experimenting I did something radical and compressed thumbnails into WEBP with the lowest quality. The result looked like this:

…

Index page size is only 94.8KB! Applying blur made the compression artifacts go away and encourage images to be discovered.

And now I can update my 1mb.club membership produly.

2026-01-19

←
2026 Plans →
I want