Are Compressive Images A Good Solution For High Resolution Displays?

Posted: 13 May 2013 05:30 AM PDT

One of the challenges with responsive design is how to handle images. The issue gets more complicated when we consider images optimized for retina and other high resolution displays. Ideally we’ll use vector graphics or icon fonts where possible and even better replace images with code where we can. However, sometimes we need to serve bitmapped images.

One of the interesting techniques that’s been proposed for delivering bitmapped images to retina devices comes from Daan Jobsis. The technique is being called compressive images and I recently had a chance to run an unscientific test with a client and thought I’d share the unscientific results.

Compressive Images

First in case you’re not familiar with compressive images the general idea is that the quality of compression of a .jpeg image contributes more to its file size than the physical dimensions of the image.

Consider two identical images that differ only in their physical dimensions and quality of compression.

800x600px and 0% compression
400x300px and 100% compression

The theory behind compressive images suggests the first, while being physically larger, would ultimately have the smaller file size. If you take that image and reduce its dimensions in the browser you have an image that downloads quicker and has the additional px needed for retina and other high resolution displays.

It’s an appealing solution because it’s relatively easy to implement. However, it’s hardly a perfect solution as the comments to Scott Jehl’s post about compressive images point out.

I was curious what, if any, difference in file size and quality there would be between images of different dimensions and compression and set up a test for a client. I’ve also set up a couple of tests you can check out, which I’ll get to in a bit.

The Client Test

This particular client is a photographer and her site will naturally feature a lot of bitmapped images. At their largest the images will need to be 800px on the longest side. Thinking about the compressive images technique, I’ve had her send me every image at 1600px on its longest side.

Ideally we’d us media queries to serve high resolution images to particular devices, but time and budget make that unfeasible. Since I want to optimize the images for both quality and performance I wanted to test the compressive images technique to settle on the best way to save the one version we’ll use.

I took one of her images and saved it 2 ways.

Full 1600px size with 0% quality compression
Reduced 800px size with 100% quality compression

The file weight of the latter image was about 5 times as large as the former. That’s quite a lot of extra file weight.

I placed both images on a web page and set each to the smaller dimensions letting the browser resize the larger of the two. Then I sent her a link to the page and asked her to have a look and to ask her friends to have a look as well.

This was highly unscientific, but the results were split about 50/50 between those who couldn’t notice a difference and those who could. All who did think one of the images looked better chose the smaller image with the higher quality compression. Unfortunately most of the people responding aren’t the tech-savvy type and I wasn’t able to get them to include the resolution of their monitors.

Those who couldn’t tell the difference reported first and initially I thought I’d use the technique. Later when those who could tell the difference all reported the smaller image as being of higher quality I wasn’t so sure.

When it came time to actually add some images to the site I tested again with more realistic compression settings included.

1600px image was saved at 10% and 20%
800px image was saved at 60% and 100%

When compression on the smaller image was 60% (as high as I usually save images by the way) the difference in file size wasn’t worth using the larger image. In fact it had a smaller weight than the larger 0% compressed image.

In the end I’m using the smaller images on her site, since they aren’t noticeably heavier in terms of file size, but I wanted to conduct more tests to make sure the results I saw weren’t due to the specific images I chose to test.

What Do You Think?

Instead of testing my client’s images this time around, I thought I’d try one of my own. It’s an image I took last summer while eating lunch at Montauk and it’s the one you see at the top of this post. I’ve set up two pages comparing the same image over different sizes and compression settings.

1600 x 1200px vs 800 x 600px (9 images)
800 x 600px vs 400 x 300px (8 images)

If you peek at the file names of each image you’ll be able to tell it’s dimensions and compression settings. The files have been names with the same format of length-height-compression.jpg

Each image was compressed (and resized) using Pixelmator and then run through Image Optim to further compress them. This has become my typical workflow and I wanted to keep the test as close to what I normally do as possible.

If you don’t mind taking a moment, have a look at both tests and look over the images to see if you think one or a few look better than the others. Also, of you don’t mind, let me know the resolution of your monitor. Thanks.

My Observations

I’ve made a few observations while setting up these two test pages. First, I can see a difference in quality. It’s generally located in one specific part of the image, but it’s there. However, had I not been specifically looking for differences in quality I wouldn’t have thought the lowest quality images looked bad.

I don’t currently have a retina display Mac and it’s possible on a monitor with higher resolution I would be more put off by the lower quality images.

In comparing the file sizes of the saved images I noticed

The larger image saved with a compression quality of 10 has a near identical file size to the smaller image saved with a compression quality of 80.
With a compression quality of 60, the smaller image weighs about 2/3 the size of the larger image compressions at 10.

Rarely do I save images with a compression larger than 60, which suggests the compressive images technique isn’t going to work well for me.

For the most part the smaller dimension image ended up with a smaller file size. That had me wondering why, since the articles I’ve read suggest the opposite should happen.

Then it occurred to me what the difference might be. I’m using Pixelmator to compress the images and I suspect those who’ve written before me used Photoshop for compression.

One of the things I’ve learned since I started using Pixelmator is that Photoshop’s compression algorithm needs improvement. It doesn’t compress images as well as it could. I suspect the technique isn’t quite as effective as first thought where file weight is concerned, though it may still make sense for delivering images with more px density to high resolution displays.

Granted everything that’s led me to this conclusion is far from scientific. Once again if you don’t mind check the two test pages and let me know which of the images, if any, look better. I’d also encourage you to run some tests for yourself.

I’ll leave you with a table showing the difference in file size between Pixelmator and Photoshop at various compression settings over 3 different images sizes. The numbers below are after compressing each image in the specific editor and then running each through Image Optim. Above 10% and below 100% the files weigh more when compressed with Photoshop than when compressed with Pixelmator.

Compression	File Size Pixelmator	File Size Photoshop
1600 x 1200
0%	57kb	54kb
10%	76kb	78kb
20%	93kb	110kb
30%	108kb	134kb
800 x 600
0%	17kb	16kb
10%	23kb	23kb
20%	28kb	33kb
30%	32kb	39kb
40%	36kb	49kb
60%	47kb	82kb
80%	73kb	144kb
100%	299kb	298
400 x 300
60%	14kb	25kb
80%	22kb	42kb
90%	31kb	60kb
100%	90kb	86kb