Width and Height of Images

Say bye-bye to jumping text.

Opinion page by Duane Alan Hahn.

When I try to read the text on some web sites while their images load, the text jumps around like a monkey on crack. That's because the width and height of each image was not defined. This is irritating because pages seem to load slower, and it makes them unreadable until all of the images have finished loading.

Defining the width and height is easy. For example, if you wanted to display a small 90 x 75 picture of your dog Spot, the code might look like this:

See how easy it is to add width and height attributes to your code? It's a simple way to make your pages easier to read.

If you use a drag & drop, WYSIWYG editor, you probably won't have to worry about it since it should automatically add the width and height for you (unless you are adding the code yourself).

Never Resize with Width and Height Attributes

Make sure that you don't use the width and height attributes to make images seem smaller. That's not the way to make thumbnails. Always resize with your favorite image editing software, optimize, then use the actual width and height of the image. Your pages will load much faster.