Subjects and lessons to explore.

Law

Web Development · Foundations

Images

9 min read 5 practice questions
9 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

Use HTML's img element to embed an image resource. Its src attribute identifies the resource, while alt gives a chosen for the image's job in that page. A meaningful photo usually needs a concise description; an image that is only decoration uses alt="". Add truthful width and height values when known so the browser can reserve the image's shape before it finishes loading.

Why this matters

Images can communicate a product, diagram, result, or action quickly, but a visual alone is not equally usable by every visitor or in every loading condition. Deliberate image markup makes a page more understandable when the resource fails, when a person uses a screen reader or Braille display, and when the page is still loading. It also develops a key web-authoring habit: choose markup from what content means and does, rather than from how it happens to look. CSS layout, responsive-image strategies, and media rights build on this foundation later.

The college version

The image element and its resource

The HTML img element represents an image in a document. It is a replaced, void element: it does not wrap child HTML or have a separate closing tag. An author normally supplies src, whose value is the address of the image resource. For example, <img src="campus-map.png" alt="Map of the north entrance"> asks the browser to obtain the resource named by campus-map.png and supplies text that can stand in for the image. src is not a description; it is resource-location data. Conversely, alt is not the filename or an optional caption field. It is replacement text for the image when the image is not available and a text equivalent in contexts that expose that alternative. Keeping those jobs separate prevents a common error: putting campus-map.png in alt tells a visitor almost nothing about the information in the image. This lesson focuses on the ordinary img element. Selecting different image files for different screens and controlling the image's visual layout are separate topics.

Alternative text is about purpose, not decoration in words

An alternative must communicate what the image contributes in its particular context. The same image file can need different alternatives in different uses. A portrait beside a news story might be meaningfully identified as the person pictured; the identical file used only as a background flourish beside a headline contributes no new information. For an , write a short description that conveys the essential information. For an image that contains important text, the alternative should provide the words. For a complex chart or diagram, a short alt may identify its subject, while nearby text or a linked description provides the detailed data or explanation. Do not start every alternative with “image of” or “picture of” when that fact adds no useful information. More importantly, do not mechanically describe pixels. The author decides what a visitor needs to know from the image's usage, context, and content. Good alternatives are therefore authored content, not something a browser can reliably invent from a filename.

Informative, decorative, and functional uses

An image is informative when it carries content that a reader needs, such as an explanatory photograph, a diagram, or a chart. It needs an alternative that conveys that contribution. An image is decorative when it adds visual styling but conveys no information and has no function. In that limited case, use a : alt="". The empty value is intentional. It indicates that there is no information for assistive technology to announce from this particular image; omitting alt does not make the same clear decision. A is part of an interaction, such as a printer icon inside a button or a logo that is the only content of a home-page link. Its alternative should name the action or destination, such as alt="Print this page" or alt="EliExplains home", rather than merely saying “printer icon” or “blue logo.” If an image is adjacent to text that already supplies the same information, assess the combined pattern. Repeating the alternative can be noise; a null alternative may be appropriate only when the image is genuinely redundant in that context.

Dimensions describe space; they do not create a design

The width and height attributes state the image's horizontal and vertical dimensions in CSS pixels. When both are provided, the browser can use their ratio to reserve the image's expected area before the image data arrives. That reduces a frustrating kind of layout shift in which text and controls move when an image finally loads. For an image whose intrinsic size is 1200 by 800 pixels, width="1200" height="800" communicates a 3:2 ratio. A stylesheet can still display that image at a smaller responsive size; the attributes provide dimension information, while CSS handles presentation rules. The values must describe the actual intended ratio. Deliberately mismatched values can distort the image if CSS does not correct them, and arbitrary numbers do not improve accessibility. Dimensions also do not replace alt: reserving space helps visual stability, whereas an alternative addresses what the image means or does.

A compact authoring check

Before adding an image, identify its role. Ask: what information or function would disappear if the image did not load? Write the alternative for that loss. If the honest answer is “nothing,” use alt="" for a purely . Next, use a real src that points to the intended resource and provide width and height when the image's dimensions are known. Finally, read the surrounding sentence, link, or button as a visitor would. An alternative should add the missing meaning, not repeat visible text pointlessly. Consider <a href="/print"><img src="printer.svg" alt="Print this page"></a>. The image's role is to activate printing, so the action—not its SVG format, color, or icon shape—is the useful alternative. That reasoning works better than a memorized list of generic alt-text formulas.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

An image tag is like a card that gives a browser two kinds of instructions: where to find a picture and what the picture means here. src is the address for finding the picture. alt is the useful message to keep when someone cannot see it or it has not appeared. If a picture explains a map, its message should mention the map. If it is just a decorative flourish, it has no message to add, so alt="" says to skip it. A picture used as a button should say what pressing it does.

Picture it like this

Think of a museum label beside an object. The object is the image resource, and src is the museum's storage location. The label is the alternative: it tells visitors the important thing about the object in this exhibit. A plain wall pattern does not need a label, but an emergency-exit sign does.

Where the picture stops working

A web alternative is not always a visible museum label, and it may be announced through software rather than printed next to an image. Also, the browser fetches the resource using src; the attribute itself does not store a physical picture or decide a page's visual layout.

Worked example

A course page links to a printable worksheet using only a printer icon. The author begins with <a href="worksheet.pdf"><img src="printer.svg" alt="Print the worksheet" width="48" height="48"></a>. src identifies the icon file. The image is functional because activating it opens the printable worksheet, so alt="Print the worksheet" names the action rather than saying “printer icon.” The 48-by-48 dimensions have a 1:1 ratio, allowing the browser to reserve a square before the SVG finishes loading. Changing the alt to "" would hide the link's only label from people who use the alternative; changing it to "blue printer" would describe appearance but omit the page action.

Key takeaway

Image markup is not just a URL and a picture. Use src to identify the resource, write alt for what the image contributes in context, and provide accurate dimensions to help the browser reserve its space.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

Which attribute identifies the image resource an img element should fetch?

Choose an answer, then check it.
Question 2 of 3intermediate

A leaf illustration appears beside a heading purely for visual styling and repeats no information. What is the best alt value?

Choose an answer, then check it.
Question 3 of 3intermediate

A linked logo is the only content of a link to an organization's home page. Which alternative best serves the link?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define the distinct roles of img, src, and alt.
  • Write an img element with an alternative suited to the image's purpose.
  • Distinguish an informative image from a decorative image.
  • Explain why a functional image needs a function-focused alternative.
  • Apply width and height attributes without treating them as a substitute for CSS layout.

Common mistakes

  • Using a filename such as IMG_1042.jpg as alt text.

    Describe the image's needed information or function in this context; filenames rarely do that.

  • Leaving alt out to mark an image decorative.

    Use the deliberate null value alt="" only when the image truly adds no information or function.

  • Writing “search icon” for an image button that opens search.

    Name what the control does, such as “Search,” rather than only its visual shape.

  • Treating width and height as the entire responsive-design solution.

    Use them to communicate truthful dimensions and reserve the aspect ratio; CSS and responsive-image tools manage display choices.

Easily confused

src vs. alt

Src identifies the image resource; alt supplies its replacement text.

informative image vs. decorative image

An informative image needs a meaningful alternative; a purely decorative image uses a null alternative.

functional image vs. informative image

A functional image alternative names the action or destination, while an informative image alternative conveys content.

Key vocabulary

img element
The HTML void element that represents an image resource in a document.
src
An img attribute whose value identifies the image resource to fetch.
alt
An img attribute that supplies replacement text selected for the image's purpose and context.
text alternative
Text that communicates the information or function a non-text item contributes.
informative image
An image that conveys content a visitor needs to understand or use the page.
decorative image
An image used only for visual decoration and not for information or function.
null alternative
An intentionally empty alt value, written alt="", for an image that contributes no information.
functional image
An image that activates or represents an interaction, such as a link or button.
aspect ratio
The proportional relationship between an image's width and height.

Sources & references

  1. HTML Living Standard — The img element — WHATWG
  2. MDN Web Docs — <img>: The Image Embed element — Mozilla / MDN Web Docs
  3. An alt Decision Tree (Images Tutorial) — W3C Web Accessibility Initiative (WAI)

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.