2005-07-10: the size of images in your web pages depends on your audience and your goals. However, there are certain ground rules that are crucial:

• 1. Don't make the user scroll your page horizontally. Ever. This makes reading your web page incredibly annoying.
• 2. In most cases, don't make the user scroll vertically to see all of a single image. There are exceptions, like web comics that are designed to be read by scrolling down with the mouse wheel. But even then, there is usually one visual idea per screen.
• 3. If the image is not the most important thing on the page, don't make the user scroll vertically past the image to see the actual content of the page.

So how do we make sure the user doesn't have to scroll vertically or, even more important, horizontally? By making sure that the width of your image, plus the width of your layout, doesn't exceed the maximum width the popular browsers will display without scrolling. We also have to make good assumptions about how wide the user's screen is. Today it's fairly safe to assume the user's screen is at least 800x600 pixels, but there are still significant numbers of users who do not have a 1024x768 screen or larger. See what resolution should I design for? for more information.

Does that mean images on web pages can be 800x600 pixels? No. We have to make room for space on the left and right used up for margins and the user interface of the web browser. As a rule of thumb, we can subtract 40 pixels from the width of the screen. So images should not exceed 760 pixels wide... and that assumes that your page layout has nothing to the left or right of that image. If it does, you'll have to subtract that space too.

You'll also need to subtract vertical space. You lose more space here because the top and bottom of the web browser window and the operating system's "taskbar" area generally use quite a bit of space. We recommend subtracting 190 pixels from the height of the screen. So the maximum height of an image you can be fairly certain the user will see without scrolling is 560 by 410 pixels.

For more information on this subject, see the webstyleguide.com website. See also what image file formats should I use? and how do I create images for my website?

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!

---