HTML Tutorial

HTML <img> Tag

The <img> tag in HTML is used to embed an image in a webpage. Unlike other HTML tags, the <img> tag is self-closing and does not require a closing tag. It is one of the most common elements for displaying images on websites.

What is the <img> Tag?

The <img> tag allows you to embed images in your web pages. You can use it to display a variety of image types such as JPEG, PNG, GIF, and SVG files. The <img> tag has several attributes that allow you to control the image's size, source, and alt text for accessibility.

Syntax

<img src="image.jpg" alt="Description of image" width="500" height="300">
  

Attributes of the <img> Tag

The <img> tag has several important attributes that control how the image is displayed on the webpage. Here are the most commonly used attributes:

• src (Source): Specifies the path to the image file. This can be a relative or absolute URL.
• alt (Alternative Text): Provides a textual description of the image, which is displayed if the image cannot be loaded or for screen readers.
• width: Specifies the width of the image in pixels. It helps in resizing the image.
• height: Specifies the height of the image in pixels. Like the width, it controls the size of the image.

Example

<img src="logo.png" alt="Company Logo" width="200" height="100">
  

Using the <img> Tag

The <img> tag is typically used to display images within the body of a webpage. It does not require a closing tag and can be placed directly within the content area where the image is to appear. The src attribute points to the image file, while the alt attribute ensures accessibility and provides a fallback text for users who cannot view the image.

Example

<img src="https://example.com/images/landscape.jpg" alt="Beautiful landscape" width="600">
  

Best Practices for Using the <img> Tag

Here are some best practices to follow when using the <img> tag:

• Always use the alt attribute: The alt text is important for accessibility, search engines, and providing context if the image is not displayed.
• Optimize image size: Compress and resize images to ensure they load quickly, improving user experience and SEO.
• Specify width and height: Setting the width and height of images helps in layout stability and prevents page reflow when images load.
• Use appropriate file formats: Choose the right image format (e.g., JPEG for photos, PNG for transparency) for quality and performance.

Example: Displaying an Image with a Caption

<figure>
  <img src="nature.jpg" alt="Nature scenery" width="600">
  <figcaption>A beautiful view of nature.</figcaption>
</figure>
  

Conclusion

The <img> tag is essential for embedding images on your webpage. It provides a powerful tool to enhance your content visually while also improving accessibility. By using the right attributes and following best practices, you can ensure your images load efficiently and are usable by a wide range of users.