Build: an efficiently loaded image

Configure a secondary image with dimensions, lazy loading and async decoding.

Official sourceWHATWG HTML — image loadingReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Configure a secondary image with dimensions, lazy loading and async decoding. Semantic structure should describe meaning, not visual appearance.

Correct example

<img src="project-gallery.jpg" alt="Project interface displayed on a phone" width="960" height="640" loading="lazy" decoding="async">

The src identifies the resource, alt conveys image information, and width and height declare its proportions before download. For a secondary image, loading="lazy" can defer loading and decoding="async" allows decoding without unnecessarily blocking display.

Common mistake

<img src="gallery.jpg" alt="Project gallery" width="0" height="abc" loading="eager">

Width cannot be zero, height is not numeric, loading uses eager rather than lazy and decoding="async" is missing.

STEP 2 · APPLY

Your exercise

Complete the example. Configure a secondary image with dimensions, lazy loading and async decoding.

index.htmlHTML

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The image has a non-empty source.
The informative image has alternative text.
Width is a positive number.
Height is a positive number.
The image uses lazy loading and async decoding.

Explain the solution logic

Add src and alt first. Then set width and height to numbers greater than zero and complete loading="lazy" and decoding="async".

How it works

Your exercise

Write and see the result

What needs to pass