Best resolutions for display on the web for high resolution image?
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?
- (min-width: 400px)
- (min-width: 400px) and (min-device-pixel-ratio: 2.0)
- (min-width: 800px)
- (min-width: 800px) and (min-device-pixel-ratio: 2.0)
- (min-width: 1000px)
- (min-width: 1000px) and (min-device-pixel-ratio: 2.0)
Thanks in advance.
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.