Tutorial Manthra

Images are very important part of website. Images add beauty to website as well as images depict complex concepts in a simple way.
Images can drastically improve the design and the appearance of a web page.

Adding images to an Html document is very easy. You can use the <img> tag for that.

The <img> is an empty tag, means it don’t have a closing tag and it can contain only attribute. The src attribute is compulsory to display the image in a web page.

The syntax is given below.

<img src = "Image URL” />

The above code is sufficient to display an image in a web page. But it is recommend to use some more attribute along with the src attribte. The alt attribute is compulsory among them.

The image tag has a lot of attribute. Let us learn them one by one.

The Image Alt attribute

The alt attribute is a mandatory attribute which specifies an alternate text for an image, if the image cannot be displayed. Also the alt attribute tells search engines what the image is about. So always remember to add the alt text along with all images.

<img src = "Image URL” alt=”This is a test image” />

You can use any Jpeg, gif or png image in webpage but make sure you add the correct file name and extension of the image.

Set Image Location

Normally for easily managing files we keep all html file in one location and all images in another location. So we keep our test file in the home directory and all the images in a sub directory named images.

<img src = "images/flower-image.jpg" alt = "Test Image" />

Set Image Width/Height

You can set image width and height based on your requirement using width and height attributes. You can specify width and height of the image in terms of pixels or percentage of its actual size.

<img src = "images/flower-image.jpg" alt = "Test Image" width = "150" height = "100"/>

Set Image Border

By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.

<img src = "images/flower-image.jpg" alt = "Test Image" border = "2"/>

Set Image Alignment

By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.

<img src = "images/flower-image.jpg" alt = "Test Image" border = "2" align = "right"/>

Animated Images

You can use animated gif images in the same way

<img src=”images/flower-image.gif” alt=”Animated image” />

Images on another Server

You can also add images from another server or your own subdomain in the same way. Only thing is you need to add the complete path as src attribute. Also the the server should allow hot linking.

<img src=”http://images.keralapicnicspot.com/kanayi-kanam-8.jpg” alt=”images from another server” />

It is a good practise to store all your images in a subdomain as it speeds up your website.

HTML Image Links

We have already seen how to use hyperlinks to link between pages and how to use images in webpages. Now let us see how we can use images to create hyperlinks.

To create an image as a hyperlink you only need to put the images inside the anchor tag in place of the anchor text.

Example

<a href = "https://www.tutorialmanthra.com"> 
    <img src = "https://img.tutorialmanthra.com/flower-image.jpg" alt = "Tutorialmanthra" border = "0"/> 
</a>

Output

Note: border:0; is added to prevent IE9 (and earlier) from displaying a border around the image (when the image is a link).

Note: Loading images takes time. Large images can slow down your page. Use images carefully.