A fact i hope everyone making websites knows - include an alt tag with all your images.
Doing so will ensure that your website meets accessibility requirements but more importantly it lets everyone use your website including those with screen readers.
Now something i hadn't bothered with until recently was the height and width attributes. If you make your image the right size and don't include the height and width attributes then the image will be displayed the size it is. 'Why bother with height and width attributes?' I thought to myself.
WRONG! By including height and width attributes you will be improving your web page, making it load faster and making a better experience for your users.
While images are still being downloaded your web page will appear correctly because all the spaces where images should be are the right height and width.
Have you ever been onto a site and found that as the images load up, the text and copy and design all start pinging all over the place? Well that's because they haven't included height and width attributes.
It also means that if an image fails to load completely your page will still look the same, and if you've put in a useful alt tag the impact on your web page design is minimal. More info on height and width tags here.
For example, see my fictional code for a pretend image of a certain rock god in a tourist hotspot
including height, width and alt:
<img src="http://www.yourwebpage.com/yourimage.gif" alt="Robert Smith standing in front of the Taj Mahal" width="75" height="100" />
Related posts
Search images by the colours within them (Feb 2009)
Give images rounded edges using Photoshop (Nov 2007)
No comments:
Post a Comment