Images and Alternative Text

Images are content and assets.

They also create accessibility, performance, and privacy decisions.

Meaningful images need text alternatives

<img
  src="{{ '/assets/images/line-follower.jpg' | relative_url }}"
  alt="Line-following robot using two front-mounted reflectance sensors on a black tape course">

Alternative text should communicate the useful information the image contributes.

Do not write:

image
photo
robot image picture

Decorative images are different

If an image is genuinely decorative and adds no content, use the appropriate empty-alt approach rather than forcing a screen reader to announce decorative noise.

File size is part of the system

A 9 MB hero image can make a static site feel slow even though the HTML build is instant.

Inspect:

• image dimensions;
• encoded file size;
• format;
• whether the displayed size justifies the source dimensions.

Privacy check

Before adding classroom/project photos, inspect the image itself for:

• student faces;
• ID badges;
• addresses;
• computer screens;
• account names;
• background paperwork;
• location metadata concerns where relevant.

Portfolio action

Add at least two meaningful project images with deliberate alternative text.

Record original and optimized file size for one image if optimization was needed.

Checkpoint

Explain why the same image has responsibilities at source, build/deployment, browser performance, and accessibility layers.