The img Element: Putting Pictures on a Page

Concept

The img element places an image in the flow of a document. It is a void element - it has no content and no end tag - and it is replaced, meaning the browser swaps it for an external file rather than rendering anything of its own.

Syntax

<img src="path/to/file.jpg" alt="Description of the image" width="800" height="600">

Why width and height are not optional in practice

When the browser lays out the page, an image whose size it does not know occupies no space. Everything below moves up to fill the gap. The file then arrives, the browser discovers it is nine hundred pixels tall, and the entire page below jumps down.

The reader loses their place, or taps a button that has just moved. Google measures this directly as Cumulative Layout Shift, one of the Core Web Vitals, and it affects search ranking.

<!-- causes a jump when it loads -->
<img src="/images/hall.jpg" alt="An empty lecture hall">

<!-- space is reserved on the first layout pass -->
<img src="/images/hall.jpg" alt="An empty lecture hall" width="1600" height="900">

The numbers are the intrinsic size of the file, not the size you want on screen. Modern browsers use them purely to compute the aspect ratio, so CSS is still free to resize the image:

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

That pair keeps the image inside its container and preserves the ratio, and it is the single most useful rule in a responsive stylesheet.

Choosing a format

Prefer SVG for anything drawn rather than photographed. One file covers every screen density and it usually weighs less than a single PNG.

Example

<article>
  <h2>The old printing press</h2>

  <img src="/images/press.jpg"
       alt="A hand operated printing press with type still set in the bed"
       width="1200" height="800"
       loading="lazy"
       decoding="async">

  <p>The press was in daily use until 1974.</p>

  <!-- decorative: hidden from screen readers -->
  <img src="/images/divider.svg" alt="" width="600" height="12">
</article>

Explanation

The photograph carries a description, its intrinsic size, and instructions to load lazily and decode off the main thread. The divider is pure decoration, so its alt is deliberately empty - which is not the same as omitting it. An empty alt tells assistive technology to skip the image entirely; a missing alt makes it read the file name out loud.

When the image fails to load

Files go missing, connections drop, and some readers turn images off to save data. When the image cannot be shown, the browser displays the alt text in its place. This is why alt is described as a text alternative rather than a tooltip: it is what the page falls back to.

Important rules

• alt is required on every img. Decorative images get alt="".
• img is inline by default, which means it sits on a text baseline and leaves a few pixels of gap underneath. display: block or vertical-align: middle removes it.
• The title attribute is not an alternative to alt. It is unreliable on touch and keyboard.
• Hotlinking an image from another site is a bandwidth theft and can break without warning. Host your own copies.
• An image with a src that fails still occupies its reserved box if width and height were given.

Common mistakes

• Omitting width and height and shipping a page that visibly jumps as it loads.
• Uploading a four thousand pixel wide photograph straight from a camera and scaling it down in CSS. The reader still downloads all of it.
• Using a PNG for a photograph, producing a file five times larger than the JPEG equivalent.
• Leaving out alt entirely rather than writing alt="" for decoration.
• Putting text inside a raster image. It cannot be selected, searched, translated or read aloud, and it blurs when scaled.
• Setting only width in CSS without height: auto, which squashes the image.

Best practices

• Export images at roughly the size they will be displayed, at most twice that for high density screens.
• Always state width and height.
• Use SVG for logos, icons and diagrams.
• Add loading="lazy" to everything below the fold, and never to the main image at the top.
• Compress before uploading. A photograph at eighty percent JPEG quality is usually indistinguishable and half the size.
• Give files descriptive names. brass-lamp-workshop.jpg helps image search; IMG_20260218.jpg does not.

Practice

1. Load a page with three large images and no dimensions on a throttled connection. Record the layout shift in DevTools, add the attributes, and measure again.
2. Take one photograph and export it as JPEG, PNG and WebP at the same visual quality. Compare file sizes.
3. Place a logo as a PNG and as an SVG, then zoom the browser to three hundred percent and compare.
4. Explain the difference between a missing alt and alt="" to someone who has never used a screen reader.