Retina images and jpg compression

Retina images are images that have more pixels than the css pixel width that they are displayed at. This allows devices with higher pixel ratios to take advantage of that extra data to display higher quality images.

These examples show the effect of jpg compression artifacts on retina images:

width: 300 display: 300 q90 24KBwidth: 600 display: 300 q100 201KB

On a retina display you can see the the difference above quite clearly. Below you can see that even at high compression, the higher resolution images are still preferable, and the compression artifacts are not too noticeable.

And because desktop browsers usually have a pixel ratio of 1, these images will be downscaled by the browser and hide even more of the jpg artifacts on desktops.

So you can save quite a bit in file size by using lower quality jpg compression, without sacrificing too much on perceived quality. Obviously, in certain applications the jpg artifacts will not be acceptable, but in those cases you will also not worry about a few extra bytes.

For comparison - these images below are scaled down 3x in the browser, for devices with a pixel ratios of 3.

width: 900 display: 300 q30 39KBwidth: 900 display: 300 q90 131KB

The following images are the same as above, but displayed at their native resolution, except for the first image, which is the non retina image displayed at twice its size for comparison.