Advertisement


Best resolutions for display on the web for high resolution image?


Question

I have a RAW image taken with a Canon 5D, so the image's resolution is 5,616 × 3,744.

I am going to display a different resolution of the image depending upon the requesting user's display. I'm utilizing this library ( https://github.com/scottjehl/picturefill )

The RAW image is imported into Lightroom.

For each of the following display criteria, what should I be exporting the image as in terms of resolutions, pixels per inch, etc?

  1. (min-width: 400px)
  2. (min-width: 400px) and (min-device-pixel-ratio: 2.0)
  3. (min-width: 800px)
  4. (min-width: 800px) and (min-device-pixel-ratio: 2.0)
  5. (min-width: 1000px)
  6. (min-width: 1000px) and (min-device-pixel-ratio: 2.0)

Thanks in advance.

2012/09/18
1
4
9/18/2012 9:54:00 PM

You export them at the pixel dimensions you want. Then, for retina displays, you save a copy at quadruple that size, i.e. twice the number of pixels in each direction.

So, if you want a 400x400 image, export it at that size (ppi setting is irrelevant) and then export an 800x800 version for retina displays.

2012/09/20
3
9/20/2012 9:49:00 AM