HTML Images

We all are aware of the most common format of images i.e., JPG, GIF and PNG.

Now, inserting these images using HTML is not so simple.

Just like other tags and elements, there are specific HTML elements that are commonly used to insert an image in a web page. Further, its dimensions and style can be changed.

<img> tag is used to define an image.

Syntax

<!DOCTYPE html>

<html>

<body>

<h1>A beautiful sky</h1>

<img src=”sky.jpg” alt=”Blue Sky” style=”width:200px; height:100px;”>

</body>

</html>

Please Note:

• Never forget to specify the width and height of an image. If the dimensions are not specified, the image gets distorted on the page.

HTML <img> tag

• Only attributes are used with <img> tag.
• There is no closing tag for <img>.

HTML src attribute

src attribute is used for defining the location or the web address of the image.

HTML alt attribute

alt attribute is used to specify the alternate text of an image, in case the image cannot display its message.

There are various reasons when image unable to appear to the viewer. Some of the reasons are slow connection, user using the screen reader or error in the src attribute.

In case, if browser is unable to read the image, then it will display the alt tag.

Syntax

<img src=”example.png” alt=”This is an example” style=”width:150px; height:150px;”>

Please Note: Without the alt tag, a web page will not validate the image.

HTML Screen Readers

HTML Screen Reader is a software program used to read the text on the screen.

Screen readers are useful to the people with physical disability like blind, learning disabled or visually impaired.

Please Note: alt tag can be read by screen readers.

HTML Image Size

style attribute can be used to define the width and height of an image.

The size can be defined using in pixels which is denoted as px.

Syntax

<img src=”example.png” alt=”This is an example” style=”width:120px; height:120px;”>

OR

<img src=”example.png” alt=”This is an example” width=”120” height=”120”>

Style or Width and Height : Which is better to use?

Although, height and width and style attributes are valid to use in HTML5. But it is recommended to use style attribute. It helps in avoiding making the changes in original size of the image within style sheet.

Syntax

<!DOCTYPE html>

<html>

<head>

<style>

img { width:70%;  }

</style>

</head>

<body>

<img src=”example.png” alt=”This is an example” style=”width:120px; height:120px;”>

<img src=”example.png” alt=”This is an example” width=”120” height=”120”>

</body>

</html>

HTML Images: At Another Location

Whenever, the image location is not specified, the browser finds the image in the same folder as the web page does.

Usually, the images are stored in the sub-folder. Therefore, the folder name can be specified within src attribute.

Syntax

<img src=”/images/example.png” alt=”Tech Dot Blogs” Example” style=” width:120px; height:120px;”

HTML Images : At Another Server

Some websites use image servers to store their images.

This is why, the user can access any image in the world from any location using web address.

Syntax

<img src=http://www.techdotblogs.com/images/example.png alt=”Tech Dot Blogs Image”>

Animated Images

GIF standard is used to execute animated images.

Syntax

<img src=”techdotblogs.gif” alt=”Tech Dot Blogs” style=”width:25px; height:25px;”>

Please Note: Syntax of inserting animated and non-animated images is the same.

Adding Link to Image

Image can be used as a link using a <img> tag within <a> tag.

Syntax

<a href=”http://www.techdotblogs.com”>

<img src=”example.gif” alt=”Example” style=”width:25px; height:25px;”>

</a>

HTML Floating Image

CSS float property is used to allow the image floating.

Any image can float to right or left of the text using the syntax.

Syntax

<p>

<img src=”example.gif” alt=”Example” style=”float:left; width:25px; height:25px;”>

This image will float to the left of the text.

</p>

HTML Image Maps

• Image map can be represented using the <map> tag. An image-map can be clicked to view various regions.
• The relationship between the image and the map can be established using the name attribute of <map> tag and usemap attribute of <img> tag.
• The clickable areas within the image-map can be defined using <area> tag with <map> tag.

Syntax

<img src=”example.png” alt=”Example” usemap=”#example” style=”width:25px; height:25px;”>

<map name=”examplemap”>

<area shape=”rect” coords=”0,0,52,120″ alt=”Map1″ href=”map1.html”>
<area shape=”circle” coords=”25,38,2″ alt=”Map2″ href=”map2.html”>
<area shape=”circle” coords=”105,88,6″ alt=”Map3″ href=”map3.html”>
</map>

Let Us Quickly Revise

<img>                                             To define an image

src                                                    To define the image URL or location

alt                                                    To define the alternate text for an image

width and height                         Defines the size of the image

float                                                To let the image float

<map>                                            To define the image-map

<area>                                            To define the clickable areas within image-map

usemap                                          To point an image-map