The <img> tag is used to embed an image into an HTML page. It's a self-closing tag, meaning it doesn't have a separate closing tag.

Example 1: Basic Image Insertion with src and alt

<img src="images/sunset.jpg" alt="Beautiful sunset over mountains">

Explanation This example demonstrates the core usage of the <img> tag. The src attribute tells the browser where to find the image file, while the alt attribute offers a text description of the image, vital for screen readers and when the image cannot be displayed.

The Essential src and alt Attributes

The src (source) attribute defines the URL of the image to be displayed. The alt (alternative text) attribute provides a text description of the image, which is crucial for accessibility and SEO.

Example 2: Relative and Absolute src Paths

<img src="images/logo.png" alt="Company Logo">
<img src="https://example.com/images/banner.gif" alt="Promotional Banner">

Explanation This example showcases both relative and absolute paths for the src attribute. Relative paths are good for images within your project, while absolute paths are used for images hosted externally.

The Importance of Descriptive Alternative Text for Accessibility

Descriptive alt text is paramount for web accessibility, allowing screen readers to convey image content to visually impaired users. It also helps search engines understand image content, boosting your site's SEO.

Example 3: Good vs. Bad alt Text

<img src="product.jpg" alt="Red bicycle with basket">
<img src="icon.png" alt="Icon">

Explanation This illustrates the difference between effective and ineffective alt text. Good alt text accurately describes the image, providing context and meaning, whereas poor alt text is vague and unhelpful.

Specifying Image Dimensions (width and height)

The width and height attributes allow you to specify the dimensions of an image in pixels. While useful for controlling layout, it's generally recommended to control image sizing with CSS for more flexibility.

Example 4: Setting Image Dimensions

<img src="gallery/mountains.jpg" alt="Majestic mountains" width="500" height="300">

Explanation This code demonstrates how to set fixed dimensions for an image using width and height. While these attributes can control image size directly in HTML, using CSS for responsive image sizing is often a better practice for modern web design.

Common Image Formats (JPEG, PNG, GIF, SVG, WebP)

Different image formats are suited for different purposes. Choosing the right format can impact image quality, file size, and loading performance.

Example 5: Using Various Image Formats

<img src="photo.jpeg" alt="A detailed photograph">
<img src="logo.png" alt="Website logo with transparency">
<img src="animation.gif" alt="Loading spinner animation">
<img src="vector-icon.svg" alt="Scalable vector icon">
<img src="hero-image.webp" alt="Optimized hero image">

Explanation This example highlights the common image formats used on the web and their typical use cases. Understanding their strengths helps you optimize your website's performance and visual quality.