The Basic Way to Add a Picture

To add a picture to an HTML page, you use the <img> tag. This tag tells the browser where to find the image file and displays it on the page. The tag looks like this:

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

The src part tells the browser the name and location of your image file. The alt part is text that describes the picture — this shows up if the image fails to load, and it helps people using screen readers understand what the picture is. Both parts matter, even though only the picture shows on the page.

Key Takeaways

  • The <img> tag is the HTML element that displays pictures, and it requires both a src attribute (the file name) and an alt attribute (a description).
  • Your image file must be in a location the browser can find — usually the same folder as your HTML file, or in a subfolder you reference in the src.
  • Common image formats that work in HTML are JPG, PNG, and GIF, and the file name in src must match exactly, including capitalization.
  • You can control how big the picture appears by adding width and height attributes to the <img> tag.
  • If your picture is in a different folder, you need to write the path correctly — for example, src="images/picture.jpg" if the image is in an images folder.

Where to Put Your Image File

The browser needs to find your image file. The easiest way is to keep the image in the same folder as your HTML file. If your HTML file is called index.html and your image is called photo.jpg, both sitting in a folder called my-website, then your tag just needs to say src="photo.jpg".

If you organize your files into subfolders — which is a good habit — you need to tell the browser where to look. If you have a folder called images inside your my-website folder, and photo.jpg is inside images, then your tag needs to say src="images/photo.jpg". The forward slash tells the browser to go into the images folder first.

The file name in src must match exactly. If your file is Photo.jpg with a capital P, but you write src="photo.jpg" with a lowercase p, the browser will not find it. This is especially important on web servers, which are stricter about capitalization than your own computer.

Image Formats That Work in HTML

Not every image format works in HTML. The three formats that work in all browsers are JPG, PNG, and GIF. JPG is best for photographs because it keeps file size small. PNG is best for graphics, logos, and images that need a transparent background. GIF works for both but creates larger files than JPG for photographs.

If you have an image in a different format — like BMP, TIFF, or WebP — you need to convert it to one of these three first. Most image editing programs and free online converters can do this. The format matters because the browser needs to know how to read the file.

Controlling Picture Size

By default, the browser displays your image at its actual size. If your photo is 2000 pixels wide but your page is only 800 pixels wide, the picture will be cut off. You can control the size by adding width and height to your tag:

<img src="photo.jpg" alt="A sunset over water" width="400" height="300">

The numbers are in pixels. Setting width to 400 makes the picture 400 pixels wide. If you set only the width and leave out the height, the browser automatically shrinks the height to keep the picture from looking stretched or squashed. This is usually the best approach — set one dimension and let the browser handle the other.

If you want the picture to take up a certain percentage of the page width instead of a fixed pixel size, you can use CSS (a separate language for styling) to do that. For now, pixels are the simplest way to control size directly in HTML.

Writing the Alt Text Correctly

The alt text is not decoration — it serves two real purposes. First, if the image fails to load (because the file is missing or the connection is slow), the alt text shows up in its place so the reader knows what was supposed to be there. Second, people using screen readers rely on alt text to understand what the picture shows.

Write alt text that describes what is actually in the picture. If the picture shows a dog running through a field, write alt="A brown dog running through a grassy field". Do not write alt="image" or alt="picture" — that tells the reader nothing. Do not write a whole paragraph either; one or two sentences is enough.

If the picture is purely decorative and does not add information to the page, you can leave alt empty: alt="". This tells screen readers to skip it, which is the right thing to do for decorative images.

Making Pictures into Links

You can make a picture clickable by wrapping the <img> tag inside an <a> tag, which is the HTML tag for links:

<a href="page2.html"><img src="photo.jpg" alt="A sunset"></a>

When someone clicks the picture, they go to the page listed in the href. This is useful for thumbnails that link to larger versions, or for navigation buttons made from images. The alt text still matters — it describes the picture, not the link destination.

Troubleshooting When Pictures Do Not Show

If you add an <img> tag but the picture does not appear, check these things in order. First, make sure the file name in src matches the actual file name exactly, including capitalization and the file extension (.jpg, .png, or .gif). Second, make sure the image file is actually in the location you told the browser to look — if you wrote src="images/photo.jpg", the file must be in an images folder. Third, open your HTML file in a browser and look at the page source to confirm the tag is written correctly.

If you see a broken image icon (usually a picture frame with an X), the browser found the HTML tag but could not locate the image file. If you see nothing at all, the tag itself might have a typo. Right-click the broken image and choose "Inspect" or "Inspect Element" to see what the browser thinks the src should be — this often reveals the problem immediately.

Frequently Asked Questions

Can I use an image from another website by putting its web address in src?

Yes, you can write src="https://example.com/photo.jpg" to display an image hosted on another website. However, this uses that website's bandwidth and server space, and the image will disappear if that website removes it or blocks access. It is better to download the image and keep it in your own folder, as long as you have permission to use it.

What is the difference between width and height in pixels versus percentages?

Pixels are a fixed size — width="400" always means 400 pixels, no matter the screen size. Percentages scale with the page — width="50%" means half the page width on a phone and half the page width on a desktop. For most cases, pixels are simpler to start with, but percentages are better for pages that need to look good on different screen sizes.

Do I need to close the img tag with </img>?

No. The <img> tag does not need a closing tag. It is what HTML calls a "self-closing" tag. Writing </img> will not break anything, but it is not necessary and is not standard HTML.

Can I add a border or shadow to a picture using just HTML?

HTML can add a simple border with the border attribute: <img src="photo.jpg" border="2">. For shadows, rounded corners, or other styling, you need CSS. HTML handles the content and structure; CSS handles the appearance. Most modern websites use CSS for picture styling.

What happens if my image file is very large and takes a long time to load?

The page will load first, and the image will appear once the file downloads. You can reduce file size by using an image editor to make the picture smaller in dimensions or by converting it to a format like JPG that compresses better. Smaller files load faster and use less of your visitor's data.