Dithering Images for Stylized Blog Photos

Using dithered images to create a retro effect for your blog photos

Dithering is a method for trying to make an image look good while reducing the number of colors it uses. There are several different algorithms that can be used to create the dithered effect, Floyd–Steinberg being one of the originals. To create these sample images I used a Go program to create the dithered image and then explored using CSS to add a back wash color.

Original Image

The original photo is 863K in size.

Dithered Copy

The filesize for the dithered version is 25K, much smaller than the original, which makes it perfect for a light-weight retro blog. I also used optiPNG to further reduce the filesize.

To produce this dithered copy of the photo, I used the following Go code which uses two colours for the colour palette.

 1package main
 2
 3import (
 4	"fmt"
 5	"image"
 6	"image/color"
 7	"image/png"
 8	"os"
 9
10	"github.com/makeworld-the-better-one/dither/v2"
11)
12
13func main() {
14    img, err := getImageFromFilePath("2025-01-01-new-years-day-france.png")
15
16    if err != nil {
17        fmt.Println(err.Error())
18        os.Exit(1);
19    }
20
21    palette := []color.Color{
22        color.RGBA{R: 25, G: 25, B: 25, A: 255},
23        color.RGBA{R: 255, G: 255, B: 255, A: 255},
24    }
25
26    // create the ditherer
27    d := dither.NewDitherer(palette)
28    d.Matrix = dither.FloydSteinberg
29
30    img = d.Dither(img)
31    SavePNG(img, "2025-01-01-new-years-day-france-dithered.png")
32}

Stylized Version

To create a stylized version of the photo, we can use the CSS mix-blend-mode to add a coloured backwash to the photo.

 1p.hard-light {
 2    background-color:lightskyblue;
 3    display: inline-block;
 4    max-width: 100%;
 5}
 6
 7p.hard-light > img {
 8    background-repeat: no-repeat;
 9    background-size: cover;
10    font-style: italic;
11    height: auto;
12    max-width: 100%;
13    mix-blend-mode: hard-light;
14    object-fit: cover;
15    object-position: center;
16    shape-margin: 0.75rem;
17    vertical-align: middle;
18}

We can then change the colour backwash by changing the background color property.

1p.hard-light {
2    background-color:beige;
3    display: inline-block;
4    max-width: 100%;
5}