Image Use

Images are good design elements that will enhance a web site when used properly.  The following is a tutorial in how to use images within a site, helping pages load quickly and in turn, keeping visitors at your site.

It is our desire to provide basic answers to frequently asked questions regarding graphic use and sizing. If you have information you'd like to see here, please contact us at Picture This . If you'd like to link to this page...feel free!

JPG or Gif?

Sometimes it's difficult to decide which format would be best used for a given application.  A good rule of thumb:  If your graphic has lots of colors, use the JPG format, and if it has solid color, or black and white or line drawings, and little to no shading, use the GIF format.

A good example of a JPG is a photograph, usually having many colors,  some shading and shadows, etc.

A good example of a GIF is clipart, which has any number of solid colors, or is plain black and white, but has no shading or shadows.  When saving graphics for the web, many can be saved as GIF's, which are typically smaller files than JPG's.

Both JPG & GIF are "compressed" image formats. This means the original image you used was compressed to make the file size smaller.  In most cases this also makes the image smaller. JPG's tend to be of lower quality than their GIF counterparts.

Once saved as a JPG, a photo will become more compressed each time it is re-saved. This is because some of the pixels are removed each time the file is compressed, resulting in a slightly more blurred result with each save...one more good reason to always keep the original photo as a backup.

TIFF Files

The original photo should always be saved as a TIFF file.  A TIFF file is not compressed, meaning all the pixels of the original photo are preserved.  TIFF files are very large.

The easiest way to save photos for web use is with Adobe PhotoShop, which has a great "save for web" feature.  The "save for web" option lets  you compress the photo while viewing the original, which lets you see which file format and size gives the best final result.

GIF and PNG Files

PhotoShop is also great for saving transparent images that can be very useful in web design. Transparent images let the page background show throughOnly GIF and PNG formats can be used in transparencies. Gif format can also be used for animations.

PNG (portable network graphics) format is not widely supported by all browsers yet, but is growing in popularity.