Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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, better resolution images will always look better ?
  2. Does this improvement, if at all, depends on the kind of display and underlying hardware etc (for eg is this above case specific for Apple)
  3. Should I always try getting better resolution images ? or there is 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.

share|improve this question
    
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 '12 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 '12 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 '12 at 14:57
2  
This question might be better suited for graphic design SE? –  Charles Wesley Aug 12 '13 at 19:00

6 Answers 6

up vote 4 down vote accepted

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.

share|improve this answer

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.

share|improve this answer

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.

share|improve this answer

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)
share|improve this answer
    
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 '12 at 11:01
3  
It's for printing, not for display on screen. –  Aadaam Oct 12 '12 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. –  MobyD Oct 12 '12 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 '12 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 '12 at 19:30
  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.
share|improve this answer
    
@BennySkogberg Thanks Benny! =) –  AndroidHustle Oct 12 '12 at 12:25

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.

share|improve this answer
    
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 '12 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 '12 at 15:14

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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