How to Add an Image to a Web Page With HTML

The Basic Image Tag

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

The simplest version looks like this: <img src="photo.jpg">. The src attribute points to the image file. The browser reads this instruction, finds the file, and displays the image on the page.

You can place an <img> tag anywhere in your HTML where you want the image to appear — inside a paragraph, in a heading, or on its own line. The image will display at that exact location.

Key Takeaways

The <img src="filename"> tag is all you need to display an image, but the file path must be correct or the image will not appear.
Always include an alt attribute with a short description of the image, which helps people using screen readers and appears if the image fails 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).
The width and height attributes let you control image size, but specifying both can distort the image if the proportions do not match.
Common image formats for the web are JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes.

Writing the File Path Correctly

The src attribute must point to where your image file actually lives. If the path is wrong, the browser cannot find the file and displays a broken image icon instead.

A relative path points to a file inside your project folder. If your HTML file and your image file are in the same folder, you write just the filename: <img src="photo.jpg">. If the image is in a subfolder called images, you write: <img src="images/photo.jpg">. If you need to go up one level to find the file, you use two dots: <img src="../photo.jpg">.

An absolute path is a complete web address. You use this when the image lives on a different website: <img src="https://example.com/images/photo.jpg">. The browser fetches the image from that exact web address every time the page loads.

Test your paths by opening the HTML file in a browser. If you see a broken image icon, the path is wrong. Check the spelling, folder names, and file extension — these must match exactly.

Adding Alt Text and a Title

The alt attribute holds a short text description of the image. This text appears if the image fails to load, and it is read aloud by screen readers used by people with vision loss. Always include it: <img src="photo.jpg" alt="A dog running in a field">.

Write alt text that describes what the image shows, not what you want it to do. "A dog running in a field" is better than "click here to see our dog". Keep it brief — one sentence is usually enough. If the image is purely decorative and adds no information to the page, you can leave the alt text empty: <img src="decoration.jpg" alt="">.

The title attribute is optional and different from alt text. It shows a tooltip when someone hovers their mouse over the image: <img src="photo.jpg" alt="A dog running" title="Our dog Max">. Use it for extra context, not for information the reader needs to understand the page.

Controlling Image Size

By default, an image displays at its full original size. You can change this with the width and height attributes, which take measurements in pixels: <img src="photo.jpg" width="400" height="300">.

If you specify only width or only height, the browser automatically scales the other dimension to keep the image from stretching or squishing. This is usually the safest approach: <img src="photo.jpg" width="400">. The browser figures out the height based on the image's original proportions.

If you set both width and height to numbers that do not match the image's original proportions, the image will look distorted. For example, if the original image is square but you set width to 400 and height to 200, it will appear stretched horizontally.

You can also use percentages to make images responsive — they shrink and grow with the browser window: <img src="photo.jpg" width="100%">. This is common on mobile-friendly websites where screen sizes vary widely.

Choosing the Right Image Format

JPG is the standard format for photographs and images with many colors. It compresses the file to a smaller size, which means pages load faster. JPG files cannot have transparent backgrounds.

PNG is better for graphics, logos, and images that need a transparent background. PNG files are usually larger than JPG, but they preserve sharp edges and fine detail. Use PNG when the image quality matters more than file size.

WebP is a newer format that produces smaller files than both JPG and PNG while keeping good quality. Not all older browsers support it, but most modern ones do. If you use WebP, include a JPG or PNG as a fallback for older browsers.

To check what format your image is, look at the file extension: .jpg, .png, .webp, or .gif. If you are unsure which format to use, start with JPG for photos and PNG for everything else.

Common Mistakes and How to Fix Them

The most common mistake is a broken file path. The browser cannot find the image because the folder name is spelled wrong, the file extension is missing, or the file is in a different location than the code expects. Always double-check the spelling and folder structure.

Another mistake is forgetting the src attribute entirely or misspelling it. The tag must be <img src="...">, not <img file="..."> or <img image="...">. The attribute name is always src.

Leaving out the alt attribute is a third common error. While the page will still display, it becomes harder for people using assistive technology to understand the image. Every image should have an alt attribute, even if it is empty.

Finally, some people try to use the <img> tag to display videos or other file types. The <img> tag only works for image files. For videos, you use the <video> tag instead.

Frequently Asked Questions

What happens if the image file is deleted after I upload the website?

The image will not display — visitors will see a broken image icon instead. The browser tries to load the file from the path you specified, but if the file is gone, it cannot. Always keep image files in the same location as your HTML file or in the subfolder you specified in the src attribute.

Can I use an image from another website without downloading it?

Yes, by using the full web address in the src attribute: <img src="https://example.com/photo.jpg">. However, you should have permission from the website owner to use their image. Also, if they move or delete the image, it will disappear from your page.

How do I make an image clickable so it links to another page?

Wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="photo.jpg"></a>. The image becomes a clickable link that takes visitors to the page you specified in the href attribute.

What is the best image size to use on a website?

It depends on where the image appears. A full-width header image might be 1200 pixels wide, while a thumbnail in a gallery might be 200 pixels. Start with the size you want it to display, then use an image editor to resize the file before uploading. Smaller files load faster.

Can I use spaces or special characters in image filenames?

You can, but it is safer to avoid them. Use hyphens or underscores instead of spaces: my-photo.jpg instead of my photo.jpg. Some servers handle special characters unpredictably, which can break the image path.

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.