There's no need to spend weeks of researching this stuff yourself! Learn all about retinafying with my ebook Retinafy your web sites & apps.

On the left, you'll see a "native" resolution image, on the right a "retina" (2x) resolution image. The retina images have much lower JPG quality settings, but the quality on a normal display is comparable. On a retina screen, the quality of the retina-resolution images will be much higher.

left: JPEG, 500x508, quality=60, size=87802 right: JPEG, 1000x1015, quality=15, size=83150 (file size -5%)


left: JPEG, 500x332, quality=60, size=45386 right: JPEG, 1000x664, quality=25, size=54358 (file size+20%)