HTML Course 6.1 The img tag: src, alt, title and dimensions

6.1 The img tag: src, alt, title and dimensions

The <img> element is used to embed images in an HTML page. It is a void element (self-closing) and it relies on several key attributes to specify the image source, provide alternative text, add a tooltip, and control its displayed size. Proper use of these attributes improves accessibility, performance, and layout consistency.

1. The src attribute

The src attribute defines the URL of the image to display. It can be:

• Absolute URL (https://example.com/image.jpg)
• Relative URL (images/photo.png)
• Data URI (data:image/png;base64,...)

If the resource cannot be found or loaded, the browser shows a broken image icon or the alt text.

Example of src usage

<!-- Embedding an image from a relative path -->
<img src='assets/picture.jpg' alt='A scenic landscape'>

<!-- Embedding an image via an absolute URL -->
<img src='https://example.com/logo.png' alt='Company Logo'>

<!-- Embedding an inline image with Data URI -->
<img src='data:image/gif;base64,R0lGODlhAQABAIAAAAUEBA==' alt='Blank' title='Spacer GIF'>

2. The alt attribute

The alt attribute provides alternative text for screen readers and when the image fails to load. It is critical for accessibility and SEO:

• If the image conveys meaningful content, describe it succinctly.
• If the image is purely decorative, use an empty alt (alt='') so screen readers skip it.
• Avoid redundant phrases like “image of” or “picture of.”

Examples of alt values

<!-- Meaningful image with descriptive alt -->
<img src='team.jpg' alt='Project team standing in front of office building'>

<!-- Decorative image, empty alt -->
<img src='divider.png' alt=''>

<!-- Complex diagram: include essential text in alt -->
<img src='flowchart.svg' alt='Flowchart showing user registration steps: form → email confirmation → account activation'>

3. The title attribute

The title attribute provides advisory information, typically shown as a tooltip on hover. It is optional and should not replace the alt attribute:

• alt = required for accessibility and fallback.
• title = optional, supplemental info for sighted users.

Example of title usage

<!-- alt for accessibility, title for hover tooltip -->
<img
  src='mountain.jpg'
  alt='Sunset over mountain range'
  title='Captured during summer 2023 hike at sunrise'
/>

4. Dimensions: width and height

You can control the rendered size of the image using the width and height attributes (in pixels). Specifying both attributes reserves layout space before the image loads, preventing content shift:

• width and height in pixels or percentages.
• If only one dimension is set, the other scales proportionally (preserves aspect ratio).
• Modern responsive design often uses CSS (max-width:100%;), but HTML attributes remain useful for initial layout.

Examples of dimension attributes

<!-- Both dimensions set (200×150 px) -->
<img
  src='thumbnail.jpg'
  alt='Product thumbnail'
  width='200'
  height='150'
/>

<!-- Only width set: height auto-adjusts -->
<img
  src='banner.jpg'
  alt='Website banner'
  width='800'
/>

<!-- Percentage dimensions (works in HTML5 but may require CSS support) -->
<img
  src='diagram.png'
  alt='Process diagram'
  width='50%'
  height='auto'
/>

Attribute summary

By mastering these attributes, you ensure images load correctly, remain accessible, and fit your layout gracefully.