Home > Web Design Hints > Usability > Photo Dimensions

Usability Guidelines: Photo Dimensions

BCHC Work Crew

Here is a mixed Backcountry Horsemen and US Forest Service work crew; a great bunch of guys, good background, everyone is smiling. The original is 640x480 and 128 KB. I re-sized it to 400x300 pixels, which shrank it to 43 KB. If I left it at 640x480, and told the web editor to present it at 400x300, you would have noticed a pause when this page loaded. Note that 400x300 is a 4:3 ratio, and so is 640x480.

BCHC Work Crew

Here is the same picture, but I intentionally set the dimensions to 500x300 in the HTML to show you what happens when you get the proportions wrong. Our team has gained weight!

BCHC Work Crew

Here is the same picture, but now with dimensions 400x350. Note that everyone has thinned down considerably.

Resize your pictures for speed.
Make sure the new dimensions have the proper ratio.
Make the img src tag "Height" and "Width" match the picture's dimensions.

This is a page in my site's section on Web Design. The section has a page for:
Student Web Site suggestions
Church Web Site suggestions
HTML colors and Hexadecimal numbers
Usability suggestions for any non-profit organization with a volunteer web master.
You might also like the essay, My Adventures as a UU Web Master, a talk I gave to my church about being their web master.

Sections of my web site:

Home | Christmas Letters | Genealogy | Homilies | Misc. Essays | Peace Corps | Web Design

Problems, comments or complaints? Need an opinion? Send E-mail to:
This page updated: June 21, 2014