1

I'm working on an ecommerce site and I am trying to figure out at which resolution to save product images.

We usually go for 72DPI but I believe now we should be using PPI, but also that to account for retina displays we need to save two versions of the image; if we want the largest zoom size to be e.g. 300x300px, there needs to be a 600x600px version so it's not blurry on retina.

Does that mean we need to host two versions or one big one which is downsized for non-retina, and if so, does that affect the speed of the website?

But what PPI do I save these images at? Or is it 144DPI at 2x?

Thank you!

Improve this question
4
  • I can be wrong. But we always use 72dpi. Overall pixel size have sense for Retina, not a dpi/ppi setting stored in meta description. If difference in kB of 300x300 and 600x600 image is not big, you can use larger ones and downscale at not-Retina displays.
    – Vnovak
    Jun 19, 2014 at 10:17
  • 1
    You must be mistaken; DPI is for printers, PPI is for screen.
    – SaturnsEye
    Jun 19, 2014 at 11:13
  • 2
    ppi or dpi dont come into play when you generate images for mediums other than print. Only pixels matter. Thats because you adress pixel coordinates on these devices.
    – joojaa
    Jun 19, 2014 at 13:52
  • It doesn't matter what dpi you save it as. Web browsers ignore it.
    – DA01
    Jun 19, 2014 at 15:06

2 Answers 2

Reset to default
2

I have answered a similar question here: Common ground for image sizes when using Photoshop save to web

In short, a very common practice nowadays is:

  1. Save your (raster) images always double the pixel size you will display them. If the image will be displayed at 300x300 pixels, save it at 600x600 pixels.
  2. Using CSS indicate that the image size is actually 300x300 pixels.

This has the small caveat that, on devices that have x1 resolution (non-retina ones) the visitor will be downloading twice the data he actually needs. It is particularly bad for mobile users with tight data plans.

A solution for this could be to keep two versios of the image: one at x1 size (300x300) and another one at x2 size (600x600) then media queries on the CSS to determine the resolution and serve the x2 images only if the resolution of the device is greater than 1 (retina devices).

There are some examples of media queries to differentiate high res devices here: http://css-tricks.com/snippets/css/retina-display-media-query/

A second solution, if you have the option or server side scripting, would be to keep both versions of the image and let the server determine which version should be served based on the resolution of the device requesting it.

Improve this answer
0

cockypup is somewhat right.

For retina displays, you want a 2x original size version - you can do this via the way you name files and some client-side scripting.

As far as enlarged images, the "DPI" doesn't matter - use 72, as you're capped at this for web anyway. Instead of worrying about how many pixels you jam in there, just worry about the enlarging method.

Many sites use the 2x approach by loading a larger image and clipping the non-hovered area. They use a "guide box" to show what is zoomed in.

An easy out would just be click to enlarge (load large image), but I would do this only as a no-javascript fallback.

Improve this answer
1
  • Note that there is no 'cap' on DPI. It's merely a bit of meta data. It's ignored completely by web browsers.
    – DA01
    Jun 20, 2014 at 21:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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