Skip to content
Related Articles

Related Articles

Improve Article

How to Insert an Image in HTML?

  • Last Updated : 04 Aug, 2021
Geek Week

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

Attention reader! All those who say programming isn’t for kids, just haven’t met the right mentors yet. Join the  Demo Class for First Step to Coding Coursespecifically designed for students of class 8 to 12. 

The students will get to learn more about the world of programming in these free classes which will definitely help them in making a wise career choice in the future.




My Personal Notes arrow_drop_up
Recommended Articles
Page :