HTML images are used to display pictures, graphics, illustrations, and other visual content on a webpage. Images make websites more attractive and help users understand information easily. HTML provides the <img> tag to add images to a webpage.

The <img> tag is an empty element, which means it does not require a closing tag. You can use attributes such as src, alt, width, and height to control how an image is displayed.

What Is an HTML Image?

An HTML image is a visual element displayed on a webpage using the <img> tag. The src attribute specifies the image location, while the alt attribute provides alternative text describing the image.

HTML Image Syntax

The basic syntax for displaying an image in HTML is:

<img src="image.jpg" alt="Description of the image">

In this example, src specifies the image file, and alt describes the image for users who cannot see it or when the image fails to load.

The HTML Image Tag

The <img> tag is used to embed images in HTML documents. It supports several attributes that help developers control image appearance and accessibility.

• src: Specifies the path or URL of the image.
• alt: Provides alternative text for the image.
• width: Sets the image width.
• height: Sets the image height.
• title: Provides additional information, often displayed as a tooltip.

HTML Images Example

The following example demonstrates how to display an image using HTML.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Images</title>
</head>
<body>

    <h1>HTML Images Example</h1>

    <img src="flower.jpg"
         alt="A beautiful flower"
         width="300"
         height="200">

</body>
</html>

In this example, the browser displays the flower.jpg image with a width of 300 pixels and a height of 200 pixels. The alternative text describes the image if it cannot be displayed.

Make sure that the image file exists at the specified location.

Using an Image URL

You can also display images hosted on another website by providing the image URL in the src attribute.

<img src="https://example.com/flower.jpg"
     alt="A beautiful flower">

The browser attempts to load the image from the specified URL. The image may not appear if the URL is incorrect or the hosting website blocks external requests.

Setting Image Width and Height

You can control an image’s dimensions using HTML attributes or CSS. For responsive images, CSS is often useful because it allows images to adjust to different screen sizes.

<img src="flower.jpg" alt="A beautiful flower"
     style="max-width: 100%; height: auto;">

Here, max-width: 100% prevents the image from exceeding its container’s width, while height: auto maintains its original aspect ratio.

Best Practices for HTML Images

Always provide meaningful alt text for informative images. Use descriptive file names, optimize image file sizes for faster loading, and choose suitable image formats such as JPEG, PNG, WebP, or SVG. Use responsive CSS to ensure images display correctly on mobile devices and desktop screens.