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.

  • Depending on which devices you want to target, min-device-pixel-ratio of 1.3 may be better. You may want to include min-resolution, too. Info: gist.github.com/3446599 Sep 20 '12 at 10:56

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.

  • Do you mean: "double the pixel size, quadruple the byte size"?
    – horatio
    Sep 19 '12 at 20:03
  • You quadruple the number of pixels in your image.
    – DA01
    Sep 19 '12 at 21:16
  • Double the width, double the height, double the pixel density, "@2x" as the typical iOS image name extension, quadruple the number of pixels... and typically about 270% of the file size. Fun! Sep 20 '12 at 10:54

I don't have solid information on this so I am not sure this qualifies as an answer, but min-device-pixel-ratio appears to be a "flag", like dpi BUT it does not get stored with the image, it is a capability flag of hardware.

An image gets stored by breaking up the image into a grid, where each grid cell is called a pixel (and each pixel is a number represented as a byte). The width and height are also specified as flags: the software reads the bytes as one long chain of numbers, and merely chooses the position of a pixel as it renders, based upon counting and the width/height flags.

At some point, someone decided to specify the ipod screen as a fixed size and the pixel (a discrete number) needed to became flexible somehow. Basically, this means that for the same "visual space" in a pixel ratio 2 device, an image made for 'normal' use needs to be stretched to fit, and stretching tends to look horrible.

The short of it all is that if you envision an image being a certain size for your viewport (say 100px wide), then for a pixel ratio 2 device, you need to provide a copy that is 200px wide. This is so that the pr2 device won't need to stretch the 100px image to fit the same visual space.

The easiest thing to do is to craft everything for PR2 (i.e. make all your images 2x the pixel dimensions that you need) and specify the sizes in css/html. This means you are wasting bandwidth for non-PR2 users, but you only maintain one set of images.

The other way is to work with 2x the pix dimensions, and export a half-size set with a special naming convention such as Yisela suggested. Sometimes this is not acceptable: scaling can blur items especially non-vector type and you will need to work with two versions of the same image, however most of the time there will be no problem.

As far as EXACTLY how big your images should be, this is not an answer that can be given. Your list is a list of min-widths, so your image sizes should be sized based upon the overall size of your site, less margins.

( One wonders what they were smoking when they decided to specify pixels as flexible, since the viewport and display resolutions are also flexible. )

  • Note, I welcome corrections or amendments
    – horatio
    Sep 19 '12 at 19:40
  • Note also that the pixel size being doubled probably also includes any css specified in px units (such as type, line height, div sizes etc.).
    – horatio
    Sep 19 '12 at 20:05

The web standard for (non-mobile) images was 72 pixels per inch (according to comments there is non, or if it is it should be 96). At this resolution images will render nicely, as long as they are of good quality, and should not appear pixelated or distorted. Well, as long as they have the same size of their container. Please correct me if I'm wrong, I always assumed this but I've never worked with such high quality images.

When working for mobile, you need to consider the pixel ratio, so instead of 1=1 (something like 'one physical pixel per pixel space'), you have 2=1 (2 pixels in 'the space of 1 pixel'). My images are usually double the size for mobile (and I call them name@2x.jpg as a convention).

Now, about the actual size. It really depends on how you are going to display them. If you want your images to stretch to fullscreen, you will need to provide very big ones that will look good in all the new big monitors. If they will be inside a container, then they only need to be the size of the container (960 x 800px container = 960 x 800px image).

I've never tried that script so I'm not sure how it loads the images, but it looks like it's calling all of them on document load. If that's the case, a mobile device will have to read and download every single one of them just to just show the small one. This will not only be slow as hell (specially if you have a gallery), but will consume lots of bandwidth. But I'm not sure if that's the case here, so check that.

  • 3
    Ahem. 72 ppi was the original Mac screen (only -- never repeated) resolution, because it allowed 1 px == 1 pt. The ppi of an image is just a metadata setting, irrelevant for the web or mobile devices. The W3C/CSS "standard resolution" (device-pixel-ratio: 1.0) of a display is 96 dpi (note "d" not "p"). A "2x" display is >=192 dpi. As of June, the W3C plan was to supplant device-pixel-ratio with dppx (dots per pixel). (See: w3.org/blog/CSS/2012/06/14/unprefix-webkit-device-pixel-ratio). Still is, afaik. Sep 19 '12 at 6:59
  • @Alan: Not sure that any "standard resolution" value of a display is a useful idea. I'm on a display which is well below 96dpi right now (and actually, why would it be dpi? There are 3 or more dots per pixel).
    – e100
    Sep 19 '12 at 9:12
  • 1
    @yisela: As Alan says, 72dpi (or any other image resolution) is irrelevant: graphicdesign.stackexchange.com/questions/95/…
    – e100
    Sep 19 '12 at 9:16
  • There is no ppi standard. All that matters is the pixel dimensions.
    – DA01
    Sep 19 '12 at 19:48
  • Corrected. I assumed that information (taken from an article) was correct because 72 would be "auto".
    – Yisela
    Sep 19 '12 at 20:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.