HTML Images

Images are considered as the best way to beautify and to represent many complex concepts in as simple way as possible. You can also insert images in an HTML document based on what you want to view on your webpage.

<img> tag

<img> tag is used to define images in your HTML web page.

This tag does not have any closing tag and contains only attributes, src, alt, height, width, style.

You can use one or more attributes depending on your requirements.

Syntax of <img> tag

<img src="URL">

Here, src attribute specifies the web address of an image.

alt attribute

The attribute is used with <img> tag when you want to display an alternate text for an image. This text will display when you take cursor on that specific image. It is also helpful in displaying a content that enables the user to understand what this image contains, especially when the user is unable to view this image due to any reason, such as poor internet connection, an error in src attribute and others.

The value of the alt attribute should be such that defines the image.

Example:

<img src="good_morning.jpg" alt="Have a positive and wonderful day">

Width and Height of HTML Image

There are two ways to specify the width and height of an image.

● Using style attribute

● Using width and height attributes

Example - style attribute

<img src="good_morning.jpg" alt="Have a positive and wonderful day" style="width:300px; height:400px;" >

Example - width and height attributes

<img src="good_morning.jpg" alt="Have a positive and wonderful day" width="300" height="400" >

In this example, you do not need to specify the size in pixels, as by default both width and height attributes define the image in pixels.

It is recommended to specify the width and height of the image. It is so because if you do not specify width and height, the page might flicker when uploading the image.

Which is better? - Width and height or Style

This example will help you to understand ‘which is better’.

<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>

<img src="good_morning.jpg" alt="Have a positive and wonderful day" width="300" height="400" >
<img src="good_morning.jpg" alt="Have a positive and wonderful day" style="width:300px; height:400px;" >
</body>
</html>

When the image uses width and height attributes, the stylesheet overrides the width attribute and set it to 100%, which means 300 pixels will get hidden under the stylesheet.

When the image uses the style attribute, the width which is set to 400 pixels overrides the stylesheet.

Images stored in another folder

If you have stored the image in a sub-folder, you have to include the folder name in the src attribute.

Example:

<img src="/images/good_morning.jpg" alt="Have a positive and wonderful day" style="width:300px; height:400px;" >

Images stored on another server

Some developers prefer to store the website images on the image servers. Though you can easily access any kind of image from any web address in the world, it is important to specify the address to display the image.

Example:

<img src="https://www.abcd.com/images/good_morning.jpg" alt="Have a positive and wonderful day" style="width:300px; height:400px;" >

HTML Images as Link

You can also use any image in your HTML web page as a link.

Simply include <img> tag within the <a> tag.

Example:

<a href="default.asp">
<img src="butterfly.jpg" alt="Beautiful flying butterfly" style="width:50px; height:50px; border:0;" >
</a>

In this example, the value of border attribute is given 0 to prevent Internet Explorer from displaying a border around the image.