Objective:

By the end of this lesson, you will understand how to use the <img> tag to add images to a webpage, along with the importance of attributes like src, alt, width, and height. You will also learn how to choose the right image format and follow best practices for adding images to enhance your website.

Introduction:

Images play a crucial role in making web pages visually appealing and engaging. The <img> tag in HTML allows you to embed images on a webpage easily. Whether you’re adding a photo, a logo, or an icon, the <img> tag is an essential tool for displaying visual content.

What is the <img> Tag?

The <img> tag is used to embed images into your HTML document. It is a self-closing tag, meaning it doesn’t require a closing tag.

Syntax of the <img> Tag:

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

Let’s break this down:

• src (Source) – This attribute specifies the path or URL of the image you want to display. The src can either link to a local file or an external URL.
• alt (Alternative Text) – The alt attribute provides a text description of the image. It’s important for accessibility and helps search engines understand the content of the image.

Example of Adding an Image:

<img src="https://www.example.com/image.jpg" alt="A beautiful sunset over the mountains">

In this example:

• The image is fetched from the URL https://www.example.com/image.jpg.
• The alternative text "A beautiful sunset over the mountains" is displayed if the image cannot be loaded or for users relying on screen readers.

Key Attributes of the <img> Tag:

1. src (Source): This attribute is used to specify the location of the image file.
2. alt (Alternative Text): A description of the image for accessibility purposes and when the image fails to load.
3. width and height: You can use the width and height attributes to define the size of the image in pixels.
   <img src="image.jpg" alt="Beautiful Sunset" width="600" height="400">
4. title: The title attribute provides additional information about the image that appears when you hover over the image.
   <img src="image.jpg" alt="Beautiful Sunset" title="A beautiful view of nature">

Image Formats:

HTML supports several image formats:

• JPEG (.jpg, .jpeg) – Best for photographs and images with gradients.
• PNG (.png) – Suitable for images with transparency or logos.
• GIF (.gif) – Often used for animated images.
• SVG (.svg) – A vector image format, ideal for logos and illustrations.

Best Practices for Adding Images:

• Use Descriptive Alt Text: Always include descriptive alt text to make your site more accessible.
• Optimize Image Size: Ensure images are not too large to reduce page load times.
• Choose the Right Format: Use the correct image format based on the type of image (e.g., use PNG for transparent backgrounds, JPEG for photos).

Example of a Full Image Tag with Attributes:

<img src="https://www.example.com/sunset.jpg" alt="A beautiful sunset over the ocean" width="800" height="600" title="Sunset View">

This example shows:

• The image will be displayed with a width of 800px and height of 600px.
• The alt text will be shown if the image can’t be loaded.
• The title will appear when the user hovers over the image.

Conclusion:

The <img> tag is an essential HTML tag for embedding images into your website. Understanding its attributes, like src, alt, width, and height, will allow you to create visually engaging web pages. Additionally, following best practices for image optimization and accessibility will help ensure a better user experience.