HTML | Images

Earlier, the webpages used to comprise of only texts, which made them appear quite boring and uninteresting. Fortunately, it wasn’t long enough that the ability to embed images on web pages was added for users. Let’s see how to add images on a webpage.

Adding images on a webpage :
The “img” tag is used to add images on a webpage. The “img” tag is an empty tag, which means it can contain only a list of attributes and it has no closing tag.

Syntax :

<img src="url" alt="some_text">

Attribute:

  • src:
    src stands for source. Every image has a src attribute which tells the browser where to find the image you want to display. The URL of the image provided points to the location where the image is stored.
  • alt:If the image cannot be displayed then the alt attribute acts as an alternative description for the image. The value of the alt attribute is an user-defined text.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
         alt="GeeksforGeeks logo">
  
</body>
  
</html>

chevron_right


Output :

Setting width and height of Image :The width and height attributes are used to specify the height and width of an image. The attribute values are specified in pixels by default.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
         alt="GeeksforGeeks logo" width="300" height="300">
  
</body>
  
</html>

chevron_right


Output :

Adding animated Image: Animated images in .gif format can also be added using the “img” tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<h3>Adding a gif file on a webpage</h3>
  
<body>
  
<img src = "smiley.gif" alt = "smiley" 
            style = "width:200px; height:200px;">
  
</body>
</html>

chevron_right


Output :


Adding titles to Image: Along with the images, titles can also be added to images to provide further information related to the inserted image. For inserting a title, the title attribute is used.
Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
     alt="GeeksforGeeks logo" width="200" height="200" title="Logo of GeeksforGeeks">
  
</body>
  
</html>

chevron_right


Output :

Setting a border to Image :By default, every picture has a border around it. By using the border attribute, the thickness of the border can be changed. A thickness of “0” means that there will be no border around the picture.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
     alt="GeeksforGeeks logo" width="200" height="200" border="5">
  
</body>
  
</html>

chevron_right


Output :

Aligning a Picture: By default, an image is aligned at the left side of the page, but it can be aligned to center or right using the align attribute.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
    <img src=
     alt="GeeksforGeeks logo" align="right">
  
</body>
  
</html>

chevron_right


Output :

Adding Image as a Link: An image can work as a link with a URL embedded in it. It can be done by using the “img” tag inside an “a” tag.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>Inserting an image using "img" tag</title>
</head>
  
<body>
    <p>inserted image using <img> tag:</p>
        <img src=
             alt="GeeksforGeeks logo">
    </a>
</body>
  
</html>

chevron_right


Output :
Before clicking the picture:
GeeksforGeeks logo
After clicking the picture:
GeeksforGeeks IDE

Using Image as a background: An image can be used a background for a webpage.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<!DOCTYPE html>
<html>
  
<body style="background-image:url
  
    <h2>Image As a Background</h2>
  
    <p>In this example we have specified a 
      background for a webpage using an image. </p>
  
</body>
  
</html>

chevron_right


Output :

Supported Browser: <img> tag supported browsers are listed bellow.

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


My Personal Notes arrow_drop_up

I am a technology enthusiast who has a keen interest in programming I am pursuing Engineering in Computer Science from GEU, Dehradun I like to unwind by watching movies and English sitcomsI have a keen interest in music

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.