HTML Images
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.
Note: The <img> tag is an empty tag, i.e. It doesn't require a closing tag.
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">
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.
We can change this behavior of HTML images by using the loading attribute.
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.
Alternatively, we can also use the height and width attributes to set the height and width. For example,
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 .