Optimizing W3C Validation Buttons

I was recently working on one of my sites and had added the W3C buttons for valid XHTML and CSS (which actually validate, by the way). I regularly run speed reports on my sites as well and when I added these two buttons, I was not pleased with the result. Call me picky, but the extra image weight wasn’t necessary for what these buttons are. Since they are more for show and don’t really serve purpose for the user, why add the weight?

So I took the buttons and reduced the number of colors in the gif to see what we could do without losing too much in the way of image quality. The originals were 128 colors. I found the least I could reduce it to and without losing too much quality was 16 colors. The results were pretty good, I think. The XHTML button was reduced in size from 1.68k to 805 bytes. The CSS was even better going from 1.23k to 656 bytes. Now I can load both buttons for less than the cost of the original XHTML button.

Here are the results. Feel free to use them in place of the originals (if your pages do in fact validate).

Original (128 colors) Optimized (16 colors)
w3c xhtml button - 128 colors w3c xhtml button - 16 colors
w3c css button - 128 colors w3c css button - 16 colors


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>