Adding Images to your Pages

There are several image file formats you can use you can insert into your web pages. These most commonly used are:

"GIF"
"JPG"
"PNG"
"SVG"

There are more, but

In order to include an image on your site, you have to store it on your server and provide the address of the graphic in an img tag. You will almost always use relative addresses for graphic files.

Netiquette dictates that your graphics be stored in your own web site's directories or on another site that you own. The only exception to this rule would be if the owner of the graphic specifically states that linking directly to the graphic is all right.

Never, never, link to other people's graphics without their permission.

An image tag looks like this:

<img src="image.gif" alt="">

Of course, you would replace "image.gif" with the name of your own image file. You can use relative addressing here as well, so you can store all of your images in a directory called images or pictures or whatever. The path to the file would then look like this: "images/image.gif".

Here is an example:

There are several other pieces of information you should include in an img tag. One is text that will be displayed for people who have browsers incapable of displaying graphics (or who are surfing the 'net with graphics turned off.)

You should also include information about the height and width of the graphic, because it will allow the web browser to display the text on your page more quickly because it can leave an appropriate amount of space for the graphic while the graphic is downloaded to the reader's computer. A full image tag would look like this:

<img src="fido.jpg" width="150" height="150" alt="Picture of my dog." >

The <picture> Element

Just one more... the <figure> Element

Exercises

Go back to your About page and add a picture of yourself. Use any of the image elements I showed you in this tutorial.
If you haven't already, create a figure. Make sure that you include the figcaption element too.