How to Add an Image to a Webpage Using HTML

The basic HTML tag for images

To add an image to a webpage, you use the <img> tag. Unlike most HTML tags, the <img> tag does not have a closing tag — it is self-closing. The tag tells the browser where to find the image file and how to display it.

The simplest version looks like this:

<img src="image.jpg">

The src attribute tells the browser the location of your image file. The browser reads this path, finds the file, and displays it on the page. If the browser cannot find the file at that path, the image will not appear.

Key Takeaways

The <img> tag is self-closing and requires a src attribute that points to the image file location.
Always include an alt attribute with a text description of the image for accessibility and when images fail to load.
Image file paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http or https).
You can control image size with width and height attributes, measured in pixels or percentages.
The most common image formats for web are JPG, PNG, and WebP, each with different uses depending on image type and file size needs.

Writing the src attribute correctly

The src attribute value is a file path. There are two types: relative paths and absolute paths. A relative path points to a file inside your project folder structure. An absolute path is a complete web address.

If your HTML file and image file are in the same folder, the relative path is just the filename:

<img src="photo.jpg">

If the image is in a subfolder called images, the path includes the folder name:

<img src="images/photo.jpg">

If the image is hosted on another website, use the full web address:

<img src="https://example.com/images/photo.jpg">

Relative paths are safer for your own projects because they keep working even if you move your entire folder. Absolute paths to external images depend on that other website keeping the file in the same place.

Adding the alt attribute for accessibility

The alt attribute holds a text description of the image. This text appears if the image fails to load, and it is read aloud by screen readers that people with vision loss use to browse the web.

Write the alt text as a short, clear description of what the image shows:

<img src="photo.jpg" alt="A golden retriever sitting on a park bench">

The alt text should describe the image itself, not say "image of" or "picture of" — the browser already knows it is an image. If the image is purely decorative and adds nothing to the page content, you can leave the alt attribute empty:

<img src="decoration.jpg" alt="">

An empty alt attribute tells assistive technology to skip the image, which is the right choice for dividers, spacers, or background graphics that do not carry meaning.

Controlling image width and height

By default, images display at their full size. You can make them smaller or larger using the width and height attributes, both measured in pixels:

<img src="photo.jpg" alt="A golden retriever" width="400" height="300">

If you set only the width, the browser automatically scales the height to keep the image from looking stretched or squashed. Setting both width and height can distort the image if the numbers do not match the original proportions.

You can also use percentages to make the image scale with the page size:

<img src="photo.jpg" alt="A golden retriever" width="100%">

A width of 100% makes the image as wide as its container. This is useful for responsive design, where the page layout changes on smaller screens like phones.

Choosing the right image file format

Different image formats work better for different types of images. JPG (or JPEG) is best for photographs and images with many colors. It compresses well, keeping file size small, but loses some detail in the process. PNG is better for images that need a transparent background or sharp edges, like logos or icons. PNG files are larger than JPG but preserve every pixel exactly.

WebP is a newer format that combines the benefits of both — it compresses well like JPG but can have transparency like PNG. Not all older browsers support WebP, so check your audience before using it.

For the web, smaller file sizes matter because they load faster. A photograph that is 2 MB will make your page slow. Use image editing software or online tools to resize and compress images before adding them to your HTML.

Putting images inside links

You can make an image clickable by wrapping the <img> tag inside an <a> (anchor) tag:

<a href="https://example.com"><img src="photo.jpg" alt="A golden retriever"></a>

When a visitor clicks the image, they go to the URL in the href attribute. This is common for logo images that link to the home page, or for thumbnail images that link to larger versions.

Common mistakes and how to fix them

The most common mistake is a broken file path. If you type src="photo.jpg" but the file is actually in an images folder, the browser will not find it. Check that the path matches your actual folder structure exactly, including capitalization — Photo.jpg and photo.jpg are different files on most web servers.

Another mistake is forgetting the alt attribute. While the page will still display, visitors using screen readers will get no description of the image, and the page becomes harder to navigate for them.

Setting both width and height to arbitrary numbers often distorts the image. If you need to resize, set only the width and let the height scale automatically, or calculate the height to match the original proportions.

Frequently Asked Questions

What happens if the image file is not found?

The browser displays a broken image icon (usually a picture frame with an X) in the spot where the image should be. The alt text you wrote will appear as a tooltip if someone hovers over the broken image. Check your file path and make sure the image file actually exists in that location.

Can I use an image from another website?

Technically yes — you can link to any image on the internet using its full web address. However, you should only do this if you have permission from the site owner. Linking to someone else's image without permission is called "hotlinking" and uses their server bandwidth, which costs them money.

What is the difference between width="400" and width="400px"?

In HTML, pixel values do not need the "px" unit — the browser assumes pixels by default. Both width="400" and width="400px" work the same way. In CSS (stylesheets), you must include the unit, so the difference matters there.

Should I use relative or absolute paths for images?

Use relative paths for images that belong to your project. They keep working if you move your entire folder to a different location. Use absolute paths only for images hosted on other websites, and only if you have permission to link to them.

Can I make an image responsive so it looks good on phones?

Yes. Set width="100%" and the image will scale to fit its container on any screen size. You can also use CSS to set a maximum width so the image does not get too large on desktop screens. For best results, start with an image file that is large enough for desktop, then let CSS shrink it for smaller screens.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.