Web Design & Development

[ Web Design & Development Topics ]

Web-Ready Images

Ah, images. Everyone seems to love them on the Web. However, make sure when you use them they serve some kind of purpose. Also make sure they are "web ready" as we will discuss now.

Making a Web Ready Image

1. First off, a Web ready image should be "optimized". This means that it should be the smallest size possible without affecting the quality you are looking for.
2. Secondly, your image should be the size you want it to appear on the web site, or at least very close. If greatest importance is ensuring the proportions are the same.
3. Third, understand that images will not appear the same on all monitors. The quality, depth, hue, contrast, tint, and similar features will be partially based on the settings of the machine it is being viewed upon. Don't expect the colors to be exactly as you see them.
4. Fourth, make a special location for your images. Why? Well, a few reasons:
   • this way you won't accidently have multiple copies of the images in different directories, causing extra load time or other problems caused by redundancies such as the partial replacement of content.
   • this way its easier to count and track the number of pages and usage of your HTML files without throwing off your numbers with lots of images.
   • this way it is easier to compare the size of images you are currently using and assess the overall number of images you are using
5. Fifth, you are best off using JPG as your image format altough GIF works as well. Generally on the Web you get higher quality for your bits using JPG.
6. Sixth, make sure your images do not flicker or strobe as they can actually cause seizures in some individuals. Also ensure you have adequate color contrast. Learn more at http://www.webaim.org/techniques/images/seizures.php#flicker
7. Seventh, consider those who may be color blind. See http://www.vischeck.com/vischeck/vischeckImage.php

Globally Supported Formats:

• GIF (CompuServe)
  Note: Good for if you want images with transparent backgrounds that don't have rounded edges
• JPEG (Joint Photographic Experts Group)
  Note: Generally makes the highest quality image on the Web with lowest pixel size. Doesn't do transparent backgrounds though.
• PNG (Portable Network Graphics)
  Note on PNG: In IE 6.x you transparency won't work on .png format (they end up with a grey background)

When you add your images to your web site, remember that you need to have alternative text in order for it to be accessibility compliant. See http://www.webaim.org/techniques/images/text_graphic.php for additional information.