How to Add a Picture to an HTML Page

The img tag is how you put a picture on a web page

To display a picture in HTML, you use the img tag. This is a single line of code that tells the browser where to find the image file and how to show it. The basic structure looks like this:

The src attribute tells the browser the location of your image file. The alt attribute holds text that describes the picture — this text appears if the image fails to load, and it also helps people using screen readers understand what the image shows. Both attributes matter: src makes the picture appear, and alt makes your page work for everyone.

Key Takeaways

The img tag requires two attributes: src (the file path) and alt (a text description of the image).
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 are .jpg for photographs, .png for images with transparent backgrounds, and .gif for straightforward graphics.
You can control how large the picture appears by adding width and height attributes to the img tag.

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

The browser can only display an image if it knows where to look. You have three options: store the image in the same folder as your HTML file, store it in a subfolder, or link to an image on the internet.

If your HTML file is named index.html and your image is named photo.jpg, and both are in the same folder, you write: <img src="photo.jpg" alt="My photo">

If you organize your files into folders — for example, an images folder inside your project folder — you write: <img src="images/photo.jpg" alt="My photo">

If the image lives on the internet at a web address, you use the full URL: <img src="https://example.com/photo.jpg" alt="My photo"> The browser downloads it each time the page loads, so this method is slower than storing the file locally.

How to write the alt text so it actually describes the image

The alt text is not optional. It serves two purposes: if the image does not load (because the file moved, the internet connection dropped, or the browser cannot find it), the alt text appears in its place. Second, people using screen readers hear the alt text read aloud, so they understand what the image shows.

Write alt text that describes what is actually in the picture, not what you want it to mean. If the image shows a golden retriever sitting on grass, write alt="Golden retriever sitting on grass", not alt="happy dog" or alt="image". Be specific enough that someone who cannot see the picture understands it.

If the image is purely decorative — a colored line, a background pattern, or a spacer — you can leave alt text empty: alt="" This tells the screen reader to skip it, which is correct because it carries no information.

Controlling the size of the picture on the page

By default, the browser displays an image at its actual size. If your image file is 2000 pixels wide but your page is only 800 pixels wide, the image will overflow and break your layout. You control the size by adding width and height attributes.

You can set just the width and let the browser scale the height automatically to keep the image from looking stretched: <img src="photo.jpg" alt="My photo" width="400"> This displays the image 400 pixels wide, and the height adjusts proportionally.

You can also set both width and height: <img src="photo.jpg" alt="My photo" width="400" height="300"> If the width and height do not match the image's actual proportions, the image will look distorted, so it is safer to set only the width and let the browser handle the height.

Common image file formats and when to use each one

Different image formats work better for different types of pictures. JPG (or JPEG) is best for photographs and images with many colors. It compresses the file to a smaller size, which makes pages load faster, but the compression loses some detail. PNG is best for images that need a transparent background, like logos or icons. It preserves all detail but creates larger files. GIF works for straightforward graphics and animations, though it is less common now.

When you save an image, your image editor (like Photoshop, GIMP, or even Paint) lets you choose the format. For a photograph, choose JPG. For a logo or icon, choose PNG. The format does not change how you write the img tag — only the filename changes.

Putting an image inside a link so it becomes clickable

You can make an image clickable by wrapping the img tag in an anchor tag. The anchor tag is what creates links in HTML. Here is the structure:

When someone clicks the image, the browser goes to the URL in the href attribute. This is useful for image galleries, navigation buttons, or logo links that take you to the home page. The alt text still matters — it describes the image, and the href describes where the link goes.

Troubleshooting when the image does not appear

If you write the img tag correctly but the picture does not show up, the most common cause is that the browser cannot find the file. Check three things: First, verify the filename is spelled exactly right, including the file extension (.jpg, .png, etc.). Second, verify the file is actually in the location you specified — if you wrote src="images/photo.jpg", the file must be in an images folder. Third, if you are testing the HTML file on your own computer, make sure you are opening it in a browser (double-click the file), not editing it in a text editor.

If the image is on the internet and you used a full URL, check that the URL is correct by copying it into your browser's address bar. If the image loads in the browser but not on your page, the URL might be wrong or the server hosting the image might be blocking access.

Frequently Asked Questions

Do I have to use the alt attribute?

Technically the img tag works without alt text, but you should always include it. Alt text makes your page work for people using screen readers, and it provides a fallback if the image fails to load. It is also considered a best practice in web development.

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

Both work, but they are used differently. The width and height attributes in the img tag are straightforward and quick for basic sizing. CSS (Cascading Style Sheets) gives you more control and is better for complex layouts. For learning, start with the attributes in the img tag.

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

Yes, you can use the full URL in the src attribute, and the browser will load it from that website. However, you should only do this if you have permission from the website owner. Using someone else's image without permission can be copyright infringement.

Why does my image look blurry or pixelated?

This usually happens when you make the image larger than its actual size. If your image file is 400 pixels wide and you set width="800", the browser stretches it and it looks blurry. Use an image that is already the size you need, or make it smaller, not larger.

What if I want the image to be responsive and change size on different devices?

You can use CSS media queries or set the width to a percentage instead of a fixed pixel size. For example, width="100%" makes the image as wide as its container. This is more advanced and requires learning CSS, but it is how modern websites handle images on phones and tablets.

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.