IMAGES10 min20 XP

Images & Media

Learn Images & Media with live examples, interactive editor, and Shiv AI code review.

Images in HTML

The <img> tag embeds images into a webpage. It is a self-closing tag — it has no content and no closing tag. Images are one of the most important elements for making pages visually engaging.

The img Tag and Its Attributes

Example 1 — Complete img Tag

<!-- Every img needs these 4 attributes -->
<img
  src="ciweb-logo.png"
  alt="CIWeb Logo"
  width="200"
  height="80"
  loading="lazy"
/>

<!-- src can also be a full URL -->
<img
  src="https://ciweb.in/images/hero.webp"
  alt="Students learning HTML at CIWeb"
  width="800"
  height="400"
  loading="lazy"
/>

CIWeb

Image displayed at 200x80 pixels. The alt text is read by screen readers and shown if image fails to load.

src = source path. alt = description. width+height = prevent layout shift. loading=lazy = faster page load.

The figure and figcaption Tags

Example 2 — Image with Caption

<figure>
  <img
    src="shiva-teaching.jpg"
    alt="Shiva Saini teaching HTML"
    width="600"
    height="400"
    loading="lazy"
  />
  <figcaption>Shiva Saini — Founder, Coding Infinite</figcaption>
</figure>

Image: shiva-teaching.jpg

Shiva Saini — Founder, Coding Infinite

<figure> groups image + caption semantically. <figcaption> is linked to the image for screen readers and Google.

Image Formats Guide

Which Format to Use

WebPBest choice. 30% smaller than JPEG. Supported by all modern browsers. Use for photos.

JPEG/JPGGood for photos with many colors. Lossy compression. Widely supported.

PNGSupports transparency. Good for logos, icons, screenshots. Larger file size.

SVGVector format. Scales perfectly to any size. Perfect for logos and icons.

GIFAnimated images. Limited to 256 colors. Use MP4 video instead for animations.

alt Text = SEO Power

Google cannot see images. It reads the alt attribute to understand what the image shows. A good alt text like "Students learning HTML at CIWeb in 2026" tells Google your page is about HTML education. Bad alt text like "image1.jpg" tells Google nothing.

Always Set width and height

Without width and height attributes, the browser does not know the image size until it downloads. This causes the page to jump as images load — called Cumulative Layout Shift (CLS). Google penalizes pages with high CLS in search rankings.

Why loading="lazy" Matters

By default, browsers download ALL images on a page even if they are far below the visible area. loading="lazy" tells the browser to only download an image when the user scrolls near it. This can cut initial page load time by 50% on image-heavy pages.

Prev Next Lesson

Coding Infinite Report Bug Certificate

CIWeb HTML Course • 22 Lessons • Free

Explain with Analogies

Shiv AI explains this lesson using real-life analogies. No code — just clear examples.

Click the Explain tab to generate analogies.

index.html

Live Preview

Write code then click Deep Analyze

What is the purpose of the alt attribute in an img tag?

ExplanationThe alt attribute provides a text description of the image. Screen readers read it for blind users. Search engines use it to understand image content. It also shows if the image fails to load.

Build Challenge

Image Gallery

Build a page with at least 2 images — one basic img with all attributes, and one inside a figure with figcaption.

Requirements (5 to pass)

img tag

alt attribute

width and height

loading lazy

figure

solution.html

Preview

Community Wall

Lesson 6

0/500

0/20 lines