Sometimes while rapidly deploying a site we get a little lazy with markup. One of those things is when it comes down to images. I might just need an image placeholder for a product page for example, where I’m not sure what size image we will be going for. I have to stick something on the page.

The problem arises when you decide to go live and have forgotten to go back to readjust sizing of images. By specifying the dimensions of an image you can help browsers render the page faster and avoid redraws/repaints.

Full details on Google’s Page Speed Optimize Browser Rendering page.

Thanks to this post over on 37Signals’ Signal vs Noise blog we have this CSS snippet.

By placing this handy little CSS snippet in your stylesheet (be sure it’s one that’s included on all your pages) it will highlight any images which may be missing their height/width attribute.

Now that it draws all this attention, you can easily go back and make sure all your images have width and height specified.