Images & <html>

It is possible to insert all kinds of images into your web pages from animated GIF's to logos and photographs.
The web was originally created as a graphical alternative to the text only limitations of tools like Gopher, that preceeded the web today as we know it.
Images today play a pivotal role in html documents they are used as decoration and navigational aids, as well as having the ability to convey a complex message that would be impossible to achieve with plain text.
Most of the browsers today support the three main graphics file formats, GIF, JPEG and PNG, the GIF and JPEG formats have been supported since the origin of the web.

These three graphics file formats use some type of compression to actually store the image, this is very important, because uncompressed images can be very large.
So it is important that you compress the files that you want to use in your document.
When file compression is implemented you have two choices either throw away information about the image itself, or find a more intelligent way to store the existing information.
With the JPEG format information about the image itself is disgarded, GIF files loose some of the color information, and PNG files store the information in a more intelligent manner.
Creating good graphics and images is a simple process using software such as Adobe Photoshop, it doesnt have to be a top notch Photshop package, software such as Adobe Photoshop Elements can be used to optimize the images or graphics.
If you reduce the size of the image to the size you need before you optimize the image this will makes the image download quicker and gives the browser less work to do resizing the image, rather than specifying a smaller image size than the actual size of the image.
Save your images as either of the following:

Capturing images or graphics from other web sites in general is not a good idea or an OK thing to do, that is unless you have explicit permission from the creator of the images.
Unless the images are from a site that makes the graphics or images available to download and save them, essentially you are stealing them from the legitimate owner.
Using images or graphics without permission could land you in court, after all they are intellectual property and as such protected by copyright laws.
The fact that an image or graphic is on a web page, does not automatically mean that it is in the public domain.
Even though it does get downloaded into your own computer in the cache or Temporary Internet File folder, and yes the browser does give you the ability to save the image or graphic, as a local file.
If you do save the image or graphic then it does not mean you have the right to use the it or that you own it either.
If you do see an image that you like on a web page , then you should email the owner of the page or web site and ask if they own the image and if you can use it.
Most people will be flattered by your request and chances are they will let you have a copy, but be sure the person owns the image or the permission will mean nothing especially if they stole the image in the first place.

To insert an image or graphic into an html document we use the <img> tag, the image tag takes two attributes alt and src
The alt attribute specifies text that should be displayed if the image is not available for nonegraphical browsers.
The src attribute tells the browser what image file it should display.
The example of code below illustrates how to insert an image called bob.png into an html document.
To see the code example rendered in a browser use this link insert image.

The example of code below illustrates how the <img> tag should be closed in xhtml.

The src attributes value can be an image or graphic file that is on the same Web server, as the html document.
It can also be any valid URL that is pointing to an image that resides on a different Web server.
You can use an absolute or a relative URL to specify the location of the image or graphic file to be displayed.
The reasons for using either type of URL are the same that would normally apply to using relative or absolute URL's in anchor tags in an html document.

Most browsers will attempt to display the image at the point where the <img> tag has been inserted into the html document.
If it is not possible for the browser to fit the image on the current line it will then wrap it to the next line and it will follow the paragraphs alignment formatting as this example illustrates.
With Internet Explorer the default formatting of the image is that it is aligned with the neighbouring text.
This may not always be ideal, and there will be times when you will want to specify the alignment of the image relating to other text and objects around it in the document.
The alignment of the image is controlled using the align attribute with the <img> tag.
The code examples below illustrate the align attribute:
To see the code examples below rendered in a browser use this link align

However the align attribute has now been deprecated in favour of using CSS styles to align the image.
The following CSS properties can be used to align images.

The examples of code below illustrate how to apply the float property to the <img> tag.
To see both of the code examples below rendered in a browser use this link float

Some browsers need to process the image alignment first before the text around the image.
When using CSS to position images, it is usually best to position the image before neighbouring text in the document.

We must not forget that some browsers do not support graphics, and in some cases user's even turn off the graphics in their browser to speed up web browsing.
Equally we must also remember that there are plenty of people with visual disabilties, who cannot see the pages the way we do for instance just being color blind can make quite a difference to the way the page appears.
So we must remember to provide some alternative text for the browser to render if the image is not available.
This is what we use the alt attribute of the <img> tag for, so that we can specify some text that should be displayed when the browser cannot display the image.
Some browsers, display the alternative text when the user mouses over the image, this also allows you to include additional information regarding the image.
If you mouse over the image below on the right the browser will display a little box with the alt text for the image which is "Little Bob" this is also illustrated in the example of code below.

You can also specify the size of an image using the height and width attributes in the <img> tag.
These attributes accept pixel and percentage values, to allow you to specify the exact size of an image or a size relative to the current browser window.

It is a good idea to get into the habit of always including the height and width attributes with your <img> tags in your documents.
This allows the browser to reserve the correct amount of space for the image as it then continues to render the rest of the document.
Otherwise without these attributes the browser has to wait until it has loaded the images before it can continue and load the rest of the document.
Remember it is important to specify the correct height and width for the image otherwise the image may be stretched or shrunk in one dimension.
You can also specify one dimension and the browser will automatically figure out the other dimension, however this has a slight drawback the browser has to wait for the image to load, before it can continue and render the rest of the document.
So it is always best to specify both of the dimensions and then there will be less chance of any problems when the browser renders the image.
You can also use the size value's to display an image at a reduced size,as the example of code below illustrates.
Remember that you need to reduce to the nearest pixel there is no such thing as half a pixel.
To see the exapmle rendered in a browser use this link size and scale

To create a border around an image you can use CSS styles.
In previous versions of html the border attribute was supported for the <img> tag, which worked in a similar manner to the border attribute of the <table> tag.
However the border attribute has been deprecated and you should now use CSS styles instead.
The example of code below illustrates how to define a black 4 pixel wide border around the entire image.

The example below illustrates how to define a border on just the left and right sides of the image.

A simple way of defining a different border for one side of an image, you can use the border property to first define a border on all sides of the image, and then the appropriate border–side property for the side that is the exception.
This will then override the previous setting for that side of the border around the image, there are two ways to do this.
You could for example create a border on all sides of your image except the left, to do this you would specify border–top, border–right, border–bottom properties individually.
Or you could just specify border and also border–left and set the border property to none.
The code examples below illustrates this to see the examples rendered in a browser use this link borders

It is possible to make an image clickable the simplest way to achieve this is to nest the <img> tag in an anchor tag <a> an example of this are the icons on the right here where you can download the examples and the source code, both images are hyperlinks.
This allows you to create custom buttons for links to other pages/documents with graphics editing software.
The code example below illustrates how to nest or embed an image in an anchor tag.
To see the example below rendered in a browser use this link image hyperlink

Image maps provide a means of mapping certain areas of an image to actions, for example a web site may provide an image which is a map of a country and users could click on a location on the map to find information about that location.
There are two types of image maps these are client–side and server–side.
The server–side image maps reply on the user agent (browser) to tell the server where the user clicked on the image map, and all the processing is done on the server.
The client–side iamage maps rely upon the user agent (browser) to process the image and the area where the use clicks on the image, and the expected action.
Of the two methods the client–side image maps are generally preferred, because they allow the user agent (browser) to offer immediate feedback to the user, and are supported by most of the user agents browsers.
The server–side image maps can get bogged down if the map draws a lot of traffic, and this may hide details necessary to provide feedback to the user, also they may not be compatible with some user agents (browsers).

A client–side image map is specified using <map> tags and it is linked to an appropriate <img> tag with the <img> tags usemap attribute.
The code example below illustrates how to specify a map for the image planetmenu.png

The various clickable regions of the image are specified inside the <map> tags.

In order to specify an image map a list of polygonal regions must be defined on an image and then referenced in the html document.
Three different types of polygons are supported these are rectangle, circle and free form polygon.

All the coordinates of the image map are relative to the top–left corner of the image (0, 0) and they are measured in pixels.
Knowing the upper–left corner coordinates and the size of each rectangle, makes it easy to work out the coordinates of the bottom–right corner of each rectangle.

You can specify the regions using <area> tags with shape and coords attributes and using the alt attribute will help the user to determine where the clickable area leads to.
The code example below illustrates how the regions can be specified for the image planetmenu.png

The code example below illustrates how the code looks when we put everything together and specify a map and the regions of the image planetmenu.png
To see the code example rendered in a browser use this link image map

You can find more information at the W3Schools web site on the image tag.

html & Images

Compression

Capturing images and graphics

Inserting an image

Alignment

Alternative text

Size and scale

Borders

How to make an image into a hyperlink

Image Maps

Specifying an image map

Specifying clickable regions