Awww ain't it cute?! Such cuteness brings a tear to your eye *sobs*... The above *sob*, is an example of an image. Image? An image is a picture. And in this chapter, I show you how to include them in a web-page.
There are a few quick things you'll need to know about your image before you can put it in your web-page:
- where it is
- what it is called
- what file extension it has
Here's the code for example, when the image is in the same folder as the web-page that wants to include it. The image is called myphoto, and it's file extension is .jpg. Note that because the image file is in the same folder as the web-page, we can just reference the image file directly.
<img src="myphoto.jpg">
And... here is the code, for an image that is stored in a sub-folder called images. The image is called bubble-sprite, and it's file extension is .png.
<img src="images/bubble-sprite.png">
And... here is the code, for an image that is in the next folder up. The image is called cake, and it's file extension is .gif. Note the use of the ../, used to specify we want the next folder up in the folder hierarchy.
<img src="../cake.gif">
Finally... an image that is stored on a different website. Note that because it is on another website, we need the full address, that is, the URL of the image in question. Also note that loading images in like this will only work if the website in question allows it (unfortunately some of the website owners out there are complete jerks (by the way, don't load my images in directly)).
<img src="http://somewebsite.com/public-folder/spleen.jpg">
But that's not everything
Well, although the above codes will all work perfectly well, each example is missing something called the "alternative text" attribute. Whenever you load in an image, it is recommended that you specify alternative text so that if someone is using a browser that doesn't support images (like a screen-reader or mobile phone), they will see something in it's place. You can be as descriptive as you wish. The correct versions of the above examples could be:
<img src="myphoto.jpg" alt="My Photo">
<img src="images/bubble-sprite.png" alt="Bubble Sprite">
<img src="../cake.gif" alt="Cake">
<img src="http://somewebsite.com/public-folder/spleen.jpg" alt="Spleen">
or
<img src="myphoto.jpg" alt="Me looking most fantastic at Nan's birthday do">
<img src="images/bubble-sprite.png" alt="The bubble sprite I use in my game">
<img src="../cake.gif" alt="A very tasty looking cake">
<img src="http://somewebsite.com/public-folder/spleen.jpg" alt="The human spleen...">
Sometimes, you might have merely included the image for decorative purposes, or you might just think that it would be nice if the user saw the image, but it's not going to ruin the web-page if for some reason they can't. When this happens it is recommended that you still include the alt attribute, but you leave it blank. This way it shows you have at least considered the alt attribute and that you haven't just... blatantly ignored it!
<img src="myphoto.jpg" alt="">
Specifying a Width and Height (Optional)
If you specify a width and a height for an image, it will reserve that width and height within the page layout even before the actual image has completed loading. This means that any content that's position is effected by the image's width and height, like any paragraphs below the image, will be in the correct position right away.
If you don't specify a width and height, any content effected by that width and height will not be in the final position until that image has completed loading. So for example, if you have a huge image, and then immediately afterwards you have paragraphs of text, without a width and height being specified, the image will take on a temporary height while the image is loading (usually the height of a line of text), and the following paragraphs will be immediately below this position. Once the image has then completed loading, the paragraphs will have to move downwards to the correct position, to make room for the full height of the image!
The code to specify the width and height for an image that is 100 by 150 pixels is:
<img src="some-image.jpg" alt="" width="100" height="150">
As you can see, it's as simple as including a width and a height attribute. Just as a reminder, you can put attributes in whatever order you wish. So this would produce the same output:
<img width="100" src="some-image.jpg" height="150" alt="">
Specifying a Different Width and Height
If you want to... you can actually specify a different width and height to that of the image itself. Taking the lovely bird picture as an example... the code I used to load it in at it's actual size was:
<img src="demo-image.png" width="120" height="111" alt="Demo Image">
If I want to however, I can make it smaller by specifying a smaller width and height. Changing the code to
<img src="demo-image.png" width="60" height="56" alt="Demo Image">
Produces an approximately half sized:
This is all well and good, and will work perfectly well but is a bad practice. If you want to show an image in a different size, you should re-size the image using software, and then load the new image instead! This is better for bandwidth and such software will do a better job with the re-size than most browsers will!
<img src="demo-image-small-version.png" width="60" height="56" alt="Demo Image Thumbnail">
Visitors Want Fast Loading Images
One thing that you can count on, is that visitors will not want to wait a long time for your web-page to finish loading. Images can be the cause of a slow loading web-page. To make sure your web-pages load quickly, when including images:
- Always save images as .jpg, .gif or .png. Only go with a .png if you know what you're doing! If you're really not sure, just go with a .jpg or a .gif.
- Make sure images aren't too huge... 640 x 480 should really be the maximum
- If you must have an exceptionally large image on your website, provide a link to that image instead of including it on the page itself
But where do I put the image code?
The simple answer is, wherever you want inside the body of the web-page! The image element displays inline... This means that it does not generate a new-line, and it will display in line with any text. This means you could put it within a list element, within a paragraph, inside a table cell, whatever you want. It will appear on the web-page where you tell it to!
Now... give the image tag a whirl yourself, and then get someone to sit next to you and watch you take the end of chapter quiz to show them how clever you are.