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

by

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.

Answer

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 400×400 image, export it at that size (ppi setting is irrelevant) and then export an 800×800 version for retina displays.

Attribution
Source : Link , Question Author : Jim Jones , Answer Author : e100

Leave a Comment