Do Retina Images Really Mean Larger Files?
Common sense says yes, but guess what? You can have your cake and eat it too, especially when it comes to picture images.
Long story short, a retina jpeg image can be compressed a lot more before the artefacts interfere with the eye, so much so that they can look better even at a lower file size than a non-retina counterpart, and even when being displayed on non-retina devices. You heard that right.
Take a look at these examples.
In both of these pairs of images below, the first is optimised for retina – being twice the actual dimensions of the first one. The file sizes of both images were kept as close as possible, by adjusting the jpeg compression quality. The retina images are more lossy, having a lower compression quality, while the standard images have a higher quality.
This first image is relatively small and complex. In both cases below, the file sizes are close around 24kb. The retina image (612x612px), displayed at 306x306px) is actually slightly less, and has a jpeg compression quality of 0%. The non-retina (306x306px, displayed as is), on the right, has a quality of 50%.
If you’re looking at these images on a non-retina screen, there won’t be a difference in clarity, even though the first images is in fact double the resolution of the second. If you are using a retina screen to view these, the retina image will be displayed at it’s native size, pixel for pixel, and the other image will be effectively halved in resolution, as many of the images on the web are on retina displays.
This is a larger but simpler image. You can see the retina image has more visible colour chop in the background, suggesting that images with stretches of gradient might indeed need a bit more file-size at retina resolution. Note you’ll have to be using at least 1280×800 to best compare them.
Retina, 19% quality, 90kb
Non-retina, 51% quality, 90kb
Because the retina images are displayed at a higher resolution with more detail, the jpeg compression is harder to discern with the eye. It is more concentrated along the edges and the blocks themselves are less prominent. The lost clarity is more smaller and more difficult to see, while the eye still appreciates the sharpness of the shapes.
But what about when you’re looking at these images on a non-retina screen? The retina image is being displayed at the same resolution as the non retina. How does it compare?
If you are viewing these images on a non-retina screen, there is actually very little if any visible difference in quality.
Check out this blown up comparison between the retina and non-retina images. Remember, these images are the same file size, and both are being viewed on a non-retina screen.
In this case, the retina image being displayed at the same size on a non-retina display looks better than the non-retina image. Wow.
Despite the retina image being twice the dimensions of the non-retina, while having approximately the same file size, the retina image appears to have less jpeg artefacts. The eye notices the clarity of the shapes much more than the tiny jpeg artefacts. So in these cases, and likely many others, you would lose nothing by including a retina image as a fail safe. Actually, you would gain.
This means that including retina optimised images will mean image quality benefits for users on non-retina screens, at little or no additional bandwidth.
Post-publishing update, one more image!
Let’s try a full sized iPhone 4s photo.
The retina image has a compression quality of 19% and is 160kb. It’s 1936x2592px
The second image is non-retina but 64% compression quality and is 190kb in size, a larger file-size than the retina image. It’s 963x1296px. Both are displayed at 963x1296px.
Besides the additional detail in the retina image on my retina MacBook Pro, I don’t see much difference. Unlike the retina flower photo above, there isn’t noticeably more noise in the gradients, but details such as the ripples in the water are clear.