Synopsis

Are you serving images over your website? Try progressive JPEGs!

Use progressive JPEGs!

This will be a short blog, because all I have to say is the following: Use progressive JPEGs, especially if you serve your content over Tor or I2P!

Since when did we stop using them? I remember PJPEG were all over the net in the 00s, and rightly so; progressive JPEG gives your website a faster LCP (Largest Contentful Paint), even with a limited bandwidth. LCP is a broad SEO metric which measures how quickly a webpage is loaded. The shorter it is, the happier your users will be with your website.

PJPEGs dope this metric by interlacing levels of detail across several planes of increasing details which get loaded progressively. The idea is that your users are more likely to prefer a low-quality picture as soon as possible rather than waiting for a full-definition variant to load.

Here's what I mean; below is the cover of Youth Lagoon's debut album "The Year of Hibernation," rendered as a standard JPEG on the left, and as a progressive JPEG on the right. Both pictures weigh 1.5M and are stored under the '/demo' directory, which is rate-limited by Nginx to 16kb/s to emulate a slow internet connection.

By now, the progressive JPEG is probably already displayed while the standard JPEG is still loading. Both files should theoretically render completely at their full resolution at the same time, yet the progressive JPEG can be enjoyed way earlier than the standard JPEG.

I've also configured Nginx to disable client-side caching on both pictures, but I wouldn't be surprised if some browsers act up and cache them anyway. In such cases, pressing CTRL+F5 should replay the demo as intended.

Since you look like a caring and diligent webmaster, I'm going to give you the command to generate a progressive JPEG, assuming you have the 'Imagemagick' package installed on your system;

convert <input-file> -interlace plane <output-file>

Heck, have the script I use for my website too;

#!/usr/bin/env bash

# Check if output directory and at least one argument provided
if [ $# -lt 2 ]; then
    echo "Usage: $0 <output_dir> <arg1> [<arg2> ...]"
    exit 1
fi

output_dir="$1"
shift # Remove the first argument (output_dir) from the arguments list

# Create the output directory if it doesn't exist
mkdir -p "$output_dir"

# Loop through each remaining argument and run 'convert' with it
for arg in "$@"; do
    filename=$(basename "$arg")                    # Extract filename from the argument
    output_file="$output_dir/${filename%.*}.jpeg"  # Construct output filename
    convert "$arg" -interlace plane "$output_file" # Convert the file to PJPEG
done