Web Images

Useful pointers about creating images for the Web:

For the Web, think in pixels (dots); that's how monitors “think”. Measure your images in pixels, not in inches or any other units. (Exceptions don’t relate to images – table elements will often be measured in percentages and for more advanced users, Cascading Style Sheets often use “em” measurements for text elements.)

Know your audience’s hardware (or guess). You should design your pages to be viewed on monitors with the lowest common pixel resolution. Standard monitor resolutions include 640x480, 800x600, 1024x768, 1152x864, 1280x1024, and 1280x960 (all measurements in pixels). 1024x768 is currently a good target size unless you know that your audience will be using larger or smaller monitor resolutions. You will need to shrink the actual window size target because browsers take up room on all sides for toolbars, scroll bars, etc. For a 1024x768 monitor resolution with a maximized browser window, you can’t expect the useable window space to be bigger than 955x600. Most Web page editors will have a list of target window sizes to make this easier.

“Normal” resolution is 72 dpi, but users can easily change their monitor resolution up or down to show more or less content, which changes how big your images will display. Despite this variety, 72 dpi is a good first approximation of the display size. Before saving your final Web image in your image editor, make sure you change the image resolution to 72 dpi. That will give you a good idea what you will be seeing on the Web.

In your image editor, ignore any measurements other than pixels. If you create an image at 300 dpi which your image editor claims is only 2 inches by 2 inches (you’d think this would fit, wouldn’t you), the total image size is 600x600 pixels and it might display at about 8 1/3 inches square on a Web page! (600 pixels / 72 pixels per inch)

Keep a high resolution copy of your image (300-600 dpi). Use the high resolution image to do your image editing work and only “downsize” it to 72 dpi when you’re ready to make it into a Web image. When you downsize an image, you throw away information and it’s always best to work on an image with as much information as possible.

Think about printing your Web pages. Testing has shown that Web pages will print using a higher resolution than is displayed on the screen, usually 96 dpi. Unfortunately, even with the higher resolution, paper sizes are more narrow that screen widths, so you won’t be able to print as much width as you can see on a full screen. Each browser and each platform may have different default settings, but as an example, in current versions Internet Explorer on Windows the default printing margins are 3/4 inch all around. This leaves 7 inches of printable width. At 96 dpi you may be able to print Web images with a maximum width of 672 pixels without losing anything on the sides (96x7). If printing your pages is important, design your pages and images with that maximum width in mind. Always test printing if your site may need to be printed.

Don’t use the Web page editor to resize your image. If you drag the size handles, you probably won’t change the actual size of the picture, only how large the Web browser will display it. Web browsers aren’t designed to do a good job of deciding which pixels to throw out when shrinking a picture.

Use a graphics editor to make the picture the size you want it to display on the Web. These programs are designed to shrink (or expand) images and generally do a good job.

Another reason to avoid “resizing” images in the Web editor is that this may not reduce the size of the picture file. A big file displayed small is still a big file. Your friend trying to open your page from an older, slower Internet connection will be very unhappy if your 3 gigabyte file takes 1 hour to open.

Always test your site using multiple browsers, browser versions and platforms, including printing, to make sure that your target audience will be able to see your site, and print if necessary.