# 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 name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
about1 | 1403 | 653 | 20 | 250 |
action | 788 | 770 | 15 | 50 |
enter | 157 | 166 | 10 | 50 |
prod | 165 | 158 | 10 | 40 |
search | 151 | 165 | 10 | 30 |
shop | 128 | 131 | 10 | 30 |
solutions | 682 | 638 | 10 | 60 |
support | 156 | 161 | 10 | 30 |
1ptrans | 44 | 83 [1] | 0 | 30 | the CSS property will be set on an existing element
spacer | 70 | 70 | 0 | 70 | a new element should probably be added
spacer1 | 40 | 70 | 0 | 70 | ditto
spacer2 | 69 | 73 | 0 | 70 | ditto
vrule | 62 | 74 | 0 | 70 | ditto
nav_home | 1664 | 1355 | 150 | 250 | it's possible to make button bars with floating textual elements
navigation_bar | 1698 | 1457 | 150 | 250 | ditto
Sum: 15/40 images | 7277 | 6024 | 395 | 1350

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

File name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
msft | 366 | 422 | 10 | 80 | Microsoft logo, very textual, 80 byte for HTML+CSS if font is available
arrowbl | 69 | 113 | 1 | 60 | A similar arrow glyph exists in Unicode
arrowgr | 75 | 125 | 1 | 60 | A similar arrow glyph exists in Unicode
arrowr | 75 | 125 | 1 | 60 | A similar arrow glyph exists in Unicode
comdex_6 | 799 | 743 | 20 | 200 | the two-colored pointer complicates matters
Sum: 5/40 images | 1384 | 1528 | 33 | 460

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

File name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
tagline | 2718 | 2581 | 30 | 300 | the shadow effects require negative margins
worldwide | 1698 | 1583 | 20 | 300 | the shadow effects require negative margins
h_microsoft | 2080 | 1877 | 20 | 300 |
Sum: 3/40 images | 6496 | 6041 | 70 | 900

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

File name | GIF size | PNG size [2] | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
Pacman1 | 4378 | 3841 | 50 | 300 | the image can probably be reduced by 50%
one_sm | 2917 | 2534 | 30 | 150 | the image can probably be reduced by 50%
home_on | 246 | 215 | 10 | 80 | alas, the "house" can't be found in Unicode
Sum: 3/40 images | 7541 | 6590 | 90 | 520

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

File name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
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 name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
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 name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
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 name | GIF size | PNG size | HTML+CSS estimated size | comments
--- | --- | --- | --- | ---
content | markup
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.