Image Attributes & Responsiveness

Common Image Attributes

HTML images can have multiple attributes that define their source, size, behavior, and accessibility. Here’s a detailed breakdown:

Attribute	Purpose	Example & Explanation
`src`	Specifies the image source (local file or URL).	`<img src="photo.jpg" alt="Photo">` – Loads an image named “photo.jpg”.
`alt`	Provides alternative text when the image cannot load; important for screen readers and SEO.	`<img alt="Company Logo">` – Describes the image for accessibility and search engines.
`width`/`height`	Sets the dimensions of the image in pixels or percentage.	`<img width="400" height="300">` – Displays the image at 400x300 pixels.
`title`	Shows tooltip text when hovering over the image.	`<img title="Beautiful Landscape">` – Tooltip appears on mouse hover.
`loading`	Controls image loading behavior. - `lazy`: loads when the image is visible - `eager`: loads immediately	`<img loading="lazy">` – Improves page performance by delaying offscreen images.
`crossorigin`	Handles cross-origin image requests (from another domain).	`<img crossorigin="anonymous">` – Fetches the image without sending user credentials.
`longdesc`	Provides a link to a detailed description of the image.	`<img longdesc="diagram-details.html">` – Useful for complex diagrams.
`referrerpolicy`	Controls what referrer information is sent when fetching the image.	`<img referrerpolicy="no-referrer">` – Hides the referring page URL.
`srcset`	Allows multiple image sources for responsive design.	`<img srcset="small.jpg 480w, large.jpg 1200w">` – Browser picks appropriate image based on screen width.
`sizes`	Defines display sizes for different devices.	`<img sizes="(max-width:600px) 480px, 800px">` – Chooses width based on screen size.
`usemap`	Connects an image to an image map.	`<img usemap="#map1">` – Makes parts of the image clickable via `<map>` and `<area>`.

Responsive Images (srcset, `<picture>`)

Sometimes different devices need different image sizes or formats for better performance. HTML provides:

a) `srcset` (already shown later in attributes)

It allows browsers to choose the right image depending on screen size.

b) `<picture>` element

Provides full control for responsive and modern images (like using WebP for supported browsers).

Example:

<picture>
  <source srcset="nature.webp" type="image/webp">
  <source srcset="nature.jpg" type="image/jpeg">
  <img src="nature.jpg" alt="Beautiful Nature Image" style="max-width:100%; height:auto;">
</picture>

Clickable Images (Image Links)

You can make an image clickable by wrapping it inside an <a> tag.

<a href="<https://www.example.com>">
  <img src="logo.png" alt="Company Logo" width="150">
</a>

Figure and Figcaption in HTML5

To add a caption under an image, use <figure> and <figcaption>.

<figure>
  <img src="sunset.jpg" alt="Beautiful Sunset">
  <figcaption>Beautiful Sunset View</figcaption>
</figure>

Complete HTML example focusing on Image Attributes & Responsiveness :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Image Attributes & Responsiveness</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 20px;
    }
    h2 {
      color: #2c3e50;
      margin-top: 30px;
    }
    img {
      margin: 10px 0;
      max-width: 100%;
      height: auto;
    }
    .clickable {
      border: 2px solid #3498db;
      padding: 5px;
      display: inline-block;
    }
  </style>
</head>
<body>

  <h1>Image Attributes & Responsiveness in HTML</h1>

  <!-- 1. Common Image Attributes -->
  <h2>1. Common Image Attributes</h2>
  <p>Images can have multiple attributes to control their source, size, and behavior:</p>

  <img src="images/logo.png" alt="Company Logo" width="150" height="150" title="Logo Image" loading="lazy" crossorigin="anonymous">

  <p>Explanation:</p>
  <ul>
    <li><strong>src:</strong> Image source path or URL.</li>
    <li><strong>alt:</strong> Alternative text for accessibility and SEO.</li>
    <li><strong>width/height:</strong> Define the size of the image.</li>
    <li><strong>title:</strong> Tooltip text on hover.</li>
    <li><strong>loading:</strong> Lazy loads images for better performance.</li>
    <li><strong>crossorigin:</strong> Handles cross-origin requests.</li>
  </ul>

  <!-- 2. Responsive Images using srcset -->
  <h2>2. Responsive Images using <code>srcset</code></h2>
  <p>The browser automatically selects the most appropriate image based on screen size:</p>

  <img src="images/small.jpg"
       srcset="images/medium.jpg 768w, images/large.jpg 1200w"
       sizes="(max-width:600px) 480px, 800px"
       alt="Responsive Image">

  <!-- 3. Responsive Images using <picture> -->
  <h2>3. Responsive Images using <code>&lt;picture&gt;</code></h2>
  <p>You can define different images for different screen widths or resolutions:</p>

  <picture>
    <source srcset="images/large.jpg" media="(min-width:800px)">
    <source srcset="images/small.jpg" media="(max-width:799px)">
    <img src="images/default.jpg" alt="Picture Element Example">
  </picture>

  <!-- 4. Clickable Images -->
  <h2>4. Clickable Images</h2>
  <p>Wrap an image inside an <code>&lt;a&gt;</code> tag to make it clickable:</p>

  <a href="https://example.com" class="clickable">
    <img src="images/logo.png" alt="Clickable Image" width="150">
  </a>

</body>
</html>

Common Image Attributes

Responsive Images (srcset, <picture>)

a) srcset (already shown later in attributes)

b) <picture> element

Clickable Images (Image Links)

Figure and Figcaption in HTML5

Responsive Images (srcset, `<picture>`)

a) `srcset` (already shown later in attributes)

b) `<picture>` element