Reset password:

Something to think about... / blog
Retina Displays and File Sizes

Written by on November 1, 2013

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?

Photo quality

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.

  • 80% = 536KB
  • 60% = 308KB
  • 40% = 179KB
  • 20% = 120KB
  • 0% = 54KB (50% of our control)

Illustrations

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:

  • 80% = 152KB
  • 60% = 102KB
  • 40% = 66KB
  • 20% = 50KB
  • 0% = 31KB

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?

Share on

Thomas Baekdal

Thomas Baekdal

Founder of Baekdal, author, writer, strategic consultant, and new media advocate.

Follow    

Baekdal PLUS: Premium content that helps you make the right decisions, take the right actions, and focus on what really matters.

There is always more...