What is this session about?
I'm glad you asked! In this session, you will learn...- How to put images onto pages
- Why images are not always a good thing
- When to use images and when not to
How do you put images onto a page?
Putting images onto a page is easy. Images are like a <br /> tag, they are just one tag with nothing in the middle. Yet, at the same time they're also like an <a> tag, they have a attribute (we need to let the computer know which image you want to use).
<img src="../../images/placeholders/100x100.png" alt="A placeholder image" width="100" height="100" />
So what do the properties do?
There are several properties in an <img> tag (as you probably just noticed).| Attribute | Purpose |
|---|---|
| src | The source of the image being used, works in the same way as a link |
| alt | Says what the image is about, allows search engines to know and is crucial for sight-impaired users as they otherwise don't know what the image is |
| width | The width of the image you want to display in pixels, does not have to be the same size as the image |
| height | The height of the image you want to display in pixels, does not have to be the same size as the image |
Width and Height
You can create an image and miss out the alt, width and height properties. Indeed, missing out the width and height attributes has no apparent effect. It does have an effect but not a very obvious one, specifying the correct height and width in HTML saves the browser time when loading and displaying the page.What you should never, ever, never ever use the width and height for is to resize an image. Though the image will be displayed in a smaller size, the file size of the image will still be the same if you shrink the image and if you make it larger in the HTML, it will look ugly and horrible almost all the time. Rule of thumb, width and height should not be different from the actual width and height of the image.
Linking
Turning an image into a link isn't very hard, simply place the image inside the <a> tag as if it were a simply piece of text. Here's an example.
<a href="page/location.html" alt="This is a page, this is what it is about">
<img src="image/source.png" alt="This is an image, this is what it is about" width="100" height="100" />
</a>
<img src="image/source.png" alt="This is an image, this is what it is about" width="100" height="100" />
</a>
When are images not good?
What you are reading right now is text. I could easily create a large image for this paragraph of text and it would look the same, however, there are several problems with this.- Images take many times longer to load than paragraphs of text
- Paragraphs of text automatically resize with the browser window
- You can select parts of a paragraph and copy them into another program
- Images are harder to edit
- Linking parts of an image is much harder and it's not so easy to get the rollover effect you get with a normal link
The main problem with images has always been and will probably always be their file size. To use an analogy, a web page might be a parcel being sent through the post. The text on the page is akin to a written letter, small and cheap to send. The images however are more akin to a bag or marbles, they're much more expensive to send. Of course, sending a web-page doesn't cost money in the same way that a letter by post would, it does however cost time. Images take much longer to load than text does and as such you shouldn't go overboard with them.
When to use an Image
So, when shouldn't you use an image? Is there a quick and easy rule to success? No, there's not. However, if an image isn't needed, don't add it. All the diagrams I've used on this site have been used alongside the text, if yours do the same, odds are they're useful.Google, Facebook and Apple all use images well and in different ways. Overall it's a matter of design which I must admit to not being overly skilled in (I just know some of the more obvious blunders).
