Scribd
Upload
5 views3 pages

HTML Images

The document explains the HTML <img> tag, which is used to embed images in web pages, highlighting the importance of the src and alt attributes. It also discusses lazy loading of images to improve page load times and provides guidance on setting image dimensions using style attributes. Best practices for using the <img> tag are emphasized throughout the document.

Uploaded by

singh vijay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views3 pages

HTML Images

The document explains the HTML <img> tag, which is used to embed images in web pages, highlighting the importance of the src and alt attributes. It also discusses lazy loading of images to improve page load times and provides guidance on setting image dimensions using style attributes. Best practices for using the <img> tag are emphasized throughout the document.

Uploaded by

singh vijay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

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 .

You might also like