Preparing the images for retina-ready (web)

1
votes

I have a question that have been on my mind for several time now: how should I prepare the images that I am going to use on a website to be retina-ready?

Yes, I have been spending hours on the interweb on this topic, but so far I haven't find the one 'ultimate answer'.

In this thread for example (link: image size for retina display), it is only mentioned that I need to double the dimensions. But how about the resolution?

Real life situation: an image is created using Photoshop (or whatever your fix) at dimension 400px x 200px, with resolution of 72 ppi.
How should I modify this image?

  • 800 x 400px at 72 ppi (just resize it, times two)
  • 800 x 400px at 144 ppi (dimensions and resolution times two)
  • 400 x 200px at 144 ppi (just double the resolution)
  • 400 x 200px at 246 ppi (same dimension, higher resolution --I got the number 246 from some tutorial in designing ipad wallpaper)
  • ...et cetera... ??

The target is to select the images and display them on both non-retina and retina displays (i.e. 'normal' computers / laptops, macs (both versions, retina and non), iDevices, Androids, et cetera)

Looking forward for any feedbacks :-)

3
webphotoshopretina-displayscreen-resolution

3 Answers

1
votes

The question you link is correct. You need to double the size of the image to double the resolution.

What you are getting confused over is the PPI. PPI is Pixels Per Inch, it is simply a measure of how big a picture is, same as display dimensions.

One is not independent of the other.

An image of 400x200 will take up as much screen space on a 72 ppi display as a 800x400 image on a 144 ppi display. The difference is simply that the 144 ppi device is able to fit more pixels in one inch of screen space than the 72 ppi.

So, by doubling the resolution of a 72ppi image, you are indeed insuring that it looks the same/takes the same amount of screen space.

2
votes

You could use Retina.js to replace the image with a higher resolution version, but only if the users device is equipped with a retina display.

0
votes

There's a new responsive images HTML5 standard. As of July 2014 it's only in beta builds of browsers yet. But the Picturefill polyfill is already available.

This article explains different use-cases quite well. But what you want here is to simply provide an alternative image for high-resolution (e.g. 'retina') displays:

<img srcset="small.jpg 1x, large.jpg 2x"
   src="small.jpg"
   alt="A rad wolf" />