HTML Images - All img Tag, img Attributes, Importance and Usage

HTML IMG Tag | HTML image Tag with src, alt, width, styles, height, border, align, href Attributes

“There is an old Proverb, "A picture can say a thousand words” The message you can tell through the Image. Words do not have that much power. 

Recognizing the power of pictures, Image is also used in Webpages.

In this tutorial, we will tell you how to insert Images on Webpages. How to define an Image in HTML Document? What is the method of inserting Images in webpages?

This lesson is divided into several small sections to simplify the HTML <img> concept. The list of these sections is given below.

HTML Images

{tocify} $title={Table of Contents}

Most Common Image Formats

Most common image file types, which are supported in all browsers “Chrome, Edge, Firefox, Safari, Opera:

AbbreviationFile FormatFile Extension
APNGAnimated Portable Network Graphics.apng
GIFGraphics Interchange Format.gif
ICOMicrosoft Icon.ico, .cur
JPEGJoint Photographic Expert Group image.jpg, .jpeg, .jfif, .pjpeg, .pjp
PNGPortable Network Graphics.png
SVGScalable Vector Graphics.svg

Introduction to HTML Image

The image makes our webpage more attractive. Readers also like blog posts made with photos more than webpages made without photos.

That's why Image Element has been added to HTML. Image Element is used to insert a picture in an HTML document. 

  • Image is defined by <img> tag. 

<img> Tag is an Empty HTML Tag, which does not have any companion tag, i.e., Closing Tag.

Images can be inserted in various formats in an HTML document. You can add photos in PNG, JPEG, GIF, etc., formats. In whatever format we want to use the image, we have to tell that format.

Syntax of HTML Image

Syntax to insert Image in HTML Document is given below

The src attribute defines the URL (web address) of the image:

<img src=" your-image-URL" alt="some_text">{codeBox}

Two things are essential in Image Syntax—first, the <img> Tag itself and the second src Attribute. You are familiar with the <img> tag. It works just like other Opening HTML Tags.

But, the src attribute is very useful and essential in this tag. The work of this attribute is to define the image path in the document—the Image you want to add to your webpage. 

The full URL of that picture has to be written within Double Quotation Mark (" ").

Note: The file name is Case Sensitive. That's why the name of the Image is written as it is. 

Similarly, you write in src Attribute because picture.png and Picture.png are two different files for the browser.

Apart from this, some other attributes are used in the <img> tag, which defines other features of the Image. About whom are being told below.

Names and Uses of Commonly Used Attributes with Image Element

  • src - This attribute is used to define the source of the Image, i.e., URL.
  • alt - This attribute is used to tell about the Image.
  • Style - CSS Rules are applied to the Image with the Style Attribute.
  • width & height - Both these attributes are used separately. Image Width and Height are defined by them.
  • align - Image Alignment is defined by this.
  • border - Image Border is defined by Border Attribute.
  • title - This attribute is used to give the title to the Image.

How to add photos to a webpage - Inserting Picture in HTML Document

Copy the HTML code given below and paste it into your notepad or type this code manually and save the file as HTML-IMG.html. And open it.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

   <title>HTML Image Example</title><body>

</head>
 <body>

<img src=”AKAHTIMES-logo.png”>

</body>
</html>{codeBox}

When you see the above code in the browser, you will see results like this. 

We have added an Image to the webpage through this code. This Image is the Official Logo of AKASH-TIMES.

Output:


Writing Alternative Text for Image

The alt attribute is used to write alternative text for the Image. It should always be used like src Attribute while defining Image. 

Because when for some reason, the Image is not displayed. Then only this alternative text is visible to the user. 

Apart from this, it is necessary to write Alternative Text for Screen Readers, Search Engines, etc. Because it cannot see the Image, it can only be read.

Example: Try this 

When you define Alternative Text for Image, then this text is not visible to the user. Only Screen Readers and Search Engines Robots can read it. 

But, when the image is not displayed, the user only sees this text. Alternative text for an image is written in this way.

<img src="AT-logo.png" alt="AKASH-TIMES Logo">{codeBox}

When you insert an image from the written code and that image is not showing. So in its place, we will be delivered the text written in the alt attribute.

Output:

AKASH-TIMES Logo

Setting the Width and Height of the Image

Setting the width and height of the image is the right thing to do. You can also set Image Width and Height through CSS or Style Attribute. But here, we are using the width and height attributes.

Example: try this

We are taking the photo used above to set the width and height of the image. Whose width is 100px and height is set to 50px? Now we will see this photo in this size only.

<img src="AT-logo.png" alt="AKASH-TIMES Logo" width="100px" height="50px">{codeBox}

From the above code, you will see an image like this.

Output:

AKASH-TIMES Logo

Note: Here, we have defined Image Width and Height in Pixels. If you want, you can set Percentages (%) and Points (pt), apart from this in many other units.

Setting up Image Alignment

Image Alignment is defined by the align attribute. By Default Image is visible to us on the left side. But, with the align attribute, you can also show an image in the right and centre.

Example: try this

<img src="AT-logo.png" alt="AKASH-TIMES Logo" align="center">{codeBox}

In the above code, we have centre Aligned the Image. You will now see this picture in the middle of the webpage.

Output:

AKASH-TIMES Logo

The way we have set Center Align here. In the same way, you can set Right Align.

Note: You can use HTML | <img> align Attribute to any direction -

Syntax: 

<img align="left|right|middle|top|bottom">

Attribute Values: 

  • left: It sets the alignment of the image to the left.
  • right: It sets the alignment of the image to the right.
  • middle: It sets the alignment of the image to the middle.
  • top: It sets the alignment of the image to the top.
  • bottom: It sets the alignment of the image to the bottom.

Setting Image Border (Add a Border to an Image)

The border attribute is used to set the image border. You can set the Border for an Image in this way.

Use the border property to add a border to an <img> element:

Example: try this

<img src="AT-logo.png" alt="AKASH-TIMES Logo" border="4px">{codeBox}

When you write the above code will give you this type of result.

Output:

AKASH-TIMES Logo

HTML | Mapping Image - with Examples

With HTML image maps, you can make clickable areas on an image.

Image Maps

The HTML <map> tag defines an image map. An image map is an image with clickable areas. The areas are represented with one or more <area> tags.

How Does it Work?

The concept behind an image map is that you should be capable of performing various actions depending on where in the image you click.

To make an image map, you require an image and some HTML code representing the clickable areas.

A clickable area is defined using an <area> element.

Shape

It would be best if you defined the shape of the clickable area, and you can choose one of these values:

  • rect - represents a rectangular region
  • circle - describes a circular region
  • poly - defines a polygonal region
  • default - characterises the entire region

You must also specify some coordinates to be able to place the clickable area onto the image.

Example: Create Image Map

<!DOCTYPE html>
<html>

<head>
<title>HTML map tag</title>
<style>
body {
margin-left: 250px;
}
</style>
</head>

<body>
<h2>Example of HTML Map tag</h2> 

<img src="your-image.png" usemap="#web">

<map name="web">
<area shape="rect" coords="66,117,131,168" href="https://www.akashtimes.com/html-tutorial">
<area shape="rect" coords="199,36,277,85" href="https://www.akashtimes.com/css-tutorial">
<area shape="rect" coords="330,107,406,159" href="https://www.akashtimes.com/bootstrap-tutorial">
<area shape="rect" coords="199,185,267,236" href="https://www.akashtimes.com/javascript-tutorial"> </map>

</body>
</html>{codeBox}

Note: Before writing or copying the above code, make sure to change the image and href links.

How to Add a Background Image in HTML

According to the categories of websites, it is also necessary to change their background. 

You must have seen the backgrounds of many websites; It is in different colours, or there are images on the backgrounds of some websites.

The default background colour of HTML is white, but if you want, then you can also change the background colour.

Here we will learn about two types of backgrounds.

  1. colour background
  2. Image Background

1. Coloured Background in HTML

The bgcolor attribute is used in Simple HTML for colour (not colour) background, but this attribute has been removed from HTML5. 

But still, it works on all browsers. Please do not use it because it can be removed from the browser at anytime.

Use bgcolor or background Attribute

Syntax :

<element_name bgcolor="color_name">

<element_name background="color_name">{codeBox}

bgcolor Attribute Example in HTML

<html>

<body bgcolor="green"> <!-- also use background = "green" -->

Hello World

</body>
</html>{codeBox}

Output:

Hello World

Types of values in bgcolor Attribute

Type of ValueDescription
color_nameHere the name of the color is given. For example, bgcolor = "green"
Hexadecimal color codeHex code color is also given here. For example, bgcolor = "#FF0000"
rgb color codeThe rgb(red,green,blue) color code is also given here. for example, rgb(255, 0, 0)
hsl color codehsl (hue,saturation,luminance) color code is also given here. for example, hsl(360, 100%, 50%)

Examples of color name, hex code and RGB code

<!-- Example 1 -->
<body bgcolor = "green"> </body>

<!-- Example 2 -->
<body bgcolor = "#FF0000"> </body>

<!-- Example 3 -->
<body bgcolor = "rgb(255,0,0)"> </body>

<!-- Example 4 -->
<body bgcolor = "hsl(360,100%,50%)"> </body>{codeBox}

Use style attribute instead of bgcolor attribute

Instead of using bgcolor in HTML, use style attribute. This attribute is available for all elements of HTML.

<!-- Example 1 -->
<body style="background-color:red"></body>

<!-- Example 2 -->
<body style="background-color:#FF0000"></body>

<!-- Example 3 -->
<body style="background-color:rgb(255,0,0)"></body>

<!-- Example 4 -->
<body style="background-color:hsl(360,100%,50%)"></body>{codeBox}

Image Background in HTML

The 'background' attribute is used on simple HTML for the image. But the colour name can also be given on this attribute.

This attribute background has been removed from HTML5, but it still works on all browsers.

Syntax:

<element_name background="image_path_or_color_name">{codeBox}

Example:

<!DOCTYPE html>
<html>
<body background = "https://www.akashtimes.com/images/forest.png">

</body>
</html>{codeBox}

Output:

forest

Use style attribute instead of background attribute

The background attribute has been removed from HTML5, don't use it. 

Instead, use style attribute value background-image: url("image_path")

<!DOCTYPE html>
<html>

<body style='background-image:url("https://www.akashtimes.com/images/forest.png");'>

</body>
</html>{codeBox}

Output:

forest

Picture Element in HTML with Examples

The HTML <picture> element authorises you to display different pictures for different devices or screen sizes.

HTML <picture> Element

The HTML <picture> element delivers web developers more flexibility in specifying image resources.

The <picture> element includes one or more <source> elements, each referring to various images via the srcset attribute. This way, the browser can pick the image that best fits the current view and/or device.

Each <source> element has a media attribute that specifies when the image is the most suitable.

Example:

Show different images for different screen sizes:

<!DOCTYPE html>
<html>
<head>
    <link rel="icon" href="robot.png">
      <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>HTML <picture> Element Example</title>

    <style>
        body {
            display: grid;
            place-items: center;
            height: 100vh;
        }
    </style>

</head>

<body>

    <picture>
        <source media="(min-width: 650px)" srcset="https://cdn.pixabay.com/photo/2018/05/31/10/03/big-tree-3443533_960_720.jpg">

        <source media="(min-width: 465px)" srcset="https://cdn.pixabay.com/photo/2014/05/05/14/14/meadow-338211_960_720.jpg">

        <img src="https://cdn.pixabay.com/photo/2015/05/27/13/05/plant-786689_960_720.jpg">
      </picture>

    <div>
    </div>

</body>
</html>{codeBox}

Note: The picture element isn’t supported in any browsers yet; it’s still only a suggestion. It’s going to hit that fallback whenever a browser doesn’t support <picture>.

When to use HTML Picture Element?

There are two main purposes for the <picture> element:

  • 1. Bandwidth: If you have a small screen or device, it is unnecessary to load a large image file. The browser will use the first <source> element with matching attribute values and ignore any of the following elements.

  • 2. Format Support: Some browsers or devices may not support all image formats. By using the <picture> element, you can add images of all formats. The browser will use the first format it recognizes and ignore any of the following elements.

Note: The browser will utilise the first <source> element with matching attribute values and ignore any following <source> elements.

HTML Image Tags

TagDescription
<img>Defines an image
<map>Defines an image map
<area>Defines a clickable area inside an image map
<picture>Defines a container for multiple image resources

Conclusion:

Friends, according to my expertise, I have written complete information to help you on “HTML Images - <img> Tag, <img> Attributes, Importance and Usage.” If this post is favourable for you or not, please tell me by commenting.

If you liked this post, do not forget to share it with your friends so they can get information about it.

You can ask us through comments if you still have questions or doubts, I will answer all your questions, and you can contact us for more information.

Please tell us through the comment section if you think we miss anything.

To be published, comments must be reviewed by the administrator.*

Previous Post Next Post