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.
“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:
| Pixels | Bytes |
|---|---|
| 800 × 1000 | 145,500 – 200,000 |
| 800 × 600 | 87,250 – 120,000 |
| 740 × 500 | 67,250 – 92,500 |
| 600 × 600 | 72,000 – 90,000 |
| 1024 × 320 | 65,550 – 81,920 |
| 480 × 640 | 55,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.