Making Image with HTML and CSS

The topic might have been proved to be impractical because It's very time consuming job. Even you are succeeded to make an image the file is normally very large. So my effor is all but make it more efficient and reduce the size of the image.

First, I use grid and pour all colors pixel by pixel into the grids. The size of image is more than 200 kb. Then I analyze colors pixel by pixel. Remove or merge grids with duplicated colors. Now the size of the image is about 60kb. The last optimize the CSS, the size could be reduced to 50kb(maybe more).

Although it is still large, the size could be significently reduced if the image data could be saved in javacript. And the image will be generated in client side using javascript.

It may be useful when a single image ( or logo) is used in the same page for a few times because fewer http calls means faster downloading time.

Original

HTML