Rubenerd

One of the more pleasurable things in life is when you can get on your high horse and let the rest of the world know why they're wrong, and you're right. Or maybe that only applies to conversations about music. Sorry Elke, comparing Akon to The Rat Pack is like comparing Barry Manilow to Jo Anne Hook. Wait, Jo Anne Hook is a painter. Never mind.

My gripe today is with people who use images in HTML on websites without defining their dimensions! You've probably seen pages at one point that seem to rearrange themselves as material moves around to make way for images that are loading. By defining the sizes of images in advance, browsers know how much visual space to allocate them as it draws the page.

Without declared dimensions

<img src="image.jpg" alt="description" />

Using HTML dimensions

<img src="image.jpg" alt="description"
width="320" height="240" />

Using inline CSS

<img src="image.jpg" alt="desccription"
style="width:320px; height:240px;" />

Using an external style sheet

Same as latter, but using an external style sheet linked with an id statement for individual images, or more pratically using class for many images on a page with the same dimensions.

Without this information, the browser is forced to render the page as it would look without the image until it has reached it; this is especially noticeable on slower internet connections and on mobile phones. It also does nothing to help the sanity of people who are halfway through reading a paragraph and suddenly have the text disappear as it's pushed away by an image that has started loading!

As far as I know from my own experience, Typo, WordPress and MediaWiki conveniently specify image sizes automagically on images you upload and insert, and I assume most other content management systems do too… save for Blosxom of course! Wow Blosxom, the first weblog publishing system I ever used, that brings back memories!

Save the world: specify image dimensions!