HTML Images

📚 Lesson 9 of 25 • ⏱ 10 min read • Beginner

The <img> Tag

Images are added with the self-closing <img> tag. It has two required attributes: src and alt:

HTML

<img src="photo.jpg" alt="Description of the photo">

src — Where is the Image?

HTML

<!-- Image in same folder as HTML file -->
<img src="photo.jpg" alt="Photo">

<!-- Image in a subfolder -->
<img src="images/banner.jpg" alt="Banner">

<!-- Image from the internet (URL) -->
<img src="https://example.com/photo.jpg" alt="External photo">

alt — Always Include This

The alt attribute is critical for:

Accessibility — screen readers read it to visually impaired users
SEO — Google uses alt text to understand your images
Fallback — shown when the image fails to load

HTML

<!-- Good alt text: describes what is in the image -->
<img src="campus.jpg" alt="Anna University main campus building in Chennai">

<!-- For decorative images: empty alt (screen readers skip it) -->
<img src="divider.png" alt="">

<!-- BAD: vague alt text -->
<img src="campus.jpg" alt="image">  <!-- ❌ useless -->

Size — width and height

HTML

<!-- Set size in HTML (prevents layout shift) -->
<img src="photo.jpg" alt="Photo" width="400" height="300">

<!-- Responsive (scales with screen) — control size via CSS -->
<img src="photo.jpg" alt="Photo" style="max-width: 100%; height: auto;">

Lazy Loading

For images below the fold (not visible immediately), add loading="lazy" — the browser loads them only when the user scrolls to them. This speeds up your page:

HTML

<img src="photo.jpg" alt="Photo" loading="lazy">

Image Formats — Which to Use?

Reference

JPG/JPEG  — Photos. Smaller file size, slight quality loss. Best for photos.
PNG       — Graphics with transparency. Sharper edges. Larger files.
WebP      — Modern format. Smaller than JPG+PNG. Use this when possible!
SVG       — Icons and logos. Scales perfectly to any size. Vector-based.
GIF       — Animations only. Very limited colors. Use video instead where possible.

Image Inside a Link

HTML

<a href="/courses/html/">
  <img src="html-logo.png" alt="Start HTML Course">
</a>

← Links Next: Lists →