Images - INCS

Images make pages come alive. The <img> tag is self-closing — it has no content between tags — and relies entirely on its attributes to work correctly.

Concept 1 — The img tag

Unlike most HTML elements, <img> has no closing tag. All the information it needs is provided through attributes. The two you must always include are src and alt.

<img src="photo.jpg" alt="A golden retriever sitting in the park">

src (source) — the path to the image file.
alt (alternative text) — a text description of the image.

Rule: never omit alt. It’s read aloud by screen readers, shown when the image fails to load, and indexed by search engines. If the image is purely decorative, use an empty alt="" — but always include the attribute.

Concept 2 — Relative vs absolute image paths

Just like links, image src values can be relative (your own files) or absolute (images hosted elsewhere).

<!-- Relative: image is in the same folder as index.html -->
<img src="photo.jpg" alt="My photo">

<!-- Relative: image is inside an 'images' subfolder -->
<img src="images/photo.jpg" alt="My photo">

<!-- Absolute: image hosted on another server -->
<img src="https://example.com/images/photo.jpg" alt="My photo">

Best practice: keep your own images in a dedicated folder (commonly named images/ or assets/) rather than loose in the root directory. It keeps your project tidy as it grows.

Concept 3 — Setting width and height

You can control image dimensions with width and height attributes. Values are in pixels and don’t need a unit suffix.

<img src="photo.jpg" alt="My photo" width="400" height="300">

Always specify both attributes even if you only care about one. When the browser knows the dimensions upfront, it reserves the right amount of space before the image loads — preventing the page from jumping around as images appear.

Note: these attributes set the rendered size, not the file size. Loading a 3000px image and shrinking it to 400px with HTML still forces the user to download the full large file. Resize images to roughly the size you need before uploading them.

Concept 4 — Common image formats

Choosing the right format affects file size, quality, and browser support.

Format	Extension	Best for
JPEG	`.jpg` / `.jpeg`	Photos and complex images
PNG	`.png`	Graphics, logos, images needing transparency
SVG	`.svg`	Icons and illustrations (scales to any size)
WebP	`.webp`	Modern replacement for JPEG and PNG — smaller files
GIF	`.gif`	Simple animations

When in doubt, use JPEG for photos and PNG for anything with transparency.

Concept 5 — Wrapping images in a figure

For images that need a caption, use the <figure> and <figcaption> tags. This is more meaningful than a plain <p> below the image — it tells the browser the caption belongs to that specific image.

<figure>
  <img src="paris.jpg" alt="The Eiffel Tower at dusk" width="600" height="400">
  <figcaption>The Eiffel Tower, Paris — photographed at dusk.</figcaption>
</figure>

Try it yourself

Add this to your index.html. If you don’t have an image handy, use a placeholder service:

<body>
  <h1>My images page</h1>

  <h2>A simple image</h2>
  <img src="https://picsum.photos/400/300" alt="A random placeholder photo" width="400" height="300">

  <h2>An image with a caption</h2>
  <figure>
    <img src="https://picsum.photos/seed/html/600/400" alt="Another placeholder" width="600" height="400">
    <figcaption>This caption is linked to the image with a figure tag.</figcaption>
  </figure>
</body>

Quick reference

Attribute	Purpose
`src="..."`	Path to the image file (required)
`alt="..."`	Text description of the image (required)
`width="N"`	Rendered width in pixels
`height="N"`	Rendered height in pixels
`<figure>`	Groups an image with its caption
`<figcaption>`	Caption text for a figure