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:

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

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

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

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

Logo-like images not possible or not worth doing:

Photographic images, clearly outside the scope of CSS:

Animations:

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.