Replacing images with HTML+CSS1

The table below lists all images that appear in the "Microscape" test page and gives an estimate of which images that can be replaced by HTML+CSS1 code.

The results are preliminary, but indicate that CSS1 may significantly influence the performance of the Web.

Conclusion

Of 40 images and 2 animations, 23 images can be replaced by HTML+CSS1. Encoded in GIF, these images represent 15157 bytes, and the HTML+CSS1 replacement is 3208 bytes, saving 11949 bytes.

Further, 3 of the 40 mages can be reduced to roughly half their size by converting part of their content into HTML+CSS1. Their current size is 7541 bytes, the PNG replacements of the remaining content total 3294 bytes and the the extra HTML+CSS1 represents 610 bytes, saving 3637 bytes.

14 of the 40 images, representing 80601 bytes, can not be represented in HTML+CSS1. However they could be converted to PNG giving a total size of 71913 bytes, a saving of 8688 bytes.

Total savings come to 24274 bytes and 23 HTTP requests.


Note:PNG files listed here additionally contain gamma information, so that they display the same on all platforms; this adds 16 bytes per image. The GIF images do not contain this information.

The HTML+CSS1 sizes are estimates. At this point, no CSS browser is entirely able to render all the replacements in HTML+CSS.

Image that can easily be converted to HTML+CSS1:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
about1 1403 65320250
action 788 7701550
enter 157 1661050
prod 165 1581040
search 151 1651030
shop 128 1311030
solutions 682 6381060
support 156 1611030
1ptrans 44 83 [1]030the CSS property will be set on an existing element
spacer 70 70070a new element should probably be added
spacer1 40 70070ditto
spacer2 69 73070ditto
vrule 62 74070ditto
nav_home 1664 1355150250it's possible to make button bars with floating textual elements
navigation_bar16981457150250ditto
Sum: 15/40 images 7277 60243951350

Images that can easily be converted to HTML+CSS1 if the proper font resource are available:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
msft 366 4221080Microsoft logo, very textual, 80 byte for HTML+CSS if font is available
arrowbl 69 113160A similar arrow glyph exists in Unicode
arrowgr 75 125160A similar arrow glyph exists in Unicode
arrowr 75 125160A similar arrow glyph exists in Unicode
comdex_6 799 74320200the two-colored pointer complicates matters
Sum: 5/40 images 1384152833460

Images that can be converted to HTML+CSS1 if negative margins are allowed:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
tagline 2718 258130300the shadow effects require negative margins
worldwide 1698 158320300the shadow effects require negative margins
h_microsoft 2080 187720300
Sum: 3/40 images 6496 604170900

Images that can be reduced in size by converting parts to HTML+CSS1:

File nameGIF sizePNG size [2]HTML+CSS estimated sizecomments
contentmarkup
Pacman1 4378 384150300the image can probably be reduced by 50%
one_sm 2917 253430150the image can probably be reduced by 50%
home_on 246 2151080alas, the "house" can't be found in Unicode
Sum: 3/40 images 7541 659090520

Images that possibly can be reduced, but it's probably not worth it

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
idc 2428 1545--
comdex 1102 1117--
pointcast_small 786 730--
Sum: 3/40 images 4316 3392

Logo-like images not possible or not worth doing:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
tbi 4012 3511--
netnow3 1884 1294--rotated text not possible in CSS
home_igloo 40095 35933--
n 1435 1107--
Sum: 4/40 images 47426 41815

Photographic images, clearly outside the scope of CSS:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
clinton 2095 1912--
appfoundry 4853 4461--
commish 7540 7115--
inbox_img 5076 4668--
rolodex 3340 3145--
sports 3544 3231--
woofer 2411 2174--
Sum: 7/42 images 28859 26706

Animations:

File nameGIF sizePNG sizeHTML+CSS estimated sizecomments
contentmarkup
ie_animated 9132 - [3]--20 frame animation
msinternet 15856 - [3]--16 frame animation
Sum: 2/2 animations 24988

1
1ptrans is a one pixel by one pixel transsparent image. It contributes nothing to content but is used to adjust spacing. As noted, this is a task much better suited to stylesheets. Opening a network connection (under HTTP/1.0) to transfer 44 bytes of invisible GIF is inefficient. Also, such small files are almost entirely metadata. Only 4 bytes are required for the actual image data (red, green, blue, and alpha). The same file is 83 bytes as a PNG and 8 bytes as a PBM. Even better is to transmit zero bytes and one less network connection.
2
Sizes are for converting the entire image. Size of the converted (not expressible in CS) portion is given in the conclusions.
3
GIF is also used as an animation format (despite the prohibition of this in the GIF specification). PNG is a single image format. Conversion to MNG or QT was not tried.

Håkon W Lie 970205
Chris Lilley 970206