Fight pixel bloat with a dash of math

The rundown

Deciding how far to compress an image is more than guesswork.

When you calculate bytes / (width × height), you know how much each pixel “weighs.” Whether your image has 100 pixels or 1,000,000, understanding the ratio will help you balance quality with load time.


Pixel weight impacts load time

There’s more to optimizing raster (pixel-based) images than setting JPG compression to 40% or whatever. With identical dimensions but different compression, one of these photos will load faster than the other.

Orographic clouds in the Santa Cruz Mountains
Orographic clouds in the Santa Cruz Mountains.
Orographic clouds in the Santa Cruz Mountains
It was a breathtaking sunrise on my way to Big Basin Redwoods State Park.

“Image weight” is the number of bytes per pixel. The more bytes an image has, the more it weighs — and the longer it takes to load. But fewer bytes per pixel is lower quality. So balancing load times with image quality depends on pixel weight.

Great. How much does a pixel weigh? How much should a pixel weigh?

Weighing pixels with a little math

In my experiments, I discovered that a certain ratio leads to the best pixel weight possible. To get that ratio, calculate bytes / (width × height).

No, the math isn’t hard. Let’s say you have a photo that’s 300 × 400 pixels. To keep the example simple, let’s also say the file has precisely 50,000 bytes.

  • 50,000 bytes / (300 × 400)
  • 50,000 bytes / 120,000
  • Result: 0.42, give or take.

So each pixel “weighs” 0.42 bytes.

How about a larger image? Say, 1700 pixels tall, 1208 pixels wide, and 934,000 bytes? (True story.)

  • 934,000 / (1700 × 1208)
  • 934,000 / 2,053,600
  • Result: 0.45

Even though this example has more pixels — two million more — each pixel in both examples weigh almost the same (0.42 and 0.45, respectively). The second image may take longer to load, but it does so for a reasonable result. You get about the same bang for the buck.

The third example is different. With a file size of 124,000, and 650 × 800 pixels, the byte/pixel ratio is 0.24. That’s fantastic for load times. Quality … not so much. Lower rates mean higher compression, degraded quality, and lousy presentation.

Aiming for a quality target

From experimenting, I found good rule of thumb is to get the ratio between 0.18 and 0.25 bytes per pixel. In other words:

b=(w×h)/4

or

b=(w×h)/5.5

Yeah, I know, more math. Here, I calculated some common ratios for you:

PixelsBytes
800 × 1000145,500 – 200,000
800 × 60087,250 – 120,000
740 × 50067,250 – 92,500
600 × 60072,000 – 90,000
1024 × 32065,550 – 81,920
480 × 64055,750 – 76–800

(Note: The math treats width and height interchangeably. 100×200 is the same as 200×100.)

Going forward

I’m not advocating the sacrifice of quality for speed. In my experience, the 0.8–0.25 target is a good balance for most cases. I wouldn’t recommend going above 0.6, however. Beyond that point, you’re adding file size (slower load times) for practically no increase in quality.

Bloat without benefits keeps people waiting for no reason.