free
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?
Almost every time a news site launched something new, they also cover the same stories the same way.
Editorial analytics is the tool we use to define how to report the news.
AIs can be both good and bad, but using an AI to fake some text is always bad.
Many people in the media wants newspapers to be tax exempt, but what about the rest of the media?
Facebook said that it wouldn't block misleading political ads, so let's talk about that
We all knew this would happen, but Google won't pay publishers for snippets.
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é
plus
plus
free
plus
free
free