Skip to content
Related Articles

Related Articles

How to Insert an Image in HTML?

Improve Article
Save Article
  • Last Updated : 04 Aug, 2021
Improve Article
Save Article

We can use different fonts and lists in an HTML document. Similarly, we can add graphics to make the document look more attractive. Web browsers support a number of graphic formats. Some of the most widely used formats are:

  • Graphics Interchange Format(GIF): GIF is the best format displaying images designed with a graphics program. This format uses a maximum of 256 colors and a combination of these to create more colors.
  • Joint Photographic Expert Group(JPEG): JPEG is the best format for photographs as it contains 1 million colors.
  • Portable Network Graphics(PNG): The format is best for images with transparency or the low color count.

Use of <img>Tag

The <img> tag specifies an image to be displayed in an HTML document. It is an element as it does not have an OFF tag.

The image tag has the following attributes in the table:

AttributeDescriptionValuesExample
srcSpecifies the URL imageURL<img src=”pic1.jpg”>
alt

Specifies the alternative text for an image. This is displayed when the graphics feature is turned off in the browser or while 

The image is being downloaded. In some browsers, the ALT text is displayed as a tooltip for the image. 

text<img src=”pic1.jpg” alt=”Image not available>
heightSpecifies the height of an imagevalue in pixels<img src=”pic1.jpg” height=”100″>
widthSpecifies the width of an imageValue in pixels<img src=”pic1.jpg” width=”90″>

The following HTML code will help you understand the <img>tag better. The resulting web page is shown in the output.

Method 1: Inserting an image with CSS

HTML




<!DOCTYPE html>
<html>
    <style>
        image{border:4px solid orange; width: 120px;height: 100px;}
        h1{text-transform:uppercase}
    </style>
<head>
    <title>
        HTML frame scrolling Attribute
    </title>
</head>
<body>
    <h1>INSERTING IMAGE</h1>
    <img src="5.png" alt="image is not available">
</body>
</html>

Output:

Method 2: Inserting Image without the CSS

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        HTML frame scrolling Attribute
    </title>
</head>
<body>
    <h1>INSERTING IMAGE</h1>
    <img src="5.png" alt="image is not available" width="120px" height="100px">
</body>
</html>

Output:

Supported browsers are:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!