Web Graphics - Optimizing Images

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.

• Adobe Photoshop
  The acknowledged leader. A fully featured bitmap graphics editor with first rate optimization facilities for both photographic and line art images. High learning curve and relatively expensive.
• Corel PhotoPaint
  Another fully featured bitmap editor. First rate optimization facilities for line art images but optimization of photographic images is less intuitive. Relatively inexpensive and can be buggy.
• Jasc PaintShop Pro
  Another fully featured bitmap graphics editor. I do not know too much about this program but it does have a good following. Relatively inexpensive.
• WebGraphics Optimizer
  Although it has a range of image manipulation functions this program really shines when used to optimize photographic images. Not so good at optimizing line art images. Low cost and low learning curve.

Understanding Meanings ...

• Image Optimization
  To reduce the size of an image by reducing the number of colors or reducing the color palette size, removing comment blocks and redundant pixels, eliminating local color palettes in an animation in favour of a global color palette, cropping frames in an animation so that each frame only stores information that is unique to that frame, etc.
• File Compression
  File compression.
• Image Resizing
  Increasing or decreasing the dimensions of a bit image (i.e. the width and height). Increasing the dimensions of an image will usually cause a proportional increase in file size and decreasing the dimensions of an image will usually cause a proportional decrease in the file size.

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.

• The first thing they must do is plan their pages effectively and to crop and resize their image to the size they want it to be displayed on their page. This means that they must learn to use a bitmap graphics editor and examples of this type of program include Adobe Photoshop, Corel PhotoPaint Jasc Paintshop Pro, etc.
• One suggestion is that images are created in a smaller size than the size they are required to be displayed on the web page and you then use the HTML IMAGE Tag, Height and Width attributes, to display the image at the larger size you want them to appear. This is not a practice that I employ because the image might appear fine in my browser but the resulting display can lose quality or be unpredictable in other browsers.
• GIF images can be dramatically reduced in size by optimizing them. You can usually reduce the number of colours an image uses and you can also eliminate the unused colours from the images colour table. This means that if you are creating a 4 colour GIF then each pixel can be described in 1 of 4 colours instead of each pixel being described in 1 of 256 colours. A good graphics program will also use other methods of optimize a GIF file.
• One of the very best methods of reducing file sizes on web pages is to optimize your JPEG files (e.g. photographs). You can achieve huge reductions in file size, up to ten times, by using a good graphics optimization program and my all time favourite is 'WebGraphics Optimizer'. I have included a screen-print of the program and if you study the example of the camel photograph, you will see that it has reduced the file size of the photograph from 77,410 bytes to 6,286 bytes. This level of optimization will help to achieve a very notable reduction in the download time of your web pages and you should not see a reduction in quality when the photograph is displayed in a web browser.

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 ...

select/copy the link Markup ...