HTML — Images

Adding images

The <img> tag places an image on the page. It's an empty element — no closing tag, no text content:

<img src="cat.jpg" alt="An orange cat sleeping in a cardboard box">

What the browser displays

(A photo of the cat appears inline with the text flow, at its natural size.)

Anatomy:

<img  src="cat.jpg"  alt="An orange cat sleeping..." >
      └──┬──┘         └──────────┬─────────────┘
    where to          description for people
    find the file     who cannot see it

Two attributes are essential: src and alt.

src — where the image lives

Same path rules as links:

<img src="photo.jpg">              <!-- same folder -->
<img src="images/photo.jpg">       <!-- subfolder -->
<img src="../shared/photo.jpg">    <!-- parent folder -->
<img src="https://example.com/pic.jpg">   <!-- absolute URL -->

If the path is wrong you get the broken-image icon — check spelling and folder levels first whenever images vanish.

Tip: organize images into a folder (images/) from day one. Projects with 40 loose image files on the root become unmanageable fast.

alt — more important than beginners think

alt (alternative text) describes the image in words. It serves three audiences:

1. Screen readers — blind visitors "see" through your alt text
2. Broken images — if the file fails to load, alt text displays instead
3. Search engines — they can't look at pictures; alt text is how images rank

Writing good vs useless alt text:

<!-- Useless -->
<img src="img1.jpg" alt="image">
<img src="logo.png" alt="logo">

/* Good */
<img src="img1.jpg" alt="Two hikers on a mountain ridge at sunrise">
<img src="logo.png" alt="Acme Coffee Roasters">

/* Decorative images: EMPTY alt means 'skip me' */
<img src="divider-swirl.png" alt="">

Formula for good alt text: imagine describing the image to someone on the phone. Short, factual, purposeful.

Image formats — which one when

Format	Best for	Notes
JPG	Photos	Millions of colors, small files, no transparency
PNG	Logos, screenshots	Sharp edges + transparency
SVG	Icons, illustrations	Vector — infinitely sharp, tiny files
WebP	Everything modern	Smaller than JPG/PNG at equal quality
GIF	Simple animation	256 colors; avoid for stills

Quick decision guide:

Is it a drawing/icon/logo?  → SVG (or PNG)
Is it a photo?              → WebP (or JPG)
Does it need animation?     → GIF / WebP / video

File size matters: a page of 5 MB photos takes seconds to load on mobile data. Resize photos before uploading — don't ship a 6000×4000 camera original to display at 400px.

Sizing

<img src="cat.jpg" alt="Sleeping cat" width="400" height="300">

• Values are pixels by default
• Setting both prevents layout jumping while images load (the page reserves space)
• Only set them if they match the image's aspect ratio, or the picture distorts

<!-- Distorted: original is square, forced wide -->
<img src="cat.jpg" alt="Stretched cat" width="800" height="200">

To make images shrink gracefully on small screens, CSS is the right tool:

img {
    max-width: 100%;
    height: auto;
}

This one rule — images never exceed their container — is on nearly every professional site.

Figure and figcaption — images with captions

When an image belongs with a caption, use the semantic pair:

<figure>
    <img src="eiffel.jpg" alt="The Eiffel Tower against a clear blue sky"
         width="500">
    <figcaption>The Eiffel Tower, photographed April 2024</figcaption>
</figure>

What the browser displays

(The image appears with its caption directly beneath it, both grouped as one unit — slightly indented by default.)

Benefits over a bare <p> under an <img>:

• The pairing is semantic — machines know the caption belongs to that image
• Styling moves together as one unit
• Screen readers announce them together

Backgrounds vs <img>

Not every visual should be an <img> element:

Use <img> when...	Use CSS background when...
The image IS content	The image is decoration
It needs alt text	Meaning doesn't matter
Users may want to save it	It sits behind other content
Example: product photo	Example: hero-section wallpaper

Rule of thumb: would you describe this image in alt? Then it's content → <img>.

Common mistakes checklist

1. Missing or lazy alt (alt="image", alt="photo1")
2. Huge originals uploaded unresized
3. Spaces in file names — my photo.jpg becomes %20 messes in URLs; use hyphens
4. Wrong-case extensions — servers treat Photo.JPG and photo.jpg as different files
5. Distorted sizing from mismatched width/height ratios

Mini Practice

Build gallery.html:

1. Three images from any free-photo source, each with genuinely descriptive alt
2. Wrap each in <figure> with a real <figcaption>
3. Add width attributes so the page doesn't jump while loading
4. Break one src deliberately — observe the alt text appearing in place of the image
5. Add the max-width: 100% CSS rule and resize your browser window

Next: tables →