Before this lesson

Understand HTML attributes and links, and prepare an image you are allowed to use.

What you will be able to do

Resolve a relative path from the document location, reduce layout movement during image loading, and write alternative text for the image purpose.

Understand the mechanism

A relative path starts from the document URL directory, not whatever folder you think of as the project root. From /lessons/start.html, images/a.jpg resolves under /lessons/images/, whereas /images/a.jpg begins at the origin root. Local and server file systems may handle capitalization differently. Consistent names are more reliable than depending on case-insensitive behavior.

Alternative text describes the image purpose in its context. A portrait may need identification, while a purely decorative image can use an empty alt. Width and height give the browser an aspect ratio before downloading finishes, allowing it to reserve space. They do not prevent responsive CSS from scaling the displayed image.

Runnable example

<figure>
  <img src="images/workspace.jpg"
       alt="A desk with a laptop and notebook"
       width="640" height="420">
  <figcaption>My workspace</figcaption>
</figure>

Trace and verify

Create the referenced image, refresh with the Network panel open and inspect its URL and status. Deliberately misspell the filename and observe the failed request and fallback text, then restore it. Move the document into a lessons directory, predict the resulting URL and test ../images/workspace.jpg as the corrected path.

Common mistakes and boundaries

Do not use a local drive path in a deployed page. Avoid uninformative alternatives such as “image,” and do not paste an entire article into alt text. Lazy loading is appropriate for noncritical images below the initial view; do not indiscriminately defer important first-screen content.

Practice challenge

Place the page at pages/about.html and the image at assets/portrait.jpg. Write the relative path and choose alternatives for a decorative picture and an identifying portrait.

Reference solution and reasoning

Use ../assets/portrait.jpg: go up one directory and enter assets. A decorative image can use alt="". A portrait can identify Alex as the author without unnecessarily repeating adjacent text. Use dimensions matching the actual image ratio.

Further reading