6

I have had this perception that for a given size, higher resolution pictures will always look better than the lower ones.

But on this link in StackOverFlow I read something different.

So my questions :

  1. For a fixed size will higher resolution images always look better ?
  2. Does this improvement, if at all, depend on the kind of display and underlying hardware etc (for example is this above case specific for Apple)
  3. Should I always try getting better resolution images? Or is there a limit after which human eyes will not really be able to differentiate this improvement because of resolution change ?

PS: I am not taking about the print qualities of these images, but the visual experience one gets from seeing them on screen.

I will clarify more.

I have to use an image of size 800x600px(Fixed).

I have 3 options : 900 dpi Image, 600 dpi image, 4oo dpi image, all in size 800x600px.

Is it always a good idea to use 900 dpi above 600 and 400 ?

And above stated questions follows with this data.

Improve this question
4
  • It's not immediately clear what you are asking here, the link you provide refers to icons for Apple devices. But I get the impression you are speaking here of general images.
    – Daniel Meade
    Oct 12, 2012 at 9:43
  • Yes Daniel, I am asking in general. I have asked in point 2 of my question whether this phenomenon is only for Apple products or any general display ? And hence the link.
    – Amit Tomar
    Oct 12, 2012 at 9:52
  • 1
    This part doesn't really make sense: "I have 3 options : 900 dpi Image, 600 dpi image, 4oo dpi image, all in size 800x600px"; if they all have the same pixel dimensions, then an image with more dots-per-inch is not higher resolution but rather smaller physical size. For example, at 900 dots per inch, 800x600px is less than one inch square.
    – ruakh
    Oct 12, 2012 at 14:57
  • 2
    This question might be better suited for graphic design SE?
    – Charles Wesley
    Aug 12, 2013 at 19:00

6 Answers 6

Reset to default
8

Completely ignore DPI settings in your image software. It has no bearing on web graphics.

All that matters is pixel dimensions. A 100px x 100px image at 300dpi is the exact same image on screen as a 100px x 100px image at 100dpi.

DPI only comes into play when you're talking about print graphics.

Where you may want to consider a larger image on the web, however, is with retina graphics. Again, DPI is irrelevant, but the key is that you double the pixel dimensions. So you'd have a 100x100 image for regular browsers and 200x200 for retina.

Improve this answer
7
  1. Depends on the PPI (Pixels Per Inch) of the screen. High resolution icons will not look any different on a low density screen than a low resolution icon.
  2. It all depends on the underlying hardware. Pouring rocket fuel into your car doesn't turn it into a rocket ship.
  3. You should provide images that will suite the screen properties of the devices you suspect the application to be run on.
Improve this answer
0
7

In digital media, you can't really separate pixels from density (DPI).

That's because one pixel is one dot.

so, if your picture is 400 DPI, and it's 800 pixels wide, it means it's two inches.

Unfortunately, you can't define the DPI of a device (it's a given), it's somewhere between 326 (iPhone 5) and 100 (average LCD laptop monitor).

The Retina Macbook Pro has about 220 DPI resolution, and honestly, I can't really differentiate it from a standard Macbook standing next to it, albeit Apple claims it's better. Perhaps my eyes are getting weary.

But the real takeaway is: in digital media, DPI can't be set in photoshop, it's the property of the device.

So:

  1. grab some mobile phones
  2. look up their screen resolution (eg. 1136x640 for iPhone 5)
  3. decide how much screen estate you want to occupy relative to the size of the device (100% = full screen width, 50% = half screen, etc)
  4. Multiply resolution with screen real estate (so, 568x640 if you want to occupy half of an iPhone 5's screen)
  5. Do this for multiple devices and try to find 2-3 good average sizes.

Or, in case you come from vector graphics:

  1. grab some mobile phones
  2. look up their PPI
  3. export your image according to their PPI (but don't set physical size, let the application calculate that)
Improve this answer
9
  • DPI can't be set in photoshop, it's the property of the device. I cant comment on Photoshop, but see this for GIMP. Why is there an option to specify PPI along with width and height then ?
    – Amit Tomar
    Oct 12, 2012 at 11:01
  • 3
    It's for printing, not for display on screen.
    – Aadaam
    Oct 12, 2012 at 13:28
  • 2
    "one pixel is one dot" God I wish that were true. And I personally am astonished by the DPI on the Retina Macbook. It was night and day for me, but I'm a video/photo guy so I'm a snob about that kind of thing.
    – Will
    Oct 12, 2012 at 15:12
  • 1
    It's mostly a 1to1 relation but on retina, 1px is not necessarily one device pixel. For example, on a retina device, 1px in CSS is actually 4px on the screen itself.
    – DA01
    Oct 12, 2012 at 15:15
  • 2
    DA01 and I are both graphic designers so I think we have a decent handle on it. To clarify: I don't think you are confused, only that your explanation is confusing. It seems to me that you are pretty clear on the concept. The confusion most people have is that at the time of raster image creation, inches just don't exist. DPI is a flag or suggestion which has absolutely no bearing on the notation or storage of the "actual" image data and can be altered without adjusting, adding or removing pixels.
    – horatio
    Oct 12, 2012 at 19:30
1

When dealing with images, it's always best to take the responsive approach. That is, serve up the image at the best possible fit for the device of the viewer.

It's all about load times here, a large image may take less than a second to load on a desktop with todays broadband speeds, but try to load that on a Mobile device using only 3G and you'll be lucky if the browser doesn't time out.

Break down your image into 3 or four different resolutions, one for each of the following:

  • Desktop (Large browser > 960px)
  • Desktop (Small browser window < 960px)
  • Tablet
  • Mobile

Remember to compress your images (as far as you're happy in terms of quality) as much as possible to reduce file sizes and therefore load times.

Improve this answer
2
  • Daniel, Image size is constant for my use case. I am just concerned about using an image with better Dots Per Inch.
    – Amit Tomar
    Oct 12, 2012 at 10:00
  • 1
    @AmitTomar you have no control over dots-per-inch online. You can't change the dpi of a user's screen.
    – DA01
    Oct 12, 2012 at 15:14
0

There's no added benefit to downloading an image with a higher DPI than your highest supported screen DPI. At that point you are downloading larger images than you need. Scaling distortion and anti-aliasing could even hurt the quality o the image in those cases.

Improve this answer
0

In order to mitigate the differences in pixel size, Apple introduced the concept of 'points' as a measure of size across different iOS devices. There's a pretty clear explanation in the iOS developer library:

In iOS, all coordinate values and distances are specified using floating-point values in units referred to as points. The measurable size of a point varies from device to device and is largely irrelevant. The main thing to understand about points is that they provide a fixed frame of reference for drawing.

Read more here.

What it comes down to is that if you produce artwork with a resolution of 2 pixels per point, you should be safe, even for retina displays. iPhones have a size of 320x 480 points and iPads have a size of 768x1024 points.

Improve this answer

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.