HTML Images – img Tag, alt Text, Responsive Images, srcset

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" -->

Image File Formats

Format	Best for	Pros
JPEG / JPG	Photos, complex images	Small file size, universal support
PNG	Logos, icons, screenshots	Lossless, supports transparency
WebP	Photos and graphics	30–50% smaller than JPEG/PNG, transparency support
SVG	Icons, logos, charts	Vector — scales to any size, tiny file, CSS-styleable
GIF	Simple animations	Widely supported, but limited to 256 colours
AVIF	Photos	Excellent 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">

📋 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.