Jud Dagnall Photography Blog

I see a lot of questions regarding the resolution (DPI or dots per inch) of web images. There is clearly much confusion about how to size images for the web. So here goes…

The image DPI resolution does not matter for the web. I don’t know of any web browser that pays any attention to this setting. Image pixels vs. monitor resolution determine the size of web images. Monitors are at a fixed resolution (they only show a certain number of pixels at a time, typically between 800×600 and 1600×1200). So a 600×400 image will be about 1/4 of the size of monitor at 1200×800, regardless of the DPI setting. Just to confuse things a bit, most monitors the US are now at 1000×800 or 1200×1000 pixels, and this will continue to grow as larger monitors become cheaper. And finally, many modern browsers will resize large images so that they fit onto the screen, and then provide a magnifying glass (or some other tool) that allows the viewer to see the full size image by clicking on it.

Keeping your images under 600 pixels wide (and ~400 pixels high) allows the majority of people (on the majority of monitors and browsers) to see the whole image on the screen without having to scroll, including any other things that the website puts above/below/beside the image, like borders, navigation, ads, etc…

Because most monitors are in landscape orientation (wide not tall), the max height of web images should be smaller than the max width (once again to prevent scrolling). This is also an issue when using a digital projector… vertical format images get shrunk (or cropped) more than horizontal images.

For example (ignoring all margins for simplicity), if I have my monitor set at 800×600, I can just display a horizontal image that is 800×600 pixels. However, the same size image in vertical format (600×800) won’t fit (the image height at 800 pixels is greater than the 600 pixels my monitor can display). So I need to shrink the image down 25% to 450×600 pixels so it will fit vertically.