XHTML Class Guide and Reference
Make your own web pages

Optimizing

Why

Web graphic optimization means making the file size of your graphics the smallest that you can while still getting the quality you want. this will allow your pages to load faster and keep people on your site.

How

  1. Make the image the exact size you want it to be in the page. Don't use html to make it smaller.

  2. 72 dpi (dots per inch) is the best resolution to use. Web viewers won't see the difference if you use higher quality resolutions. Save the high resolution version for printing.

  3. If you have any uncertainty as to whether gif or jpg is better for a certain image, check what file size it has as each.

  4. Save the gif image with as few colors in the 'pallette' as possible. Many images only have a few colors actually used in them, yet the default is to save them with 216 or 256 colors. If you have access to a software tool that lets you bring this down to the 8 colors really used, it saves a lot of file space.

  5. If the image is a jpg you should have the option of reducing image quality. This is specified as a number between 1 and 100. Depending on the image - values of 60-80 are usually fine.

  6. Tools

    Many web graphics programs have optimization functions for reducing the color pallette. they can all resize the image and reduce the resolution to 72 dpi if it's higher.

    If you don't have one of these programs, there are websites where you can have an image reduced for you online for free.

    GIFCruncher and JPEGCruncher will optimize gifs and jpgs respectively. this company also sells optimizers that you can run on your own computer which may be more convenient if you need to do a lot of them.

    gifoptimizer.com was another site that would optimize your gifs online for free. It seems to have gone away though.