learn web technologies, the easy way

HTML and Images

First a word about the size of the images. The smaller the image, the faster the download. That being said, there are a number of ways to reduce image size. We’ll come to that subject later.

Images may be inserted into your site using the <img> tag. You need to tell the browser where the image is, and the image will be shown in the place where you’ve placed the tag. Here is an example:

<img src="images/coolphoto.jpg">

This means the source (src=) of the image is in a folder one level below the site's root folder and is called "images". Contained within the "images" folder is an image called "coolphoto.jpg".

This will work just fine, but it isn’t optimal. You should also specify the size of the image by adding the "height" and "width" specification to the tag, as in:

<img src="images/coolphoto.jpg" height="200" width="300">

NOTE: There is one important point about the height and width. If you don’t specify it or if you specify a height and width different than the actual height and width, then the browser will be forced to either calculate the values, or it will need to resize the image. In both cases your page will load more slowly, sometimes much more slowly. Therefore always try to specify the exact height and width for your images.

Image Borders

If you want the image to have a border drawn around this, you simply add the “border” attribute to the tag:

<img src="images/coolphoto.jpg" height="200" width="300" border="1" >

Which means “show this coolphoto.jpg image, that is 200 pixels high and 300 pixels wide and draw a 1-pixel border around it”. If you would like to have your image also be a link, all you need to do is place the image tag within an <a> tag:

<a href="www.x2tutorials.com"><img src="someimage.jpg" height="50" width="50"></a>