Optimizing Web Images - Frequently Asked Questions
Tick. Tick. Tick. We all have been to a web page that seems to take forever to load. The most likely reason for this is that the image files on the page have not been properly optimized for fast download. By optimizing the graphics in your online store, your site will have more bandwidth, visitors will have a more positive experience, and sales may even increase. Optimizing images for the web takes a delicate balance between file size and picture quality. This article examines five common questions about web image optimization to help you achieve just that.
In what format should I save my images?
The first thing web merchants should know when optimizing your images is that there are two—universal graphic file formats and that are recognized by all major web browsers. These are GIF, short for Graphics Interchange Format, and JPEG, short for Joint Photographic Experts Group (the original name of the committee that wrote the standard). Bitmap files are also supported, but they should be not be used because they generally produce large file sizes.
When should I use JPEG/JPG images?
JPG images support up to 16 million colors and are best suited for photographs and complex graphics. JPG uses a “lossy” compression technique designed to compress color and grayscale continuous-tone images. JPG files support varying degrees of compression, and image quality can be adjusted using your favorite image editing software. As a general rule of thumb, use JPGs for all photographs (including stock image photography), except for very small thumbnail or icon-sized photographs.
When I should I use GIF images?
Unlike JPG, the GIF format uses a “lossless” compression technique—it supports only 256 colors. GIF is better than JPG for images with a few distinct colors, such as line drawings, clip art, diagrams, and textual images, such as graphical headings. An important feature of the GIF format is that it supports transparency, where the background color can be set to transparent in order to let the color on the underlying Web page show through. GIF also supports animation; tools are available that let you combine multiple GIF images into a single file to make it look animated.
Which software tools should I use to optimize my images?
Web merchants often make the mistake of resizing their graphics in a website design program such as Microsoft FrontPage. Since this will reduce the appearance of the image size without reducing the file size, don't do this! Instead resize all graphics using a graphics editing program such as AdobeR PhotoShopR, CorelR Paint Shop ProR, or ACDseeT. Locate the settings for image size and adjust according to the advice in the next section.
What size should my images be?
The dots per inch (dpi) resolution of web images should never be anything other than 72dpi. Anything with a higher resolution should be reduced to minimize the file size. As for the dimensions of the image, the height and width should be adjusted so that the image looks good in the overall context of your web page. Keep in mind that many users still browse at 800x600 screen resolution so your images should never be larger than this. For a square product photo, a size of 200x200 pixels should suffice. You should also include both the height and width attributes html for your images (e.g., img src=”myproductpic.jpg” height=”200” width=”200”). This tells the browser what size the graphic is going to be, so it can continue loading the rest of the webpage without having to worry about the graphic loading and suddenly distorting the page.
Why do web images load faster the second time around?
Web browsers have what is called a “cache.” This is an area on the hard drive dedicated to the storage of recently used graphics. If you go to a new web page on the same site and your web browser notices that the same graphics are being called on, it will just place the graphic from the Cache, instead of having to re-download it. The end result is a much faster loading site.
Happy Image Optimizing
By following the advice above you will greatly enhance your site’s performance and reduce the load time of your web pages. This will make your website visitors happy, and with the 2006 holiday season fast approaching, this could be a very good thing.
