: Photoshop Resolution for Web Design? 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

@Bethany839

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.

Vote Up Vote Down

@Berumen635

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.

Vote Up Vote Down