I'm spending this day in maintenance mode doing backend stuff, and I started thinking about Retina quality images and their file sizes.
As you might know, I recently posted about how both Apple and Google's product web pages are huge. Apple's iPhone 5C page is 25MB in size, and Google's new Nexus 5 page is 8.3MB. That's an insane amount of data that people have to download to see just one page.
And then I remembered that I once read about how low compression quality in images can't be seen on Retina quality screens. The much higher resolution makes the image artifacts too small for our eyes to find. And as we all know, the more compressed an image is, the smaller it is (and thus faster to download). So... I decided to do a quick test.
Below are two images in seven different qualities. Can you tell the difference?
The first image is this nice photo. The image below is our 'control'. It's a non-retina quality image. It's exactly the type of image that I would post before we had retina displays. It looks alright, but also slightly pixelated.
Size: 108KB - Non-retina
The next image (below) is a max-res retina quality image, at 100% quality (i.e. no compression). It's huge. At 1.1MB in size, it's more than 1000% larger in file size, but one must also admit it looks quite good.
Size: 1.1MB - Retina - 100% quality
For the next five images, we are going to reduce the quality by 20% for each image. The first one is at 80% quality, and the last one is at 0%. As you can see, it is almost impossible to tell them apart, but the difference in file size is just crazy.
Now let's move on to illustrations and let's do the same test as before. The first illustration (below) is our 'control'. It's a non-retina quality JPG exported the way we used to do it in the old days.
It looks quite pixelated on a retina display, but it is also only 51KB in size.
Next is our full-quality max-resolution retina quality illustration. It can't get any better than this.
Size: 253KB - Retina - 100% quality
That were the two extremes, now let's gradually reduce the quality by 20% for each of the below illustrations, just like before:
Which one would you choose as being acceptable? Mind you, I don't want you to compromise. I want the best quality I can possible get, but only to the point where you can no longer tell the difference.
There is no reason to create larger files than what your eyes can see.
To me, the best acceptable quality is an amazing low 40% quality (maybe even only 20% with illustrations). What do you think?
Founder, media analyst, author, and publisher. Follow on Twitter
"Thomas Baekdal is one of Scandinavia's most sought-after experts in the digitization of media companies. He has made himself known for his analysis of how digitization has changed the way we consume media."
Swedish business magazine, Resumé