Formatting Images for the Web

Follow

Formatting Images for the Web

This page provides some basic information about images and how to use them on your website.  

Types of Images

There are several image formats that are web-friendly.  The two most common ones, and the ones you will most likely end up seeing and using, are gifs and jpegs.

The main difference between these two formats is the number of colors they can display.  Jpegs can display millions of colors, making them ideal for grayscale and color photographs and other detailed images.  Gifs can only display 256 colors, but display very simple images better than do Jpegs and can have transparent areas. 

Below are some examples of the same images shown in jpeg and gif formats, so you can see the differences:



In the first two pictures (the gecko and the sphere), the image becomes choppy where the gif compression attempts to mimic colors it does not really have in its limited 256 color palette.  This mimicry is called dithering and it means that an attempt is made to fool your eye into seeing colors that aren't really there by scattering complementary pixels in among the pixels of another color. 

For example, if the gif were not able to display the color yellow, it might scatter the area where yellow should be with red and green pixels (the two colors of light which, when combined, our eyes see as yellow).

In the third picture, the text, the gif is a little clearer.  This is because jpegs just do not do as good a job as gifs when it comes to displaying large bodies of a single basic color.

The best thing you can do when deciding whether to save a given image as a jpeg or a gif is to try saving it in each format and then to review them side-by-side.  In this way you can select the option that will likely look the best to your members when they see the image on your site.

Image Size

An image has three important measurements, which are related, but not identical.

  •  An image's geographic size is its physical measurement on the screen or on paper.  8x10 and 300 pixels by 150 pixels are both geographical measurements. 
  • An image's resolution is usually expressed in terms of dpi or dots per inch.  DPI measures how many specks of color information appear in a one-dot-high, one-inch wide segment of geographic image space.  The more dots of color there are per inch, the clearer the image will be.  The pictures below are shown in both their native geographical sizes and in blown-up form so you can see what happens when you adjust an image's resolution.
  • The geographical measurement combined with the resolution of an image determines an image's file size.

Below are copies of the same picture with the same geographic sizes but different resolutions:




As you look at the images above, you probably notice that it is more difficult to discern the difference between the 300 and 600 dpi images because there is a limit to the level of detail distinguishable by the human eye.  The 72 dpi image seems very blurry in the larger version, but if this is being viewed on a computer monitor (if you are reviewing a printed copy then this will not be as obvious), the fuzziness is much less obvious in the smaller version of the images.  In fact, you probably noticed that the differences between the smaller images, even between the 72 dpi and 600 dpi pictures, are negligible. 

The reason for this is that a computer monitor can only display up to about 72 dpi.  The large images above more obviously display the resolution differences because the higher-resolution images really do have more color information in them, you just can't see it when the images are shown at their intended size. 

When the images are made larger, though, the computer has to somehow fill in the extra space created by stretching the picture.  If the color information is there, then it just expands out and is visible.  If it is not, then the system has to guess what color of dot should be inserted in order to increase the graphic's size.  When it creates these phantom color dots to fill in the gaps, it most often does so by simply copying the color of the pixel next to the open space created by the expansion.  Since the photos above have so many nuances of color and shading, the lower-resolution images (at 72 and 150) have a lot of places where the computer has filled in the blanks, lessening the sharpness of the image.

Resizing and Cropping

When you post a picture to your web page, you want to be sure that it looks nice, is readily recognizable and clearly depicts what you are trying to show.  Resizing and cropping images are great ways to accomplish these goals.

For Example:  If you have a photograph with a significant amount of wasted space, you should probably crop it. 

The wasted space might take the form of someone's thumb covering part of the photo, a blurry section of picture, or a badly-centered subject.  The picture below (Figure 1) is pretty, but has some wasted space in the lower left corner.  If you just take off the left side of the photo to eliminate the wasted parts, you end up with an off-center picture (Figure 2).  If you then take off enough of the image on the right to make up the difference, you end up with a very tall picture (Figure 3).  You might want to crop some vertical space to get rid of some of the leaves and roof tiles to even it all up.  The final image (Figure 4) takes up much less space, makes it clear what you are looking at and focuses on the subject. 



Sometimes the extraneous space may be harder to see because it is part of a very nice photograph. The image at left below is a nice picture, but for a web page about turtles, you might want to focus in on the turtle rather than on the image as a whole.  You may crop it a little or a lot, depending on how much space you have, the surrounding elements and other pictures.
  

 

Finally, you may simply need a different shape of picture to fit the available space on a web page.  Sometimes it is better to crop a picture a little than to resize it so it fits a particular horizontal or vertical spot.  The original picture of the gecko used in an earlier example originally had a landscape layout.  It was cropped to better illustrate the principles that were being demonstrated in the section in which it was used.  

   

You could also crop it to fit a smaller area without losing the detail of the gecko by resizing the picture.  The picture on the left is simply a resized version of the original.  The picture on the right has been cropped to the same dimensions.  By cropping rather than resizing, you retain the focus of the picture:

      
Sometimes a combination of resizing and cropping is the best solution.  If you want to focus on a particular element or elements, you can crop out the area that you like, and then increase or decrease the size of that element to fit your stylistic needs.

 

Tools of the Trade

Any image editing program will more than likely be sufficient to make basic changes to your graphics.  The most common / popular image editing programs are listed below:

Adobe Photoshop
Adobe Photoshop Elements
Macromedia Fireworks
Microsoft Digital Image Suite
Microsoft Picture It Publishing Platinum
Paint Shop Pro
IrfanView 8.9.1

Reviews and downloads of most of these products can be found via several online resources, including http://www.download.com/Digital-Photography/2001-2204_4-0.html?tag=dir

 

Have more questions? Submit a request