IMAGES10 min20 XP

Images & Media

Learn Images & Media with syntax-highlighted examples, live output, and Shiv AI.

Images in HTML

The <img> tag embeds images. It is self-closing — no closing tag needed. Before 1993 the web had no images at all. Marc Andreessen added img and the internet changed forever.

Basic Image

The minimum you need is src and alt:

Example — Basic Image

<img
  src="photo.jpg"
  alt="A beautiful mountain landscape"
/>

The browser loads from src and shows alt text if image fails to load.

Fully Optimized Image

Example — Professional Image

<img
  src="hero.webp"
  alt="Students learning HTML at CIWeb"
  width="800"
  height="400"
  loading="lazy"
  decoding="async"
/>

Always set width, height, loading=lazy together. This prevents layout shift and passes Google Core Web Vitals.

Image with Caption

Wrap in <figure> to add a caption:

Example — Figure and Caption

<figure>
  <img src="chart.png"
       alt="Sales growth 2025"
       width="400" height="250"
       loading="lazy"/>
  <figcaption>Fig 1: CIWeb student growth in 2025</figcaption>
</figure>

Forest sample — Fig 1: CIWeb student growth in 2025

Attribute Reference

<img> AttributesBest Practice

srcSource URL or file path. Required. Where your image lives

altAlternative text. Required. Screen readers and Google Images use this

width heightDimensions in pixels. Prevents layout shift. Improves Core Web Vitals

loading="lazy"Defers loading until image nears viewport. Speeds up page load

decoding="async"Decodes image off the main thread. Better performance

SEO: Alt Text is Critical

Google cannot see images — it reads alt text. Write descriptive alt like "A student coding HTML on a laptop" not just "image". This helps you rank in Google Images and contributes to page relevance.

Decorative Images

Purely decorative images should have empty alt="" so screen readers skip them. Never omit alt entirely — screen readers would read the filename to blind users.

Images Changed the Web

Marc Andreessen added the img tag in 1993 against objections from web purists. Today images represent 60% of all web data transferred worldwide every single day.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using only real-life analogies. No code at all.

Click the Explain tab to generate analogies automatically.

index.html

Live Preview

Start coding - Shiv AI monitors automatically

What does the alt attribute do for SEO?

ExplanationGoogle cannot see images so it reads alt text. Good alt text helps you rank in Google Images and contributes to page relevance.

Build Challenge

Optimized Image Page

Build a page with two images: one fully optimized with all attributes, one inside a figure with caption.

Requirements (6 to pass)

img tag

src attribute

alt with text

width and height

loading lazy

figure with caption

solution.html

Preview

Community Wall

Lesson 6

0/500

0/20 lines

Support CIWeb + Get +50 AI Messages

Just Rs.11 gives you 50 extra Shiv AI messages and keeps CIWeb free for everyone.