Image Types

You remember at the start of this course we talked about file extensions, and you learnt what the.html file extension was? You're now going to learn about two new file extensions: JPEG and GIF.
Just like web pages and word process documents have file extensions, so too do images have file extensions. There are a wide range of file extensions used for images. The two most popular file extensions used on web pages are JPEG and GIF. (PNG is another popular image format. It's similar to GIF, so we won't discuss it.)

GIF Images

GIF stands for Graphics Interchange Format, and was developed by Compuserve. It uses something called a LZW compression algorithm to reduce the size of the file. The size of your images on web pages is a crucial factor for people using slower connections. If you have an image that is 1 megabyte in size, and I only have a 2 megabit connection speed then it's going to take about 4 seconds to load the image on the page. That may not seem a long time, but if my speed drops to 500 kilobits per second then it will take 16 seconds to appear. I'm not likely to wait that long for your image to load!
So compressing the size of an image makes sense on the internet. If you've taken a photo and then saved it to your computer, take note of the file extension used. The software package you use to view the image will probably give you the opportunity to save the file in another format. Saving the file as a GIF image will greatly reduce the size of the file.
There is a down side, however, in converting to a GIF. The number of colours in your image is capped at 256 colours. For realistic photos, this is not nearly enough. And although your file size is greatly reduced so too could be the quality of your image.

JPEG

JPEG is the other popular image format used on web pages. It stands for Joint Photographic Experts Group, and allows you to have images with more than 256 colours. In fact, millions more. Again, your original image is compressed when you convert to a JPEG image, so some loss of quality is inevitable. If you want to show off your photos in their best light, converting to JPEG rather than GIF is the best option for the internet. The size of the file might be slightly higher, but then so will the quality.
The downside to JPEG images is that jpeg is a Loss Compression format. This means that image quality goes down (rapidly) the more times you compress and uncompress the image. This happens when you save the file over and over again. GIF on the other hand is a Lossless Compression format, meaning there will be no loss of quality when you compress and uncompress the image.
Another thing you can't do with JPEG images is have a transparent background. So if your image was this:

Example of an image on a black background

and you wanted to get rid of that black background, you could set the black colour as a transparent colour, if you save as a GIF. With a JPEG, you're stuck with the black background. (You can also animate GIF images, which you can't do with JPEG images.)
In general, if your image is less than 256 colours, then save the image as a GIF; if the image is more than 256 colours, and quality is important, then save the image as a JPEG. (Modern digital cameras and mobile phones usually save your pictures in the JPEG format.)

Inserting images into a web page

So you have your image file, either a GIF file or a JPEG. How do you get it into a web page? You do so with the IMG tag in HTML. The basic IMG tag looks like this:

There are no closing tags for the IMG tag. So you don't do this:

In between a pair of angle brackets, you type the letters IMG (short for image, of course). After a space, you type SRC. This stands for Source and means the location of your image. After an equals sign, you type the name of your image between a pair of double quotes.
It's essential that you get the SRC part right, though. To do that, you need to know about Absolute versus Relative file referencing.

Absolute Referencing

Take a look at this file reference:

C:\Users\Owner\Documents\HTML\some_image.gif

Starting from the right-hand side, this says that there is an image called some_image.gif. This has been saved into a folder called HTML. The HTML folder is in the Documents folder. The Documents folder is in a folder called Owner. The Owner folder is in a folder called Users, which is on the C drive. This is an Absolute file reference. It points to a specific location on your C drive.
This would be no good on the internet, however. Although you will have all these folders on your C drive, somebody else viewing your web page won't. But that person's browser will try to look for all these folders. Of course it won't be able to find them, because all the folders are on your computer, and not theirs. So the image you specified to use in your web page won't be displayed to anybody.

Relative Referencing

With Relative Referencing, the starting point is not your own computer, but the image file or HTML file itself. With Absolute Referencing, the browser starts the search for the image on the left hand side:

With Relative Referencing, the browser starts the search for the image on the right hand side:

So with a Relative reference, the browser starts looking for a file called "some_image.gif". If you just put this:

the browser will look for the file in the same folder where you saved your web page. If it's there, no problem; the browser will display the image. You don't need to add anything else, because the browser will stop searching when the image has been found. In fact, the ONLY place the browser will look is in the same folder where you saved your web page.
So with Relative Referencing, if you put all your images and web pages in the same folder, the browser will know where to find everything. And when you're asking the browser to display an image or another web page, you only need the name of the image or web page. You don't need to do this:

You can just do this:

On a professional level, though, dumping everything into one folder is frowned upon. If you created a folder called "web_site" you would be expected to create other folders inside this one. A folder called "images" to store all your image files; a folder called "scripts" to store any external code; and a few other folders as well.
If you do that, Relative Referencing gets a little bit trickier. For example, suppose you have a web page called index.html. You've place this web page inside of a folder called web_site. You've created another folder inside of your web_site folder. You've called this new folder images. So your file and folder structure looks like this:

Folder structure showing an images folder and a web page

Of course, you will have placed all of your images in the images folder. Now, if you want one of those images on the index.html page, you couldn't do this:

If you tried that, the image wouldn't display. That's because you haven't told the browser about that folder called images. You would have to do this:

The forward slash means "look for a folder called . . . that is in the same folder as the current file." In this case, look for a folder called "images". (The current file is index.html, which is where you want the image to appear.)
If you wanted to point to an image that was outside the "web_site" folder, then life just got even trickier still. (You'll see how to solve this later). But as a beginner, if you keep everything in the same folder - images and web pages - then this sort of relative referencing should work:

In case all this file referencing is not too clear,

More on Inserting Images

In the previous section, you learnt about relative file referencing. In this section, we'll continue the lesson with some practical work.

Navigate to where on your hard drive you saved your HTML pages. For us, this was a folder called HTML. Inside of the HTML folder, create two more. Call one of the folders images and the otherpages. If you're using a Windows computer, your Explorer window will then look like this (Windows 7):

Double click your template text file and add the following HTML image code:

Click File > Save As and save your template as a HTML file. But save it in your new pages folder, and call it images.html. Don't forget to change the Save as type box to All Files, if you're using Windows:

Windows Explorer showing folder structure

Once you have saved your template as a HTML web page, double click it to open it up in your browser. You should see this, if you are using Firefox:

If you are using Internet Explorer, however, you should see this:

Internet Explorer showing broken image reference

In both cases, the image has not displayed. Firefox displays a broken file icon, and Internet Explorer displays a red X icon. The reason is that the browser can't find the file. So if you see either of those icons in future, just remember that the browser is telling you "Image File Not Found".
To solve this problem, we have some files for you. The file you need is in the extra_files folder that came with this course. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course(You don't need the downloads for the old course.)
Double click the extra_files folder, and then double click the york_images folder. Copy theyork_minster.jpg file and paste it into your HTML/pages folder. Your pages folder will then look like this:

The image and the web page are in the same folder, the pages folder. Notice the file size of the image - 747 kilobytes. Could be a bit big on the internet, and we'd want to look into this.
Once you've copied the image over, refresh your HTML page in your browser. You should see the image appear:

If you don't see an image, but still have the "Image File Not Found" icon, make sure the SRC part of the HTML is correct:

SRC="york_minster.jpg"

Note the lowercase spelling, and the two double quote marks. A common error is to spell SRC as SCR. Make sure, too, that the image and the web page are in the same folder.
Once you get the image displayed in the browser, create another folder inside the pages folder. Call this one york_images. Your explorer window should then look like this:

Now move the york_minster.jpg image to the york_images folder. Your explorer window will then look like this:

Reload your web page in your browser. You should see the "Image Not Found" icon again.
Go back to your HTML code and change the IMG line to this:

So we've added the folder name, then a forward slash. This denotes a folder in the same directory as the HTML page. After the forward slash, we have the image name. What we're saying here is, "In the same folder as the images.html page, look for a folder called york_images. In this folder there is an image called york_minster.jpg".
Save your work and reload the images.html web page in your browser. You should see the image reappear.

Advanced file referencing

Previously, you created an images folder and a pages folder. This:

For neatness sake, this is a good idea: you can have most of your html pages in the pages folder, and all your pictures in the images folder. (We say most of your html pages because there is an exception called the index.html page. You'll learn about this a bit later.)
One difficulty about this approach is that file referencing becomes a lot harder. Suppose we moved the york_images folder inside of the images folder. If we did, the code we wrote before would no longer work. This line:

That's because there would no longer be a folder called york_images in the same location as theimages.html file. The image is now one folder up from the pages folder. The code would therefore be this:

After SRC we now have two dots and a forward slash. Two dots and a forward slash mean "go up one folder from where you are". (Remember, this is all relative to the images.html page, where the code is.) The browser will then look for a folder called images. It will search this folder for one called york_images. Then it will look for the image specified.

Image Attributes

When you use IMG you are using a HTML tag. The SRC part is called an attribute. There are lots of other attributes you can add to the IMG tag. Here are the image attributes in HTML 5:

ALT
SRC
HEIGHT
WIDTH
USEMAP
ISMAP

In previous versions of HTML, you also had these:

ALIGN
BORDER
HSPACE
VSPACE

However, these have now been deprecated (no longer valid). You can still use them, though. But the HTML 5 way is to apply these with CSS. You'll see how to do that shortly.

The ALT Attribute

The first attribute is ALT. You use it like this:

ALT means "alternative text". If the image does not display then users will see the text between the double quotes of ALT. Try it out. Change your HTML code to this:

Here, we've changed the name of the image. Now save your work and refresh your page in the browser. You should see this (Internet Explorer):

Browser showing the effects of the ALT attribute

Internet Explorer has added the ALT text after the red X.
You should always add some ALT text to your IMG tags as it is helpful to blind and partially sighted users: the ALT text will be read out. ALT text is also useful for search engines, especially Google's image search.

Height and Width Attributes

Another thing you can do with the Image tag is specify a new height and width. This one is quite easy. Change your image tag to this (we've left the ALT tag off):

The original image was 2048 pixels high by 1536 pixels wide. By changing the Height and Width, we can decrease the size of the image. The image itself will still take the same amount of time to load into a browser because we haven't changed the size of the JPEG file. All we've done is to change the height and width attributes of the IMG tag.
This, however, would not be practical on the internet, because the size of the JPEG file wouldn't change. All you'll do is use up more download time to get a smaller image. So when changing image size with the Height and Width attributes, go up in size and not down, as we have done here. If your images are too big, use image editing software to reduce the height and width.

The USEMAP Attribute

The USEMAP attribute is used to turn specific areas of an image into clickable links. Take the image below, for example. We don't want the whole of the image to be a hyperlink, just the coloured shapes.

If you hold your mouse over the grey areas then nothing happens - your mouse pointer won't change. Hold your mouse over a shape, however, and the mouse pointer changes to indicate that it's a link. This is all done with the USEMAP attribute. The HTML code with a USEMAP attribute looks like this:

After the attribute USEMAP comes an equal sign, then the name of your map, preceded by a hash/pound symbol. The name of the map can be anything you like.
Once you have a map name, you need a map to go with it. Take a look at this code, which is the map for our shapes image above:

</MAP>

So you have two MAP tags, a start and an end one. The first MAP tag takes a NAME attribute. This is the USEMAP name from your IMG code. In between the two MAP tags you need at least one AREA tag. The AREA tag takes attributes of its own: SHAPE, COORDS, and HREF. The shapes you can have are RECT (short for rectangle), CIRCLE, and POLY (short for polygon). Each shape needs some coordinates (the COORDS attribute). For any rectangular area of your image you need the coordinates of the top left corner in pixels. Ours was 37 and 25. This means 37 pixels from the left edge of the image itself (the X direction), and 25 pixels down from the top of your image (the Y direction). The bottom right of our rectangle was 137 pixels in the X direction and 72 in the Y direction.
For a circle, you need the X and Y values for the centre of your circle. You measure from the left of the whole image, not the left edge of the circle. For the Y direction, you measure from the top of your image. The third coordinate you need for a circle is the radius (half the diameter).
For a Polygon, you need X and Y coordinates for each point. Our polygon is a triangle, so has an X and Y value for each of the three points.
The HREF attribute is the web page a visitor is taken to when an area on the map is clicked. We've typed a # symbol. This means "don't go anywhere - stay on the same page".

Images and CSS

Before we start, make sure to copy our smaller images over to your york_images images folder, as explained earlier. There should be 5 of these in the files you downloaded for this course: (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course (You don't need the downloads for the old course.)

york_minster.jpg
york_minster_2.gif
york_minster_3.gif
york_minster_4.gif
york_minster_5.gif

The smaller ones are all GIF images.
In HTML5, image alignment is done using CSS. However, if you just want basic left, right or centre alignment then the DIV tag is quite useful. The DIV tag is an all-purpose tag. It's somewhat like the P tag in that you get a line break after you use it.
To see the DIV tag in action, amend your HTML code to this (we've missed out the DOCTYPE tag at the top):

Text editor showing the DIV tag in action

Here, we're using a pair of DIV tags: <DIV></DIV>. After a space, we've added the attribute ALIGN="right". This will apply to anything between the opening and closing DIV tags. For us, this is the second of the York Minster GIF images.
Save your work and reload the web page in your browser. You should see this:

The other two horizontal values for the ALIGN attribute are left and center (American spelling). Try them out by deleting "right" and replacing it with first <DIV ALIGN="left"> then <DIV ALIGN="center">. Save your work and see what the results are in your browser. (If you just want left alignment then you don't need the DIV tags at all, because left is the default alignment.)
The ALIGN attribute can also be used with the P tag:

</P>

Again, this will apply to anything between the two tags, including text.
Now add some text above and below the two DIV tags:

When you save your work and view the results, you should see this with a left aligned image:

Notice that the DIV tags has put some space above and below itself: you don't need to add a P tag for the text. But you can if you want - it's always good practice to have your text between P tags.

Wrap text around an image with CSS

A few of the IMG Attributes from previous version of HTML have been deprecated in HTML5. One of the most-used was the image alignment attributes. You had quite a few to choose from:

Absbottom
Absmiddle
Bottom
Middle
Left
Right
Texttop
Top

So you could do this:

What you were doing here was wrapping text around an image. You were not aligning an image independent of text. You were saying, "wrap the text to the top of the image".
In HTML5 text wrapping is done with CSS. Let's see how to get the following style:

Browser showing text wrapped around an image

As you can see, the image is on the right and the text flows around it. There is also space between the image and the text.
The first thing to do is to set up a STYLE in the HEAD section of the HTML. Add the highlighted code to your own HTML:

The style we've set up is called TextWrap. In between the two curly brackets we have this:

float: right;
margin: 10px;

The CSS property we need in order to move the image is called float. The float property can take three values: left, right and none. To get some space between the image and the text we can use the margin property. We've set it to 10 pixels. This will give you space around the entire image. If you only want space on specific sides of the image you can use these:

margin-left
margin-right
margin-top
margin-bottom

So we could have done this:

margin-left: 10px;
margin-bottom: 10px;

That would get us a 10 pixels margin on the left of the image and 10 pixels at the bottom.
To apply the style to the image, you need to add the CLASS attribute to the IMG tag:

The CLASS attribute doesn't have to go at the end. If you prefer, you can put it after the IMG tag:

Just take note of where all the spaces are in the code above.
Amend your own IMG tag and add CLASS="TextWrap" to your own IMG code. Before you try it out, add a paragraph of text below the image:

<IMG class="TextWrap" SRC="york_images/york_minster_2.gif">
<P>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at ante. Mauris eleifend, quam a vulputate dictum, massa quam dapibus leo, eget vulputate orci purus ut lorem. In fringilla mi in ligula. Pellentesque aliquam quam vel dolor. Nunc adipiscing. Sed quam odio, tempus ac, aliquam molestie, varius ac, tellus. Vestibulum ut nulla aliquam risus rutrum interdum. Pellentesque lorem. Curabitur sit amet erat quis risus feugiat viverra.
</P>

You can, of course, use your own text, and not just the Lorem ipsum text. Make sure your IMG code is above the first P tag, however.
Save your work and view the results in your browser.
There is, however, a problem with the above code. Suppose we want a second paragraph of text with another image floated on the left. We want to do this:

Browser showing text wrapped around two images

Here, the second image is nicely aligned below and to the left of the first image. The text is in the right place, too.
To achieve this, you might think of adding a second style and then applying it to the second image. Like this:

CSS code that wraps text to the left and right of two images

In the second style, we've used float: left and added a 10 pixel margin as before. In the second IMG tag, we've used the new TextWrapLeft class.
However, saving the work and refreshing gives you this in the browser:

Browser showing badly aligned text wrapping

In this version, the second image starts two thirds of the way down the first image. The text doesn't flow as we want it, as well.
The way to correct this is to use a CSS property called clear. This clears any floating elements and gets you back to the normal, default flow for browsers. The clear property can take four values: left, right, both, none. Because our first image was floated to the right, we want to clear to the right. We can add this to the second style:

If our first image had been on the left, we would have used clear: left.

CSS Image Borders

You can have a nice border around your images. There are quite a lot of CSS borders to choose from. But not all are supported in every browser. For example, the border style inset might work OK with a black border in Firefox but not Internet Explorer. (Most border styles should work OK, though.)
The border properties you'll use the most are these:

border-style
border-width
border-color

The border style values you can use are these (you can also use outset, hidden, and none, but we won't):

dotted
dashed
solid
double
groove
ridge
inset

Border width comes in three flavours: thin, medium and thick. But you can also specify a width in pixels.
The Border colour can be something like "red" or a hexadecimal/rgb value.

Exercise
Add the following to your TextWrap style:

Here, we've set a solid border with a width of 2 pixels. We've also set a colour.
Save and refresh in your browser to see what it looks like.

Exercise
Try the other border styles mentioned above. Experiment with the width and colour values to see how they work.
You can add a CSS border to other HTML elements. For example, if you wanted a border around a paragraph of text, set up a style and add it to the P tag. Like this:

(The padding property above will get you some space between the border and the text.)

The Background CSS Property

HTML elements can have a Background property set. (By elements we mean just about anything between the two BODY tags.) The BODY tag itself can take the Background property. For example, if you wanted a light cream page instead of plain white, you can use the background-color property. Like this:

CSS showing the background-color property

With this style, the whole of the page will be a different colour. That's because we applied it to the BODY tag itself.
You can also set up a CSS class and just colour a paragraph, with perhaps a border around it:

CSS and HTML showing the background-color and border properties

The result would look like this:

Browser showing background-color and border properties

Here, we have a green colour for the text background. The border has 20 pixels of padding between the border and the text. This kind of styling is good for things like callout boxes, when you want to emphasise a particular point. You could even have a fancy callout box, if you experiment with the CSS border properties:

The result of the above code would be this:

Notice how we've used three CSS values with one property:

border-top: 2px #159648 dotted;
border-bottom: 2px #159648 dotted;

We've set a border width, then a colour, then a border style. Each value is separated by a space.

Background Images and Background Positions

You can set your backgrounds to be images, if you prefer. The CSS property to use isbackground-image. For the value, you specify the location of your image. This goes between round brackets and after the word url. The image name is surrounded with single quote marks:

BODY {

}

The same rules on image referencing you learned earlier apply here. The above code, therefore, references an image in the same folder as the current web page. You could place your background images in a folder called backgrounds. The code would then be:

BODY {

}

The default for background images is for them to be repeated. For example, if your background image is 100 pixels by 100 pixels this image will be copied until the whole of the screen is filled. This tiling can look awful. The image below shows this:

The background image we used above was a 200 by 200 gradient. It looks OK going from left to right (the X direction). But going down (in the Y direction) the tiling looks terrible!
To give you more control of background tiling, the CSS property background-repeat is used. The property can take four values: repeat, repeat-x, repeat-y, and no-repeat. For our gradient above, we want it to only tile from left to right, in the X direction. So we need repeat-x:

BODY {

}

Our background would then look like this:

A properly tiled background image using repeat-x

Which is far superior!

Background Position

You can specify a position for background images. For that the CSS property background-position is used. This property takes the following values:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

But you can also use pixels with X and Y values. It's also possible to use a page percentage. As a practical example, suppose you wanted a logo in the top right of your page. You could do it like this:

BODY {

background-image: url('backgrounds/logo_brolly.gif');
background-position: top right;
background-repeat: no-repeat;

}

The effect would be this:

An image positioned using the CSS property background-position

Notice that we've used background-repeat with a value of no-repeat, otherwise we'd get a page full of brollies!
Here are some examples of the other values you can use:

background-position: 300px 100px;

background-position: 80% 0%;

With the pixel values (px) the X direction comes first, followed by the Y direction. A space separates the two. The same is true of the percentage values: X direction first, then Y direction, a space as the separator.
Try them out for yourself. You'll find the background images in the extra files that came with this course, in the extra_files/backgrounds folder. (If you haven't got the extra files yet, the download location is here, under the heading Web Design - New Course : Download the Extra Files needed for this course.

Adding captions to images

Two new elements are the HTML5 tags FIGURE and FIGCAPTION. The first one, FIGURE, is good for things like images and other graphics, while FIGCAPTION is used to tell people what they are looking at. As an example, take a look at the following code:

<IMG SRC="york_images/york_minster.jpg">
<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>

</FIGURE>

Here, we've surrounded the IMG code with two FIGURE tags. FIGCAPTION tags are then place under the image. This is what the above code looks like in a browser:

You can have the FIGCAPTION tags above the image, if you prefer:

<FIGCAPTION>A view of York Minster from a side street.</FIGCAPTION>
<IMG SRC="york_images/york_minster.jpg">

</FIGURE>

Notice, though, that the FIGURE and FIGCAPTIONS tags don't get formatted for you - you have to do that yourself with some CSS:

FIGCAPTION {

font-style: italic;
font-variant: small-caps;

}

Because FIGURE and FIGCAPTION are new HTML5 tags, older browsers won't know what they are. So they get rendered on the page as inline tags. What this means is you won't get an automatic line break for your figure captions: they will just be side-by-side with the images. The solution is to use the CSS property display with a value of block. Like this:

FIGURE, FIGCAPTION {

display: block;
font-style: italic;
font-variant: small-caps;

}

The CSS above tells the browser to render FIGURE and FIGCAPTION tags as block-level elements. Because block level elements are stacked one on top of the other, your caption will then be in the right place - above or below your images. (You'll learn more about block-level elements in the CSS positioning chapter later in the course.)

CSS borders, backgrounds, margins, padding

CSS Property	CSS Value
border-style	dotted, dashed, solid, double, groove, ridge, inset
border-width	A pixel value like 2px
border-color	A colour value
background-color	A colour value
background-image	url('my_image_name.gif');
background-repeat	repeat, repeat-x, repeat-y, no-repeat
background-position	top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right
clear	left, right , both , none
float	right, left , none
margin	A pixel value like 5px
margin-left	A pixel value like 5px
margin-right	A pixel value like 5px
margin-top	A pixel value like 5px
margin-bottom	A pixel value like 5px
padding	A pixel value like 5px

Developers Study Center

Search This Blog

HTML Section 4: Dealing with Images

Image Types

GIF Images

JPEG

Inserting images into a web page

Absolute Referencing

Relative Referencing

More on Inserting Images

Advanced file referencing

Image Attributes

The ALT Attribute

Height and Width Attributes

The USEMAP Attribute

Images and CSS

Wrap text around an image with CSS

CSS Image Borders

The Background CSS Property

Background Images and Background Positions

Background Position

Adding captions to images

CSS borders, backgrounds, margins, padding

Comments

Post a Comment