VisibleGif: Actual Example

This web page describes the improvements made to an original icon supplied by a major web design agency. This icon and a number of similar were used on the web site of a major global utility company.

The original icon

This icon is as supplied by a well known web design agency. It was used for over two years on a major utility site. It takes 899 bytes. The original brand design guideline specified that a single browser-safe colour should be used for each icon.

This icon and all the others from the same web agency were replaced by equivalent efficient versions.

A small red icon

This example icon takes 76 bytes of storage. It is 22 pixels wide and 17 pixels high. It comprises a single foreground colour "browser-safe" red (rgb = "#FF0000"). It uses a second colour as the background colour. The background colour is set to be transparent.

It should be noted. The image contains definitions for two additional colours which are unused. It is left for the reader to remove these and reduce the image size a tiny bit more.

The VisibleGif program command file

This Windows NT command file comprises four steps. Steps three and four are redundant steps that double check that the conversions between formats have been carried out correctly.

In each step the first parameter is the input file, the second the output file, the third is the report file and the fourth (masked out) is the license.

rem job1.cmd by VisibleGif 2 February 2000

set runlib=h:\vg\example
set exelib=h:\vg\bin

c:
cd %runlib%

rem   step 1 - gif to xml
%exelib%\vg  itemred.gif itemred.xml itemred.txt #######

rem   step 2 - xml to gif
%exelib%\vg  red.xml red.gif red.txt #######

rem   step 3 - gif to xml
%exelib%\vg  red.gif redA.xml redA.txt #######

rem   step 4 - xml to gif
%exelib%\vg  redA.xml redB.gif redB.txt #######

The processes

1. The original "itemred.gif" file was used to create the "itemred.xml" file.
2. The "itemred.xml" file was edited (using Notepad) to create the "red.xml" file.
3. The "red.xml" file was used to create the "red.gif" file.
4. The "red.gif" file was used to create the "redA.xml" file (the same as the "red.xml" file).
5. The "redA.xml" file is used to create the "redB.gif" file (the same as the "red.gif" file).

The files and reports

Click on the name below to view the file or report.

• "itemred.xml" The original inefficient xml file.
• "itemred.txt" The original inefficient gif to xml file run report.
• "red.xml" The xml file.
• "red.txt" The gif to xml file run report.
• "redA.xml" The check xml file.
• "redA.txt" The check gif to xml file run report.
• "redB.txt" The double check xml to gif file run report and the "redB.gif" file.

Results

By running VisibleGif and sharing the results with the web design agency the quality of image product supplied rapidly improved.