HTML Academy · Lesson

The img Element src alt width height

Embed images correctly with all required attributes.

The img Element src alt width height is a free HTML Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

The img Element

The <img> element embeds an image in the page:

<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->

The src Attribute

The src attribute specifies the image source:

<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">

<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">

<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">

<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">

The alt Attribute

The alt attribute provides alternative text for images:

Displayed when the image fails to load
Read aloud by screen readers
Indexed by search engines
Required for accessibility (WCAG)

Writing Good alt Text

How to write effective alt text:

<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">

<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->

<!-- Functional image (button/link): describe the action -->
<a href="/">
  <img src="logo.png" alt="Go to homepage">
</a>

Width and Height Attributes

Always specify width and height on images:

<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
     This prevents layout shift (CLS) — a Core Web Vital metric -->

Aspect Ratio and CSS

Setting width and height in HTML enables CSS to calculate aspect ratio:

<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">

<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
  width: 100%;
  height: auto;  /* auto preserves the aspect ratio -->
}
-->

Image Formats on the Web

Common image formats and when to use them:

JPEG/JPG — photos, complex images with many colors
PNG — images requiring transparency
WebP — modern format: smaller than JPEG/PNG, supports transparency
AVIF — next-gen: even better compression than WebP
SVG — icons and illustrations (vector, infinitely scalable)
GIF — simple animations (mostly replaced by video)

Loading Attribute

Control when images load with the loading attribute:

<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">

<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">

<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->

decoding Attribute

The decoding attribute controls image decoding behavior:

<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->

fetchpriority Attribute

The fetchpriority attribute hints at image loading priority:

<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">

<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
     loading="lazy" width="400" height="300">

Complete img Example

A fully accessible, performance-optimized image:

<img
  src="/images/team-photo.jpg"
  alt="The Coddy team gathered at a conference table in 2024"
  width="1200"
  height="800"
  loading="lazy"
  decoding="async"
>

Quick Check

Why should you always include width and height attributes on img elements?

Recap: img Element

Image embedding essentials:

src — image URL (relative or absolute)
alt — required description; empty for decorative images
width and height — always set to prevent layout shift
loading="lazy" for below-the-fold images
Choose the right format: WebP/AVIF for photos, SVG for icons

Frequently asked questions

Is the “The img Element src alt width height” lesson free?

Yes — the full text of “The img Element src alt width height” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “The img Element src alt width height”?

Embed images correctly with all required attributes. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “The img Element src alt width height” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy