10. Image optimization

It is especially important to keep image sizes to a minimum. Improperly optimized images can take up more space than they need to; for users on slow connections.

The objectives of optimizing the images /web Graphics as stated below:

  • Bandwidth-friendly (smaller images = less traffic across the Internet)

  • Server-friendly (smaller images = less work for the server to transmit)

  • Reader-friendly (smaller images = pages load more quickly)

  • Increase the page crawl rate

Guidelines:

  • Crop out excess white space

  • For images containing flat illustrations or artwork, use the 8-bit PNG or GIF format and reduce the number of colors in the palette

  • For very detailed and colorful artwork or for photo graphics, JPG and 24-bit PNG are typically used because they have a much larger color palette.

  • PNGs are almost always superior to GIFs and are usually the best choice

  • Use GIFs for very small or simple graphics (e.g. less than 10x10 pixels, or a color palette of less than 3 colors) and for images which contain animation.

  • Use JPGs for all photographic-style images

  • Do not use BMPs or TIFFs.

  • Use Descriptive keywords in the image File Name.

  • Perform both basic and advanced optimization on all images.

Basic optimization includes cropping unnecessary space, reducing color depth to the lowest acceptable level, removing image comments, and saving the image to an appropriate format. Perform basic optimization with any image editing program, such as GIMP.

Example:

Image Optimization

To compare and contrast, here are the file sizes of the above graphic in various formats:

  • JPG, 60 quality - 32K

  • PNG-8, 256 colors - 37K

  • GIF, 256 colors - 42K

  • PNG-24 - 146K