HTML Images
The HTML <img> tag embeds an image within the HTML web page. For example,
<img src="logo.png">
Browser Output
Here, the <img> tag inserts the image logo.png on the webpage.
The HTML image tag has 2 important attributes:
The src attribute
The alt attribute
Note: The <img> tag is an empty tag, i.e. It doesn't require a closing tag.
HTML Image src Attribute
The 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" >
Browser Output
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,
<img src="https://www.example.com/images/tictactoe.png">
HTML Image alt Attribute
The 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" >
The 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.
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 loading attribute.
<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 height and 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">
Browser Output
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 height and width .
