Images (Overview)

By the end of this lesson, you will understand how to embed images using the <img> tag and identify key techniques for making them accessible and responsive.

What it is

The <img> element is an inline-level replacement element used to embed raster or vector graphics into a document. Unlike other HTML elements, it does not have closing tags or child content. Its primary function is to fetch an image resource specified by the src attribute and render it within the layout flow.

Think of <img> as a placeholder that reserves space on the screen while the browser downloads the actual file. If the download fails, the browser displays the text in the alt attribute instead. This behavior makes accessibility attributes critical, not optional.

Why it matters

• Accessibility: Screen readers rely on the alt attribute to describe visual content to users with visual impairments.
• Performance: Proper sizing and format selection reduce page load times and data usage.
• Responsiveness: Images must adapt to different screen sizes without causing layout shifts or excessive bandwidth consumption.
• SEO: Search engines index images based on filenames, alt text, and surrounding context.

Syntax or steps

The minimal valid syntax requires two attributes: src (the path to the image) and alt (alternative text). Even if an image is decorative, you must include alt="" to explicitly tell assistive technologies to ignore it.

<img src="path/to/image.jpg" alt="Description of image">

Example

Below is a standard, accessible image implementation. Note the use of semantic alt text and explicit dimensions to prevent layout shift.

<figure>
  <img 
    src="sunset.jpg" 
    alt="A vibrant orange sunset over the ocean horizon" 
    width="800" 
    height="600"
    loading="lazy"
  >
  <figcaption>Sunset at Cape Town</figcaption>
</figure>

Part-by-part explanation:

• <figure>: A semantic container for self-contained content like illustrations.
• src: The relative path to the image file.
• alt: Describes the image content for screen readers and fallback display.
• width and height: Define intrinsic aspect ratio to reserve space before the image loads.
• loading="lazy": Instructs the browser to defer loading until the image is near the viewport.
• <figcaption>: Provides a visible caption associated with the figure.

Common mistakes

• Missing or empty alt text: Using alt="" only for decorative images. For informative images, always provide descriptive text.
• Scaling large images via CSS: Loading a 4000px wide image and shrinking it to 300px wastes bandwidth. Serve appropriately sized files.
• Omitting dimensions: Not specifying width and height causes Cumulative Layout Shift (CLS), hurting user experience and SEO scores.
• Using images for text: Never put important text inside an image. It is inaccessible to screen readers and unsearchable.

When to use it

Use <img> for content images (photos, diagrams, icons conveying meaning). Use CSS background-image for purely decorative textures or patterns that do not convey information.

Practice

Guided Exercise: Create an HTML snippet for a profile picture. Assume the image is named profile.png, is 150x150 pixels, and shows a smiling person waving. Ensure it is accessible and prevents layout shift.

Challenge: Modify your solution to use lazy loading and wrap it in a <figure> with a caption "Author Profile".

Solution Hint: Check that your alt text describes the action and subject, not just the filename.

Quick check

Question: Why should you specify width and height attributes on an <img> tag even if you control size via CSS?

Answer: To define the aspect ratio so the browser can reserve the correct amount of space before the image loads, preventing layout shifts.

Summary

The <img> tag is fundamental for embedding visual content, but its power lies in proper configuration. Always prioritize accessibility with meaningful alt text and performance by defining dimensions and using appropriate loading strategies.