Web Services

How can I optimize images for the web?

Once you have images, you should "optimize" them for the Web. Optimize means that you change your images so that they take up less space on the server and load faster on your pages.

You can do this in several ways:

  • Reduce the image's physical size
  • Reduce the number of colors displayed in the image
  • Reduce the resolution of the image in terms of dots per inch (dpi)

The result is that your visitors don't have to wait a long time to see the images. In most cases, you should make your images as small as possible in terms of the amount of space it requires. To understand what a byte is, approximately 140,000 bytes fit on a 3.5 inch floppy disk; 1,000,000 bytes fit on a Zip disk.

Imaging Tips

  • Images for the Web should be no larger than 150KB. Any larger and viewers will have to wait for a long period of time to download your images.
  • Save multiple thumbnail images on one page. Hyperlink each thumbnail to one separate fullsize color image. This way viewers aren’t forced to download all the large images at once.They can pick and choose which ones they want to see.
  • List the file size of the full sized image under the thumbnail. This will allow the viewer to estimate how long it will take view the image.
  • Produce the thumbnails in grayscale format. Since thumbnails are typically small, color is not needed since the details will not show clearly, however, grayscale color will reduce the file sizes and shorten the download time for your thumnail page.
  • Images should be no larger than 400-500 pixels wide. This will keep them the standard book width and will prevent viewers from having to scroll their web browser horizontally to see theentire image.
  • Rather than post one huge image, if you want to show details, produce a larger full image at approximately 400-500 pixels wide. Then include a couple of cropped images and associated thumbnails that highlight specific details.
  • Scan your images at 300 DPI. If you wish to crop your image to show details, you may wish to scan at a higher DPI, in the range of 400-600 DPI.
  • Unless you are using images for a test, it is a good idea to add captions to the images.
        - What are they showing?
        - What should the viewer look for?
        - What are is the purpose or goal of showing the images?

File Types

The most widely used image file types in Web page design and construction are *.gif (pronounced jiff - like the peanut butter) and *.jpg (pronounced jay-peg). Both are raster type files; the image in the file is made up of a mosaic of pixels.

  • GIF (Graphics Interchange Format) - CompuServe, Inc. originally developed the GIF fromat. It is a file format suitable for images that contain large areas of flat colors (that is, no gradations). Examples might include simple graphics and single color line drawings. Below is a list of the major characteristics of the GIFformat:
    • Limited to 256 different colors; it is best used for simple graphics and line drawings
    • Can be used for simple animation
    • Images can have transparent backgrounds- Not good for images that display gradations of color like color photographs
    • Files have the following form: image.gif
  • JPEG (Joint Photographics Experts Group) - This was (and is) a group of experts nominated by national standards bodies and major companies to work to produce standards for continuous tone image coding. JPEG is designed for compressing either full-color or greyscale images of natural, real-world scenes. It works well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. Below is a list of the major characteristics of the JPEG format:
    • Displays up to 16 million colors (roughly the equivalent of human eye-sight) - Best for full color or greyscale images
    • Not good for text or line drawings
    • Images can not have transparent backgrounds- Images can not be animated
    • Files have the following form: image.jpg
    • Images can be compressed but image quality will degrade dramatically with higher compression levels
  • Color vs Black and White (aka Grayscale) - Only use color if it is absolutely necessary. Color files are much larger that black and white and take longer to download for a web page over the Internet. If you are going to print your images on a laser printer or onto overheads it is best just to stick with black and white.
  • When I scan images from books or magazines I get a funny pattern in my scanned image that wasn’t there in the original!

    Printed images in books and magazines use a very coarse dot pattern (dots are spread apart) rather than continuous layers of color (like in a photograph). When you scan these images with a flat bed scanner, the dot patterning of the scanner and the dot patterning of the original image can combine and interact to produce odd interference patterns in the final image. These patterns are called “moire” (prounounced more-rey) effects.

    You can find moire effects in many places - if you look through a chain-link fence at another similar chain-link fence, you will see these patterns. Most decent quality scanners will offer an option for removing this pattern when you scan the image. Look for an option in the EPSON software that allows you to turn on“descreening” by clicking on the “Image Type” button (not the pull down list, but the button tothe left of the list) or, if your using a differnet type of scanner, look for “moire reduction” or turnoff “half-toning”.

Desktop Editors

  • Optimizing Images Online - These sites reduce the size of images by reducing the number of colors of the image ( Spinwave | MyImager ).
  • Desktop Image Editors (free) - Using the free Microsoft Image Editor that comes with MS Office will allow users a cheap and flexible way to edit their web images. Depending on the version of Microsoft Office and how it was installed, may show a different program name and location path from the list shown below.
    • Microsoft Office Picture Manager (Office: 2003)
      Finding Program: >Start >Programs >Microsoft Office >Microsoft Office Tools >Microsoft Office Picture Manager
      Resizing: >Picture >Re-Size

      Microsoft Photo Editor (Office: 2000/2002)
      Finding Program: >Start >Programs >Microsoft Office >Microsoft Office Tools >Microsoft Photo Editor
      Resizing: >Image >Resize

      Paint (Office: 2000/2002/2003)
      Finding Program: >Start >Programs >Accessories >Paint
      Resizing: >Image >Stretch and Skew

      FrontPage (2002/2003)
      Use FrontPage to create web page Photo Galleries or Photo Albums
      See the Online FAQ for more information on how to use this feature!!
  • Desktop Image Editors (purchased products)
       - Photoshop | Paint Shop Pro | Macromedia Fireworks

Useful Links

  • Web Design Tools - http://www.bnl.gov/itd/web/software.asp
  • Web Developer’s Virtual Library - http://wdvl.com
    Great site for learning about Web design and Construction. It is loaded with tutorials, hints and tips on everything from HTML code to Navigation, Java, XML and image editing. It is suitable for both beginners and advanced programmers. Best of all,everything on this site is free!
  • Webmonkey: The Web Developers Resource - http://hotwired.lycos.com/webmonkey/
    Webmonkey offers a comprehensive selection of tips and tutorials for Web page design and constructon. David Eisenberg’s “Why Good Images Go Bad: A Guide To The Effective Use Of Images On Your Web Site” http://www.catcode.com/imgguide/index.html  This website provides a detailed overview of the difference between GIF and JPEG image file types. You will also learn about file sizes, colors, animation, and tranparency.
  • Photoshop Workshop - http://psworkshop.net
    This site works as a sort of link exchange for Adobe Photoshop Tutorials. You can find all sorts of different tutorials. Perhaps the most useful are the ones that examine how to scan, edit/retouch photographs.

Top of Page

Last Modified: February 1, 2008