HTML Images: The img Element, src, alt Text, Width and Height

Images are added with the <img> element. It is a void element (no closing tag) and needs two attributes: src, the image file, and alt, a text alternative.

A basic image#

<img src="/lesson-assets/landscape-300.svg" alt="Green hills under a blue sky with a yellow sun" width="300" height="200">

Alt text#

alt text is read aloud by screen readers, shown when an image fails to load, and used by search engines to understand images. It is required for meaningful images.

Watch what happens when the file cannot be found:

<img src="/lesson-assets/missing-photo.jpg" alt="Our team at the 2026 science fair">

The browser shows the alt text (with a broken-image icon in some browsers) instead of the picture.

Writing good alt text#

• Describe what the image shows or means in this context, briefly. One short sentence is usually enough.
• Do not start with "Image of" or "Picture of"; screen readers already announce that it is an image.
• If the image contains important text, such as a sign or a chart title, include that text.
• For a linked image, describe where the link goes.

<!-- Weak -->
<img src="chart.png" alt="chart">

<!-- Better -->
<img src="chart.png" alt="Bar chart: sales doubled from 2024 to 2026">

Decorative images#

If an image is purely decorative and adds no information, use an empty alt, alt="". Screen readers then skip it. Do not leave the attribute out: without any alt, many screen readers read the file name instead.

<img src="divider-flourish.png" alt="">

Width and height#

Always set width and height to the image's real size (or its aspect ratio). The browser can then reserve the right amount of space before the image downloads, so the text below does not jump down when the image appears. This jump is called layout shift and is one of the page-quality measures used by Google (Core Web Vitals).

With CSS you can still make the image scale, for example img { max-width: 100%; height: auto; }. The width and height attributes keep the aspect ratio correct while it does.

Lazy loading#

loading="lazy" tells the browser to wait until the image is close to the visible area before downloading it. This speeds up long pages:

<img src="gallery-12.jpg" alt="Sunset over the beach at Goa" width="800" height="600" loading="lazy">

Do not lazy-load the main image at the top of the page; it should load immediately.

Image formats#

Large images are the most common reason pages load slowly. Resize images to the size they are displayed at and compress them before uploading.

Common mistakes#

Practice#

<img src="/lesson-assets/mango.svg" alt="A ripe yellow mango with a green leaf" width="160" height="160" loading="lazy">
<p>The mango is the national fruit of India.</p>

Key takeaway#