3

I'm a programmer, not a designer, but I am trying to learn design as it would be very helpful. I am following a tutorial on PSD|TUTS+ and it doesn't specify the resolution I should be working with. My progress so far does look a little less defined then the screen-shots, so I am wondering if I should be working at a resolution of 300?

Any ideas, or thoughts on the matter?

Improve this question
4
  • 300 is great for print, but unnecessary for the web.
    – Hanna
    Commented Feb 6, 2011 at 19:49
  • 1
    DPI, as a concept, is unnecessary for the web. At least not now. Perhaps if/when the day comes that OSes map screen graphics to actual physical measurements independent of the screen density.
    – DA01
    Commented Feb 7, 2011 at 15:29
  • I am surprised how entrenched the 72dpi myth is. Even as a measure of a screen's pixel density, it's surely been irrelevant for some years. Related: graphicdesign.stackexchange.com/questions/95/…
    – e100
    Commented Feb 8, 2011 at 14:25
  • I think one point that hasn't been touched upon is tool behavior: the smoothness of a selection made with the selection tools will be nicer @ at higher pixel counts, especially with anti-aliasing enabled. So if you are silhouetting an image, you might want to scale up the pixel dimensions before making your selections.
    – horatio
    Commented Feb 8, 2011 at 17:43

2 Answers 2

Reset to default
6

By default browsers display images at the native screen resolution i.e. one pixel in the image maps to one pixel on the screen. The browser ignores any resolution value defined within the image file.

You can of course override this behaviour by specifying a width and/or height value for the image, either as parameters on the <img> element or as CSS rules.

Unless you intend to reuse images at different sizes throughout your page or site there is little point in saving your images at a larger size than you intend to display them. The exception to this would be if you were targeting devices with a high resolution Retina display (e.g. iPhone4).

There are several reasons why the screenshots could look more defined than yours, especially if you have processed any of the images yourself. If you are using JPEGs then the level of compression will affect the appearance of the image as will the compression algorithm used by your software.

Improve this answer
1
  • 3
    Even for the iPhone4, you'd still just be working based on pixel dimensions. There's nothing special about a 960x640 display that suddenly changes that. There have long been mobile devices of similar sizes with resolutions of 800x480 or higher. It still doesn't make sense to have phones with lower resolution screens download memory-consuming hi-res images that will only be displayed at half resolution--especially as the they'd probably look awful without being properly resampled.
    – Calvin Huang
    Commented Feb 7, 2011 at 9:56
2

When working with pixels (which you do with web, always), dpi doesn't matter. However, it does matter when it comes to font sizes (because 1px is not always the same amount in external measurements).

Most people have a dpi of between 72 and 100. I personally use 72 (and it's a bit off on font sizes when I convert it to css). I think windows gives you the options of 96 and 120, so 96 is probably what you want for exactness.

Improve this answer
2
  • 1
    dpi is a print measurement. Doesn't apply to the screen. Screen resolution density is measured in PPI. Typically, these days, that's at least 130. If you're on something like an iPhone 4, you're looking at 326 ppi. Some browsers do let you set a 'assumed' ppi (incorrectly labeled as dpi at times) that refers mainly only to the assumed font scaling.
    – DA01
    Commented Feb 7, 2011 at 14:23
  • While it may technically be ppi, both windows and osx (and a few linux distros) label it as dpi, as does java swing.
    – dkuntz2
    Commented Feb 11, 2011 at 23:18

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.