Image Tag

Images play a crucial role in enhancing web pages by providing a visual context that complements textual content. In HTML, the <img> tag is used to embed images into web pages.

Basic Syntax for Embedding Images

This is how the syntax to embed an image in HTML looks:

<img src="image's path" />

Key Features of the <img> Tag

• It is an empty element, meaning it does not require a corresponding closing tag.
• Commonly used attributes include src for specifying the image location and alt for providing a text description.
• It supports common image formats including PNG, JPEG, JPG, and GIF.

Setting Mandatory Attributes

The src and alt attributes are essential when using the <img> tag.

src Attribute

The src attribute specifies the path or URL to the image file that should be displayed.

alt Attribute

The alt attribute provides a text description for the image. It can be shown when the image cannot be displayed and is also useful for accessibility.

<img src="images/profile_picture.jpg" alt="Profile Picture" />

Finding an Image's Location

To find an image's location, you can right-click on the image and inspect its properties or copy its image address, depending on your operating system and browser.

Setting Image Dimensions

Image dimensions can be specified using the width and height attributes in the <img> tag.

<img src="image.png" alt="Description" width="300" height="100" />

Specifying dimensions gives the browser information about the space an image needs. This can help the browser reserve space before the image has fully loaded and can help reduce layout shifts.

Although dimensions can be provided in HTML, styling image dimensions and other visual properties is commonly handled with CSS for greater flexibility and maintainability.

Example: A Complete Image Element

Here is a simple example that combines the most important attributes:

<img
    src="images/profile_picture.jpg"
    alt="Profile Picture"
    width="300"
    height="200"
/>

The browser uses src to locate the image, alt to describe it, and the dimension attributes to define its intended size.

Supported Image Formats

The <img> element can be used with many common image formats. Some widely used formats include:

• PNG: Commonly used when transparency or lossless image quality is important.
• JPEG / JPG: Commonly used for photographs and other complex images.
• GIF: Can be used for simple animated images.

Video Tutorial

Use the video area below to demonstrate how images are embedded and styled in HTML.

Quick Summary

• <img> is used to embed images into an HTML document.
• src specifies the image location.
• alt provides a text description for the image.
• width and height can define the intended image dimensions.
• CSS is commonly used to control image styling and responsive sizing.