The Basic Image Tag

To display an image on a webpage, you use the <img> tag. Unlike most HTML tags, the img tag does not have an opening and closing pair — it stands alone as a single line. The tag tells the browser where to find the image file and how to display it.

The simplest img tag looks like this: <img src="photo.jpg" alt="A description of the image">. The src attribute points to the image file. The alt attribute holds text that describes what the image shows — this text appears if the image fails to load, and it helps people using screen readers understand the image.

Both src and alt are required. Without src, the browser has nowhere to look. Without alt, you are leaving out information that some visitors need, and search engines cannot understand what the image contains.

Key Takeaways

  • The img tag is self-closing and requires both a src attribute (the file path) and an alt attribute (a text description).
  • Image file paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http).
  • The alt text should describe what the image shows in plain language, not just say "image" or "photo".
  • You can control image size with width and height attributes, but keeping the original proportions prevents stretching.
  • Common image formats for the web are JPG (photographs), PNG (graphics with transparency), and WebP (newer, smaller files).

Understanding File Paths

The src attribute needs to know where your image file lives. There are two ways to tell it: a relative path or an absolute path.

A relative path describes the image location relative to the HTML file you are writing. If your image is in the same folder as your HTML file, you write just the filename: <img src="sunset.jpg" alt="Sun setting over water">. If the image is in a subfolder called images, you write <img src="images/sunset.jpg" alt="Sun setting over water">. If you need to go up one folder level, use two dots: <img src="../sunset.jpg" alt="Sun setting over water">.

An absolute path is the full web address of the image, starting with http or https. You use this when the image lives on a different website: <img src="https://example.com/photos/sunset.jpg" alt="Sun setting over water">. Relative paths are simpler when you are building a site on your own computer. Absolute paths are necessary when you want to display someone else's image from the internet.

Writing Effective Alt Text

The alt attribute is not decoration — it serves two real purposes. First, if the image fails to load (broken link, slow connection, missing file), the alt text appears in its place so visitors still understand what was supposed to be there. Second, people using screen readers hear the alt text read aloud, so they know what the image contains.

Write alt text as if you were describing the image to someone who cannot see it. For a photo of a golden retriever playing in snow, write alt="Golden retriever running through deep snow", not alt="dog" or alt="image". For a chart showing sales by quarter, describe what the chart shows: alt="Bar chart showing sales increased 15 percent in Q2 and 8 percent in Q3".

Keep alt text concise — usually one sentence is enough. If the image is purely decorative (a colored line, a background pattern), you can leave alt empty: <img src="divider.png" alt="">. This tells screen readers to skip it, which is correct because there is nothing meaningful to read.

Controlling Image Size

By default, an image displays at its original size. You can change that with the width and height attributes. You can set one or both: <img src="photo.jpg" alt="Mountain landscape" width="400"> tells the browser to make the image 400 pixels wide and shrink the height proportionally so the image does not stretch. Setting both width and height to different proportions will distort the image, so avoid that unless you have a specific reason.

You can also use percentages instead of pixels: <img src="photo.jpg" alt="Mountain landscape" width="100%"> makes the image as wide as its container. This is useful on mobile devices where screen width varies.

If you do not set width or height, the browser uses the image's original dimensions. This is usually fine, but it means a very large original file will take up a lot of space on the page. For faster loading, resize your image file before uploading it — use an image editor or an online tool to make it the size you actually need on the webpage.

Choosing the Right Image Format

Different image formats work better for different purposes. JPG is best for photographs and complex images with many colors — it compresses well and keeps file size small. PNG is best for graphics, logos, and images that need a transparent background (where you can see through parts of the image). WebP is a newer format that produces smaller files than JPG or PNG, but older browsers do not support it yet.

The format you choose affects how fast your page loads. A large uncompressed image can slow down the page for visitors on slow connections. Before you add an image to your HTML, open it in an image editor or online tool and resize it to the width you actually need on the page. A 4000-pixel-wide photo that displays at 400 pixels wide wastes bandwidth.

If you are unsure which format to use, start with JPG for photographs and PNG for everything else. Both work on all browsers and produce reasonable file sizes.

Common Mistakes and How to Avoid Them

The most common mistake is a broken src path. If you type <img src="photo.jpg"> but the file is actually in an images folder, the browser will not find it and the image will not appear. Check that the path matches your actual folder structure. If you are using relative paths, remember that the path is relative to the HTML file, not to your computer's main drive.

Another common mistake is forgetting the alt attribute entirely. This breaks accessibility — people using screen readers will not know the image exists. Always include alt, even if it is empty for decorative images.

A third mistake is setting both width and height to values that do not match the image's original proportions. If your image is 800 pixels wide and 600 pixels tall (a 4:3 ratio), and you set width="400" and height="400", the image will look squashed or stretched. Set only one dimension and let the browser calculate the other, or use CSS to handle sizing more precisely.

Frequently Asked Questions

What happens if the image file is deleted or moved?

The browser will not be able to find it, and the image will not display. Instead, you will see a broken image icon (usually a small picture frame with an X). The alt text will appear in its place. To fix this, check that the src path is correct and that the image file actually exists at that location.

Can I use an image from another website?

Technically yes — you can use the full web address as the src. However, this is often against the website's terms of service, and the image owner can delete or move the file at any time, breaking your page. It is better to read the image and host it on your own server, or use images that are explicitly shared for reuse under a Creative Commons or similar license.

How do I make an image clickable?

Wrap the img tag inside an anchor tag: <a href="page.html"><img src="photo.jpg" alt="Description"></a>. When someone clicks the image, they will go to the page specified in the href attribute.

What is the difference between width and height attributes versus CSS?

The width and height attributes in the HTML tag set a fixed size. CSS (Cascading Style Sheets) gives you more control — you can make images responsive (resize based on screen width), add borders, explore effects, and more. For straightforward sizing, HTML attributes are fine. For complex layouts, CSS is the better choice.

Why does my image look blurry?

This usually happens when you set the width or height to a size larger than the image's original dimensions. The browser is stretching a small image to fill a large space. Use an image editor to resize the original file to the size you need, or reduce the width and height attributes in your HTML.