How to Put an Image on a Webpage Using HTML

The basic way to add an image to HTML

To add an image to a webpage, you use the <img> tag. This tag tells the browser where to find the image file and how to display it. The tag looks like this:

<img src="image.jpg" alt="A description of the image">

The src part tells the browser the name or location of your image file. The alt part is text that appears if the image does not load, and it also helps people using screen readers understand what the image shows. You do not need a closing tag — the <img> tag closes itself.

Key Takeaways

The <img> tag is the HTML element that displays images, and it requires a src attribute pointing to your image file.
The alt attribute should describe what the image shows in a few words, and it displays when the image fails to load.
Image files must be in a location the browser can reach — either in the same folder as your HTML file, a subfolder, or a web address.
Common image formats for web use are JPG, PNG, and GIF, and the file extension in your src must match the actual file type.

Where to put your image file so the browser can find it

The browser needs to know where your image file is located. If your image is in the same folder as your HTML file, you only need the filename:

<img src="photo.jpg" alt="My vacation photo">

If your image is in a subfolder called "images", use a forward slash to show the path:

<img src="images/photo.jpg" alt="My vacation photo">

If your image is on the internet at a web address, paste the full URL into the src:

<img src="https://example.com/photo.jpg" alt="My vacation photo">

A common mistake is typing the wrong filename or path. Check that the filename matches exactly — "photo.jpg" is different from "Photo.jpg" on most computers. Also make sure the file extension (.jpg, .png, .gif) matches the actual file type.

Writing a useful alt description

The alt text should describe what someone would see if they looked at the image. Keep it short — usually one to two sentences. If the image is just decoration and does not add meaning to the page, you can leave the alt empty by writing alt="".

Good alt text: alt="A golden retriever sitting on a beach"

Bad alt text: alt="image" or alt="photo.jpg"

The alt text matters for two reasons. First, if the image file does not load or the link breaks, the reader sees your description instead of a broken image icon. Second, people using screen readers rely on alt text to understand what the image shows, so they can participate in your webpage the same way sighted visitors do.

Controlling the size of your image

By default, the browser displays an image at its actual size. To make it smaller or larger, add width and height attributes:

<img src="photo.jpg" alt="My vacation photo" width="300" height="200">

The numbers are in pixels. If you only set the width, the browser automatically adjusts 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 its original proportions.

A better approach for webpages is to set only the width and let the height adjust on its own:

<img src="photo.jpg" alt="My vacation photo" width="300">

Image formats that work on the web

Not all image file types work the same way on webpages. The most common formats are:

JPG — best for photographs and images with many colors. File sizes are smaller, which means pages load faster.
PNG — best for images that need a transparent background, like logos. Also works well for images with text or sharp edges.
GIF — can be animated, but file sizes are often large. Mostly used for simple graphics or short animations.

When you save an image, make sure you save it in one of these formats and that the filename ends with the correct extension. If you save a file as "photo.jpg" but it is actually a PNG file, the browser will not display it correctly.

Putting an image inside a link

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

<a href="https://example.com"><img src="photo.jpg" alt="My vacation photo"></a>

When someone clicks the image, they go to the web address in the href. This is useful for creating image galleries or buttons that link to other pages. The alt text still matters — it describes the image to people using screen readers, and it also appears if the image fails to load.

Common mistakes and how to fix them

The most frequent problem is that the image does not appear at all. This usually means the browser cannot find the file. Check three things: First, make sure the filename in your src matches the actual filename exactly, including capital letters and the file extension. Second, make sure the file is in the location you specified — if you wrote src="images/photo.jpg", the photo.jpg file must actually be in a folder called images. Third, if you are using a web address, paste it into your browser address bar to confirm the image loads there.

Another common issue is that the image appears stretched or squashed. This happens when you set both width and height to numbers that do not match the image's original shape. Fix this by setting only the width and letting the height adjust automatically, or by calculating the correct height based on the original image proportions.

If you see a broken image icon (usually a picture frame with an X), the browser found the HTML file but cannot locate the image file. Double-check the path and filename, and make sure the image file actually exists in that location.

Frequently Asked Questions

Can I use an image from another website in my own webpage?

Technically yes — you can paste the image URL into your src attribute and it will display. However, this uses the other website's bandwidth and storage, which they may not allow. It is better to download the image and save it in your own project folder, or to get permission from the image owner first.

What size should my image be before I add it to HTML?

Save your image at roughly the size you want it to appear on the webpage. If you want it to be 300 pixels wide, save it around that width. This keeps your webpage loading fast. You can use the width attribute to fine-tune the size in HTML, but starting with the right size in your image editor is more efficient.

Do I need to write the file extension in the src, like .jpg or .png?

Yes. The browser uses the file extension to know what type of file it is. If you write src="photo" instead of src="photo.jpg", the browser will not know how to display it and the image will not appear.

What happens if someone has a slow internet connection and my image is very large?

The webpage will load slowly because the browser has to download the entire image file before displaying it. This is why using JPG format for photographs is helpful — JPG files are smaller than PNG or GIF files with the same image. You can also use an image editor to reduce the file size before adding it to your webpage.

Can I add text on top of an image using HTML?

HTML alone cannot put text directly on an image. You would need to either add the text to the image file using an image editor before uploading it, or use CSS to position text over the image on your webpage. CSS is a separate language that controls how things look on a webpage.

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.