Adding Images in HTML: src, alt, width and height

The HTML <img> element puts images on your page. Learn how to use src, write helpful alt text, set width and height to stop layout shift, and pick the right image format.

How to add an image in HTML

Images use the <img> element. It is a void element, so it has no closing tag. It needs two attributes:

• src (source): the path to the image file.
• alt (alternative text): a text description of the image.

<img src="images/lemon-tart.jpg" alt="A lemon tart topped with fresh raspberries">

If the file lemon-tart.jpg is inside an images folder next to your page, the browser shows the photo. If the file can't be found, the browser shows the alt text instead.

How to write good alt text

Alt text describes an image for people who can't see it. Screen readers read it aloud. It is also shown if the image fails to load, and search engines use it to understand your images. Writing good alt text is one of the easiest ways to make your website more accessible.

Good alt text describes what is important about the image in this context. Keep it short, usually one sentence.

Image	Bad alt text	Good alt text
Product photo	alt="image"	alt="Blue canvas trainers with white soles"
Team photo	alt="photo123.jpg"	alt="Our five bakers smiling in the kitchen"
Chart	alt="chart"	alt="Sales doubled from 2024 to 2026"
Logo in a link	alt="logo"	alt="Corner Café home page"

Tips for alt text:

• Don't start with "Image of" or "Picture of". Screen readers already say it is an image.
• If the image contains important words, include those words.
• If an image is only decoration, like a pretty swirl, use an empty alt: alt="". Screen readers then skip it.

Common mistake: Leaving out the alt attribute completely. Some screen readers then read the file name, like "IMG underscore 4 0 3 2 dot jpg". Always include alt, even if it is empty for decoration.

Why set width and height on images?

Images often load a little after the text. If the browser doesn't know the image size, it shows the text first, then pushes everything down when the image arrives. The page jumps. This is called layout shift, and it is annoying. You might click the wrong button because the page moved.

When you add width and height, the browser saves the right amount of space before the image loads.

<h1>Lemon Tart</h1>
<img src="images/lemon-tart.jpg" alt="A lemon tart topped with fresh raspberries" width="800" height="600">
<p>Our lemon tart has a crisp butter crust and a smooth, tangy filling.</p>

The image takes up its space straight away, so the paragraph below does not jump. Write the numbers in pixels without "px". Use the image's real size, or at least the same aspect ratio (the shape: how wide compared to how tall).

Tip: Later, CSS will make images shrink nicely on small phone screens. Keep the width and height attributes anyway. The browser uses them to work out the shape and reserve space.

Which image format should you use?

Format	Best for	Notes
JPG (JPEG)	Photos	Small files; no transparency
PNG	Screenshots, graphics with sharp edges, transparency	Larger files for photos
SVG	Logos, icons, simple drawings	Made of shapes, so it stays sharp at any size
WebP	Photos and graphics	Smaller than JPG and PNG; supported by all modern browsers
AVIF	Photos	Often the smallest files; supported by all modern browsers

For most websites in 2026, WebP or AVIF are great choices for photos, and SVG is best for logos and icons. Whatever you choose, keep files small. Big images make pages slow, especially on mobile.

How to make an image a link

To make an image clickable, put the <img> inside an <a> element. A common example is a logo that links to the home page.

<a href="index.html">
  <img src="images/logo.svg" alt="Corner Café home page" width="160" height="60">
</a>

Clicking the logo goes to index.html. Notice the alt text describes where the link goes, not what the logo looks like. When an image is the only thing inside a link, its alt text becomes the link text.

Practice exercise

Find a photo of your favourite food and put it in an images folder. Show it on a page with good alt text and the correct width and height. Then add a small logo image that links to your home page.

Hint: on Windows, right-click the image file and choose Properties, then Details, to find its width and height in pixels. On a Mac, use Get Info.

Key takeaways

• Use <img> with src for the file path and alt for a text description.
• Good alt text is short, specific and describes what matters; use alt="" for decoration.
• Set width and height to reserve space and prevent layout shift.
• Use WebP or AVIF for photos, SVG for logos and icons, and keep files small.
• Wrap an <img> in <a> to make a clickable image.