The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Web Graphics - Optimizing Images

This page has been tested and conforms to WCAG 2.0 Accessibility Guidelines
The top header area
The unoptimized camel photograph
The middle header area
The optimized camel photograph

An Important Skill ...

Image Optimization is one of the most important skills a web author has to learn. If your page graphics take a long time to download then your site will appear amateurish and users will simply navigate away from the page. You regularly encounter Websites where the graphics are bloated in size yet the file size of many of these bloated graphics could be reduced by over 90%. This results in a corresponding reduction in download times for your users, particularly those with dialup Internet connections. This tutorial discusses the methods that can be used to achieve these file size reductions.

An Example Optimization ...

Displayed to the left is a screen capture of the active window of WebGraphics Optimizer, an image optimization program. If you study the two camel photographs you will see that the file size of the original version weighs in at a whopping 77,410 Bytes whereas the file size of the optimized version has been reduced to 6,286 Bytes. This means that the optimized version is less than one twelfth the size of the original version and I will bet that you cannot see any degradation in the quality of the optimized version. You will also note that the estimated download time (on a 56K dialup modem) has been reduced from 12.4 seconds to 1 second.

Unfortunately, not all images can be optimized to this extent but most images will benefit from optimization and all images should be optimized before being published on a web page. The only problem is that optimization behaviour can be very different between photographic type images and line art type images and to illustrate this point we cite the graphic to the left as an example of these different behaviours.

The Two-Camels Graphic ...

This graphic is unusual in that it is a mixture of line art and photographic. The top and middle parts of the graphic (the information areas) is line art whereas the picture areas of the graphic (the two camel images) is photographic and this presented a problem when the graphic was optimized. If we treated the graphic as line art by using the GIF compression format then the size of the graphic increased dramatically because the GIF format does not handle photographs well. Conversely, if we treated the graphic as photographic by using the JPEG compression format then the information areas at the top and middle of the graphic degraded so much that the text became unreadable.

To overcome this problem the graphic was split into two files, the top line art area and the bottom photographic area. You can check this for yourself by viewing the source Markup for the page and/or saving the two images to your own hard-drive. The top line art area was saved as a GIF format file and then optimized which resulted in a file size of 3,177 Bytes and the bottom photographic area was saved as a JPG format file and then optimized which resulted in a file size of 12,565 Bytes. This resulted in a combined file size of 15,742 Bytes which is just about acceptable for use on a web page, if you conform to the 15 KB (15,360 Bytes) maximum file size rule (15 * 1024 = 15360).

Optimization Programs ...

You have probably gathered by now that you your first requirement is a bit image optimization program and most optimization programs come with a range of other image manipulation functions. They vary from inexpensive to very expensive but whichever you choose, you will have to take time to learn and master the program. To give you a feel for these programs I have described a small range that I know about and have given a brief opinion on each of them.

Understanding Meanings ...

Some Useful Reinforcement ...

I have adapted the following from an NCFE (National Council for Further Education) Assignment answer I submitted during a web design course I took. The Assignment received maximum grading.

The file size of an object can impact on the time it takes for a browser to download the page from a website because the larger the file size of objects, images in particular, the longer it takes to download them, and the smaller the file size, the quicker they download. You can often tell if a web page has been created by someone inexperienced because of the length of time it takes for their pages (and images) to download. Every aspiring web developer needs to learn how to reduce the size of their images and this can be done in several ways.

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Optimizing Web Images Image Optimization is one of the most important skills a web author has to learn. If your page takes forever to download then it will appear amateurish and users will just navigate away from the page.

select/copy the link Markup ...

Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Image Optimization Links
 
 
 
Copyright © 1998,2008, Gilbert Hadley, Liverpool, England