Images on the web: a primer
Many people wish to incorporate images into their blog posts, but there are a few useful things to know when preparing images for use on the web.
File type
Nearly all the images you will want to add to your site will be jpegs, with the file ending “.jpg”. This file type is suitable for photos and anything with many colors or fine gradations.
Some images with simple, flat color, such as logos, are better saved as gifs, with the file ending “.gif”.
Resolution
When most people talk about monitor resolution (for example, “1024×768”), they are actually referring to monitor size. Eg, the monitor is 1024 pixels by 768 pixels. The actual spatial resolution for most monitors is either 96 ppi (pixels per inch) or 72 ppi. That is the maximum resolution at which a browser can display an image. When saving images for the web, the pixel size is all you really need to focus on.
Let’s say you have an image from a digital camera that is 1800 pixels by 1200 pixels. While in print this photo might be a reasonable 4” x 6” print, in a web browser on a 96ppi monitor, this would display at 18.75” across! This needs to be scaled down.
Take a look at the following table to see how pixel size, monitor resolution, and display size are related. Across the top are various image sizes, in pixels. In the rows you can see the actual display size, in inches, of those image sizes at two screen resolutions – 72 and 96 ppi.
| 200×133 | 450×300 | 600×400 | |
|---|---|---|---|
| 72ppi | 2.8 × 1.85 inches | 6.3 × 4.2 inches | 8.3 × 5.5 inches |
| 96ppi | 2.1 × 1.4 inches | 4.7 × 3.1 inches | 6.3 × 4.2 inches |
As you can see, an image size of ranging from 200 to 600 pixels across is much more reasonable for display on the web.
There are lots of programs you can use to size your images. Most people don’t own a full copy of Photoshop, but Photoshop LE or other image software comes with most digital cameras and scanners.
In Windows XP, you can resize right from the Explorer window. Here are some instructions. Be sure to click “Advanced” and enter a custom size (while keeping the proportions the same as your original image).
Quality
One reason jpegs are popular for the web is that they can be compressed, and the resulting smaller files sizes load more quickly. If you have a digital image editing program, you can compress your image—usually 60 to 70% quality still looks just fine on the web, and results in considerably smaller files.
Layout
The last important consideration when adding pictures to your site is layout, or how the text and images will be arranged on the page. A picture, if text is to flow around it, should not be wider than half of the content column. If you want a picture larger than this, it should be centered on its own line. Often, sites are set up so that when a small image is clicked, a larger version will open in a pop-up window.