<img> tag embeds an image within the HTML web page. For example,
Here, the <img> tag inserts the image logo.png on the webpage.
The HTML image tag has 2 important attributes:
<img> tag is an empty tag, i.e. It doesn't require a closing tag.
HTML Image src Attribute
src attribute is a required attribute for the
<img> tag. It specifies the path (URL) to the image. It tells the browser where to look for the image. For example,
<img src="tictactoe.png" >
In the above example, the
src attribute tells the browser to load the image from the same directory where the webpage is located.
Similarly, if the image is stored in a subdirectory, the path in the
src attribute would be written as
<img src="images/tictactoe.png" >
If the image is located on another server entirely or if we want to use an image from the web, we can provide an absolute URL for the image. For example,
Note: Although we can provide an absolute path for images located in our own web server, better to provide a relative path as it leads to faster loading times. Hence always use relative paths for images in your own server.
HTML Image alt Attribute
alt attribute is the text description of an image. The value of the
alt attribute should describe the image such that the content is meaningful even if the image fails to load.
<img src="computer.png" alt=" A standard Computer" >
alt attribute's contents are shown if the user cannot view the image (slow internet, wrong src attribute, or using a screen reader).
It also helps in SEO as it helps the search engine understand what images are about.
HTML Image title Attribute
title attribute displays the information about the image when the user hovers over the image. For example,
<img src="tictactoe.png" alt="A game of tic-tac-toe" title="Tic-Tac-Toe" />
Note: Although alt and title attributes appear similar, the title attribute cannot be used as an alternative to the
alt attribute. The title is not read by screen readers and does not display when the image fails to load.
Lazy loading HTML images
By default, all the images on the web page are loaded during the initial load. If there are many images on the page, this causes the page to load slowly.
We can change this behavior of HTML images by using the
<img src="dinosaur.png" alt="A T-rex" loading="lazy">
Now the image will not load until the user scrolls near the image location. If the image is at the bottom of the page and the user never scrolls down on the website, the image will never load.
This decreases the website's initial load time and prevents unnecessary data fetching.
HTML Image Size - Width and Height
We can use the
style attribute to specify the height and width of an Image. For example,
<img src="tictactoe.jpg" alt="A game of tic-tac-toe" style="width: 200px; height: 200px;">
Alternatively, we can also use the
width attributes to set the height and width. For example,
<img src="tictactoe.jpg" alt="A game of tic-tac-toe" width="200" height="200">
We should always set the height or width of images. Otherwise when the image loads, the content on the webpage will be shifted.
Note: The above two code samples give the same output, however, it is best practice to use the
style attribute rather than
Common Image Formats
|GIF||Graphics Interchange Format||.gif|
|PNG||Portable Network Graphics||.png|
|SVG||Scalable Vector Graphics||.svg|
|JPEG||Joint Photographic Expert Group image||.jpg, .jpeg|