Specify image dimensions and save the world!


Jo Anne Hook painting: Australian Wildflowers

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.

Autumn anime art using… defined image 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!

Author bio and support


Ruben Schade is a technical writer and infrastructure architect in Sydney, Australia who refers to himself in the third person. Hi!

The site is powered by Hugo, FreeBSD, and OpenZFS on OrionVM, everyone’s favourite bespoke cloud infrastructure provider.

If you found this post helpful or entertaining, you can shout me a coffee or send a comment. Thanks ☺️.