ButlerBlog

chad butler's weblog

  • About
  • Blog
  • WordPress Plugins
  • Contact
Home / Web / Further Optimization of the W3C Validation Images

Further Optimization of the W3C Validation Images

By Chad Butler 1 Comment

So call me picky, but I went ahead and tried to further optimize the process for using the W3C validation buttons. I know that seems like trying to eek out another 10 horsepower from a 400 horsepower sports car, but it really bothers me to reduce efficiency for something so useless (which brings up the point, “Why use them at all?” but that’s another story).

I felt that I could probably create some efficiencies by combining the images and using an imagemap for the links instead of using two separate images. There are basically three potential areas then for optimization:

  1. size of the html on the page
  2. size of the single image vs. two seperate
  3. reducing the images requested from 2 to 1

Note that this whole process is only an option if you actually have both valid XHTML and CSS. If either of these don’t validate, you need to just use the one image for the one that does validate.

Ok, so here is what I did:

I started by combining the two images into one single image:

w3c valid xhtml & css

This allowed a reduction in server requests from 2 to 1. Instead of asking the server for and image, then another, the browser only has to ask for a single image here. Also the total size of the single image is 1287 bytes. Compare this to 1441 bytes for the combined images. (Note that I am using 16 color gifs for both of these, as opposed to the 128 color originals. See my post on this.)

The second part of this process was to change the html to call the single image, use an image map to separate the links, and make sure it was valid XHTML, then measure the results in bytes.

342 bytes the old way:



Valid XHTML 1.0!


Valid CSS!

396 bytes the new way:


Valid XHTML 1.0! & Valid CSS!

Valid XHTML 1.0! Valid CSS!

So, the html for the new way is actually a little bigger. But that is ok because our total weight of the images combined with the html is actually less. 1783 bytes the old way, 1683 bytes the new way – we save a total of 100 bytes. Doesn’t sound like much, does it? So I guess we will justify the whole process by saying that we’ve reduced the hits to the server in this process from 2 images to only 1.

Like I said, it’s like eeking out an extra 10 horsepower from a 400 horsepower engine. OK, maybe more like an extra 5, but it was fun, wasn’t it?

Enjoyed this article?

Don't miss a single post. Subscribe to our RSS feed!

  • Facebook
  • Twitter
  • Email
  • Print
  • More
  • LinkedIn
  • Reddit
  • Tumblr
  • Pocket
  • Pinterest

Filed Under: Web Tagged With: design, tips, Web, webdev

About Chad Butler

Chad Butler is a freelance writer and web developer. He has developed several popular WordPress plugins and has written for forbes.com, sfomag.com, and investopedia.com. He also runs a small organic farm in east Georgia.

Join Us!

I will never share your information. No spam. No junk. No kidding. Unsubscribe anytime.


Recent Posts:

  • The Right Product at the Right Time
  • Top 3 Time Wasters
    Keeping You From Success
  • Top 8 Tips to Create Your Own Website Easily With WordPress
  • How to Fix wp_mail
    Settings for WordPress Email
  • 7 Reasons Why Social Networking Can Help Your Business
  • Understanding WordPress wp_mail and
    how to fix it
  • Prevent WordPress email sent
    to spam with this
  • Easy wp mail SMTP settings for WordPress
  • The Importance of Supporting Developers
    of Free Open Source Software
  • How to Run an Effective Meeting





Archives

  • About
  • Blog
  • Archive
  • Contact

Site powered by WordPress, running on the Genesis Framework from StudioPress.

Unless otherwise noted, content on this site is © 2006-2021 ButlerBlog and may not be reproduced without express written permission from the author.

Some content may include affiliate links for which this site receives a small commission.

loading Cancel
Post was not sent - check your email addresses!
Email check failed, please try again
Sorry, your blog cannot share posts by email.