Can bigger images be smaller?

If you make a JPEG twice as wide, then show it half size on the page, can you really compress it to a smaller file size than the original?

This article on resizing photos for Apple's Retina displays has caused a lot of discussion. Daan Jobsis has produced a lot of examples comparing a 600-pixel-wide JPEG image, compressed to 30% quality, and displayed on a webpage at half size, with a 300-pixel image compressed at 80% and displayed at full size. They seem to show that the larger, more compressed image not only looks better, but also has a 25% smaller filesize. What's more, it looks better on a normal monitor, not just on a Retina display.

As the commenters point out, there are two problems with his methods. First, there's a rogue CSS rule which is scaling all the control images down to 97.5% and making them look significantly less sharp. This gives the double-size images an unfair advantage. Secondly, his images are not optimally compressed, and in particular the site JPEGMini is recommended as a way to get them smaller.

So I tried it out myself. The results are below. TL;DR? If you compress everything properly, you can get decent results with double-size JPEG images at about 20-50% bigger file size, not 25% less. Or use WebP with a shim for tiny files, but really slow loading.

I selected an image from Wikipedia. The original is 2728 x 2088 pixels and 1.20 MB, and I resized it using GIMP to the two resolutions used here. I chose a photograph with detailed and blurry areas, hard and soft edges, subtle and bright colours, to really put the compression through its paces.

First, the standard JPEGs as saved by GIMP. I used Progressive encoding because it resizes better on Retina displays. It's obvious that you can increase the compression on the larger image, but since both small and large images are already optimised, I can't get the double-size image smaller than the original. It goes down to 32.1 kB at 30% compression, compared to 26.5 kB for the standard-size image at 80%. That's 21% bigger. Then there are two tweaked versions. Performance is just slightly better with smoothing set to 0.10, but that will vary depending on the amount of fine detail in the image. I think the image quality is roughly as good as the standard-size version on a normal monitor (blockier background, but sharper and with less fringing artifacts). The smoothed 30% large version is 19% bigger in file size than the standard version. There's also a version with higher-quality 4:2:2 subsampling, compressed a little bit more (27% rather than 30%) to get a similar file size. This looks sharper on the Retina iPad, with the reduced subsampling more than compensating for the extra compression.

Comparison of images at native and double resolution at varying compression levels.

All very well, but what about this JPEGMini everyone's talking about? The site works some kind of secret voodoo to shrink JPEGs, even if they're already optimised, without affecting the perceived image quality or compatibility. The examples below show that it works, although for images that are already highly compressed, it takes off very little. The results look no different to above, but are slightly smaller. Because it's more effective on higher-quality originals, it's increased the file size gap between the standard 80% image, now at 22.8 kB, and the double-size image, practically unchanged at 31.5 kB in the 30% version with smoothing. This time, the double-size image is a 38% bigger file.

Comparison of images at native and double resolution at varying compression levels, after recompression with JPEGMini.

Quality

400px native resolution

800px scaled to 400px

80%

22.8 kB

62.8 kB

60%

18.5 kB

47.9 kB

40%

15.1 kB

37.7 kB

30%

13.2 kB

32.0 kB

30%smooth 0.1

13.0 kB

31.5 kB

27%4:2:2 vertical

13.2 kB

31.9 kB

That's a pretty good solution. But what would Google do? Their JPEG-killer WebP format doesn't work natively on the iPhone. It's only got native support in Chrome and Opera. However, there's a fix for that: WebPJS is a really clever JavaScript hack that enables WebP support on everything from IE6 to Safari on the iPhone, by coverting them to inline png images. It's implemented here.

The results are impressive. WebP goes much smaller than JPEG for this image, with a similar overall quality. WebP doesn't suffer from fringing as JPEG does, but seems to lose more fine detail, even at higher quality settings. There's also more blockiness in the background, but that becomes less apparent in the double size image.

The disadvantage of using WebPJS is that it's really slow. The images may download faster, but processing them in JavaScript takes several seconds on a low-end computer or an iPad. (I'm not blaming the author for that - JavaScript isn't meant for image processing!) There's also the one-off 68kB overhead of downloading the script file. So unless you're targetting Chrome or Opera exclusively, this isn't a great solution.

The WebP images in this test were generated from 400px and 800px full-colour PNG files, using Google's cwebp utility, version 0.2.0. It seems they respond better than JPEGs to the double-size technique, with the double-size version at 20% quality just marginally smaller than the full-size at 80%, looking just as good on a standard monitor and better on a Retina iPad.

Comparison of images at native and double resolution at varying compression levels, using the WebP format.

Quality

400px native resolution

800px scaled to 400px

80%

16.9 kB

45.4 kB

60%

11.5 kB

31.3 kB

50%

10.2 kB

27.8 kB

40%

8.98 kB

24.1 kB

30%

7.62 kB

20.4 kB

20%

6.23 kB

16.8 kB

What about PNG?

Looking at sites like pngmini.com, you might start to believe that a properly optimised PNG can beat JPEG and WebP hands down. Sadly, that's not the case for this picture. It has too many colours, and the well-crushed 8-bit version of the 800-pixel-wide image still tops 200 kB. But if you're dealing with a more restricted colour palette, give it a try.

Top 4

There's no magic bullet, we still have to find a compromise between quality, file size and compatibility. The best four from my test results are:

The double-size jpeg with the reduced resampling has noticeably brighter colours than the others. It looks very sharp, too, but the blurred background is noisy. The standard WebP image looks better than the double-size on a normal monitor, but the double-size wins on Retina. I can't recommend WebP for general use, despite the file size savings; the overhead to get universal support is too much. So, sticking with JPEG,