Advertisement
🌐 Beginner

HTML Images – The img Tag

Images are essential to almost every web page. The <img> tag embeds images into HTML, but using it well requires understanding alt text for accessibility, proper sizing, responsive techniques, lazy loading for performance, and choosing the right file format.

⏱️ 15 min read🎯 Beginner📅 Updated 2026

Basic img Tag

HTML
<!-- Local file -->
<img src="photo.jpg" alt="A scenic mountain view">

<!-- External URL -->
<img src="https://picsum.photos/400/300" alt="Random placeholder image">

<!-- With explicit dimensions (prevents layout shift) -->
<img src="avatar.jpg" alt="User avatar" width="80" height="80">

<!-- img is a VOID element — no closing tag -->

The alt Attribute

The alt attribute is not optional. It is read by screen readers for visually impaired users, displayed when the image fails to load, and used by search engines for image indexing.

HTML
<!-- ✅ Descriptive alt — describes what the image shows -->
<img src="dog.jpg" alt="A golden retriever running on a beach">

<!-- ✅ Empty alt — for purely decorative images -->
<!-- Screen readers skip elements with empty alt -->
<img src="divider.png" alt="">

<!-- ❌ Bad alt — filename is not a description -->
<img src="IMG_1234.jpg" alt="IMG_1234">

<!-- ❌ Bad alt — redundant words -->
<img src="cat.jpg" alt="image of a cat">
<!-- Just write: alt="A tabby cat sitting on a windowsill" -->
Advertisement

Image File Formats

FormatBest forPros
JPEG / JPGPhotos, complex imagesSmall file size, universal support
PNGLogos, icons, screenshotsLossless, supports transparency
WebPPhotos and graphics30–50% smaller than JPEG/PNG, transparency support
SVGIcons, logos, chartsVector — scales to any size, tiny file, CSS-styleable
GIFSimple animationsWidely supported, but limited to 256 colours
AVIFPhotosExcellent compression, newer format

Responsive Images

HTML
<!-- Make image fill its container, never overflow -->
<img src="hero.jpg" alt="Hero banner"
     style="max-width: 100%; height: auto;">

<!-- srcset: serve different sizes to different screens -->
<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="A landscape photo"
>

<!-- picture: serve different formats (WebP with JPEG fallback) -->
<picture>
  <source srcset="photo.webp" type="image/webp">
  <source srcset="photo.jpg" type="image/jpeg">
  <img src="photo.jpg" alt="A landscape photo">
</picture>

Performance: lazy Loading

HTML
<!-- loading="lazy" — browser only loads image when near viewport -->
<!-- Great for long pages with many images -->
<img src="below-fold.jpg" alt="Content below the fold"
     width="600" height="400" loading="lazy">

<!-- loading="eager" (default) — loads immediately -->
<!-- Use for above-the-fold hero images -->
<img src="hero.jpg" alt="Hero" width="1200" height="600" loading="eager">

Images Done Right: alt, Dimensions, and Layout Shift

An <img> needs more than a src. Two attributes are non-negotiable for quality: alt (accessibility + SEO) and width/height (prevents the page from jumping as images load).

<img src="chart.png"
     alt="Sales rose 20% in Q3"    <!-- describes MEANING, not "image of..." -->
     width="600" height="400"      <!-- reserves space → no layout shift -->
     loading="lazy">              <!-- defer offscreen images -->
AttributeWhy it matters
altscreen readers + shown if image fails + SEO
width/heightbrowser reserves the box before load
loading="lazy"don't fetch until near viewport

Cumulative Layout Shift (CLS): if you omit dimensions, the browser doesn't know how tall the image is, so text below it jumps down when the image finally loads — annoying, and it hurts your Core Web Vitals score. Always set width/height (or a CSS aspect-ratio).

alt text rule: describe the information the image conveys, not the fact that it's an image. Decorative images that add nothing get alt="" (empty) so screen readers skip them. Use modern formats (WebP/AVIF) for much smaller files at the same quality.

🏋️ Practical Exercise

  1. Add an image to a page using the <img> tag with a valid src.
  2. Give the image meaningful alt text.
  3. Set the image’s width and height attributes.
  4. Break the src path on purpose and watch the alt text appear.
  5. Add a second image using a full (absolute) URL.

🔥 Challenge Exercise

Create a simple photo gallery with three images. Give each a descriptive alt attribute (not "image1"). Set explicit width and height to prevent layout shift. Then add one decorative image with alt="" and explain in a comment why decorative images should have empty alt text.

📋 Summary

  • <img src="path" alt="description"> — void element, no closing tag.
  • alt is required — describe the image content. Use alt="" for decorative images.
  • Always set width and height to prevent layout shift while loading.
  • Use max-width: 100%; height: auto CSS for responsive images.
  • srcset + sizes serve appropriate resolution per device.
  • <picture> serves WebP to modern browsers with JPEG fallback.
  • loading="lazy" defers off-screen images for faster page loads.

Interview Questions

  • Why is the alt attribute important on images?
  • What is the difference between an absolute and a relative image path?
  • Is <img> a void element? Does it need a closing tag?
  • Why should you set width and height on images?
  • When should alt be left empty (alt="")?
🌐 Links 🌐 Figure & Figcaption 🌐 Accessibility

FAQ

Which image formats work in HTML? +

Common web formats are JPEG (photos), PNG (transparency), WebP (modern and smaller), SVG (vector logos/icons), and GIF (simple animation). The browser loads whatever the src points to.

Does alt text help SEO? +

Yes. Search engines cannot "see" pixels, so descriptive alt text helps them understand and index the image, and it is essential for screen-reader users.

Advertisement