hamiltro website design


321 West 24th Street, #5B, New York, NY 10011 • Tel 212-397-1312

What Size Should Images Be For a Web Page?

Approximately 85% of web-users now (2009) have a screen resolution of at least 1024 x 768 pixels but there are still users who are on computers with 800 x 600 pixel monitors and this is something you need to consider when choosing an image size for your website pages.

Even as monitors offer more and more screen space, you need to keep some of that for headers and text, and you need to take into account how much of a monitor the browser takes up (address bar, scrollbars, etc). What you don't want is for anyone to be unable to view the entirety of your image within their screen. And if you personally have a large, high-resolution screen and you're wondering how much space there is on an 800 x 600 screen, click HERE to see what that comes to. Not much. (This link will only work if you have only one browser tab open, btw.)

The other consideration when choosing image size is that the larger your image, the larger the file size. This becomes particularly important if you are choosing to have a viewing option whereby viewers can view one image after another via thumbnail rollovers or similar navigation techniques — that is, without clicking through to a new page for each new image — because in these cases, all the images to be viewed this way need to be pre-loaded as the page loads for this to work.

If you are creating a gallery of many images to be viewed, you'll most likely have a thumbnail version of each image to facilitate the click-through or rollover view of a larger image. What you can also do, if you want to be conservative about image size here, is have a still-larger image available for viewing after that — either as a pop-up or in a separate page. Or, you can just provide a link to the much-larger image directly and today's browsers will open it to fit the viewer's monitor size.

So, what is the best image size to choose? The image above is 606 px wide and 400 px high. Somewhere around 400-500 pixels high is pretty safe for most situations — with the higher end of this perhaps being challenging for older browsers but poised to look better on newer browsers. Resize your browser now so you can see how much space you'd have around this image if you were viewing it with an 800x600 monitor (this will only work if you have only one browser tab open) — then open up your browser window to see how the image looks with your window the way you'd personally often have it open. And then think about the fact that monitors are getting larger with every year.

Also keep in mind what other elements you want to have on your page with the image — your page headers, navigation, captions, etc.

Keeping the height the same for all your images can be a good thing so that your layout doesn't jump from image to image. The other alternative is to use a max-height and center your images within a fixed area. It's your call but here are some examples of main image sizes I have used, with the larger ones first.

480px fixed height (widths vary; images are left-aligned)
480px max height / 640px max width (images centered)
450px max width/height (with direct link to larger version of the image — will open in pop-up window)
400px max width/height (dimensions vary; images are centered within a stable layout)
400px fixed height (widths vary; images are left-aligned)
400px fixed height (widths vary; images are left-aligned) — thumbnails-free slideshow
350px max width/height (dimensions vary; images are centered within a stable layout)
325px fixed height (widths vary; images are centered)

As you view the examples above, notice also the various treatments of thumbnails. Sometimes I have used very tiny thumbnails that allow nothing more than a hint of the image they lead to. When the main images appear simply on mouse-over, this can be all you need. Sometimes I have used cropped versions of the main images — which, in instances when the viewer is required to click through to see the main image, can be a better way of indicating the quality of the image they are about to see (even though it is more time-consuming to create individual thumbnails this way). It is all a juggle between file size, monitor size/resolution and providing enough of an image to give your viewers a good experience.

Here are the thumbnails from the above examples (linking to the original websites on which I have used them):

While the last three thumbnails are small and show less detail than the larger thumbnails, they are used in instant mouseover situations, so the viewer gets to quickly and easily see an image at a size and resolution that is satisfying — and this is what you need to aim for one way or another.