9/16/2010 Optimizing Images for the Web Optimize Web Applications Improve Performance & Availability of Critical Web-Based Applications. www.ca.com Download Image Resizer Resize & Convert Bulk Images JPEG TIFF GIF RAW BMP JPG PCX etc. avs4you.com/AVS-Image-Converter Free Veer® Images add-in For Microsoft® Office. To Create A Perfect Presentation. Free Download Veer.com/VeerImagesAddin Links To This Guide: Getting Started | What Makes a Good Site | Plan Your Site | Design and Layout | How to Create Your Web By Alan Flum of Celestial Graphics Inc. Pages | How to Put Your Site on the Net | Optimizing Images for the More Information Web E-Commerce Tutorial HTML Tutorial Do you want to make your site load fast Recommended Reading but still look good? This section will tell you how to create fast loading images for Optimizing Images for the your web page. Web What Software Should I Use? The Most Common Mistake Park Your Domain for Free! Web Hosting Packages Once, I was asked to look at why a very simple web page will one small image and about 400 words of text took over 1 minute to load. The answer was simple and is a mistake I see over and over again. The original image, which was large, was scaled to a small image size in a web site creation program, not an image editing program. DO NOT resize your images in your website design program. The result will be a small image with the same file size . DO resize your image in your image editing program. When you resize your image on your web page to the size of a postage stamp, you really have not done anything to the image file size at all. What you are www.aksi.net/optimizing-images.htm 1/3 9/16/2010 Optimizing Images for the Web actually doing is telling the browser to re scale the image on the fly. This creates a lot of work for the browser. The image that you thought is the size of a postage stamp is still that same large 8 x 10 inch image that takes over 2 minutes to download. When you use an image editing program to resize the image, and you save it as a JPEG or GIF, you have actually created a smaller image. Now that postage stamp size image that you saved as a postage size JPEG will now load quickly on your visitor's computer. GIF and JPEG: Two Image Formats You Need to Know About If you want to optimize your images the first thing you need to know about is the two image formats recognized by your web browser. These are GIF (pronounced jif as in Jiffy Peanut Butter) and JPEG (pronounced Jay-Peg). Both JPEG and GIF are compressed. That means that information has been organized inside the file in a special way in order to minimize the file size. The difference between JPEG and GIF is the way that they compress the data. JPEG compression is designed to optimize photographs or images with fine gradations of color. GIF compression is designed to optimize images with large continuous areas of color, such as illustrations. Some Examples: Low Quality Medium Quality High Quality JPEG Image: JPEG Image: JPEG Image: size 3KB size 6KB size 8KB Notice the more you compress a JPEG image, the more artifacts you begin to see. This is because you are actually loosing information. JPEG compression is therefore called lossy compression. You may also notice that the color fidelity does not change. Colors are not lost in JPEG images. When you use JPEG compression you will trade off between image quality and image file size. In the example above, the Medium Quality image is acceptable and is 2KB small than the high quality example. Note: if you had tried to use GIF compression on the rose, the file size would be over 15KB. www.aksi.net/optimizing-images.htm 2/3 9/16/2010 Optimizing Images for the Web 4 Colors 16 colors 256 colors GIF Image: GIF Image: GIF Image: size 0.9KB size 1.1KB size 1.4KB GIF is a lossless compression. Data is not lost. However, color fidelity is not preserved. This is because GIF indexes or limits the total number of colors to 256 or less. When using GIF compression, you trade off between color fidelity and image size. In the example above the 16 color image gives acceptable color fidelity and its file size is almost as small as the 4 color image. Note: that if you tried to use JPEG compression on this image, the file size would have been over 2.3K . Google Search Copyright © by Acquired Knowledge Systems Inc. Website Design by Celestial Graphics ™ Privacy Policy | Site Security | Terms of Use | Contact and Internet Access Info | | About Us | Give Us Your Feedback | www.aksi.net/optimizing-images.htm 3/3.