Disturbing lack of proper CSS for images on the services page.

I noticed watching my services page load that you aren't using any CSS to define image size for any of the page icons. This is important because every time the browser's layout engine receives an image without any CSS or inline sizing info it must recalculate the page layout to accommodate it. This becomes especially problematic on pages with hundreds of unsized images as the browser must take additional time to reconsider the layout of the area surrounding each image.

Now onto the simple solution! There are 2 ways of defining the image size: implicitly and explicitly.

An implicit declaration relies on some newer CSS declarations (last 2 or 3 years at least):

/* Any img URI containing the string "favicons" */
img[src~="favicons"] {
height: 16px;
width: 16px;
border: 0px;
}


Or a more explicit declaration could be made. Here is the current code for Twitter:

<img border="0" src="http://www.dandyid.org/code/images/miscellaneous/favicons/twitter.png">


A better declaration would be:

img.favicon {
height: 16px;
width: 16px;
border: 0px;
}



<img class="favicon twitter" src="http://www.dandyid.org/code/images/miscellaneous/favicons/twitter.png" alt="Twitter" title="Twitter" />


I hope this is of help to your site design team. Oh, and before I forget, the Delete, Verified and Go icons all suffer from the same problem as well.

This is a great service, but with the large amount of content per-page it is very important to do everything you can to ensure smooth & speedy loading. :)