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

To add an image in HTML, you use the <img> tag. Unlike most HTML tags, the img tag does not have a closing tag — it stands alone. The tag needs two pieces of information: where the image file is located and what to call it if the image does not load.

The basic structure looks like this:

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

The src attribute tells the browser where to find the image file. The alt attribute holds text that 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 image appear, and alt makes your page work for everyone.

Key Takeaways

  • The img tag has no closing tag and requires both a src attribute (the file path) and an alt attribute (a text description).
  • The src value can be a file name in the same folder, a path to a subfolder, or a full web address starting with http or https.
  • The alt text should describe what the image shows in plain language, not just repeat the file name.
  • Images load faster and take up less space when you save them as jpg for photos or png for graphics with solid colors.

Where the image file needs to be located

The src attribute can point to an image in three ways. If the image is in the same folder as your HTML file, you only need the file name: <img src="photo.jpg" alt="A sunset over water">

If the image is in a subfolder called "images", you write the path like this: <img src="images/photo.jpg" alt="A sunset over water"> The forward slash separates the folder name from the file name.

If the image lives on another website, you use the full web address: <img src="https://example.com/photo.jpg" alt="A sunset over water"> This is called a direct link. The image stays on the other website's server, so your page loads it from there each time someone visits.

Writing alt text that actually describes the image

The alt attribute serves two purposes. When an image fails to load — because the file moved, the internet connection dropped, or the server is down — the alt text appears in its place so the page still makes sense. Screen readers also read the alt text aloud to people who cannot see the image.

Write alt text as if you were describing the image to someone who cannot see it. "Sunset over water" is better than "photo.jpg" or "image1". If the image is purely decorative — a colored line or a background pattern — you can leave the alt attribute empty: <img src="line.png" alt=""> This tells the screen reader to skip it.

Keep alt text under 125 characters. If you need to say more, put the longer description in the surrounding text or in a caption below the image.

Common image file formats and when to use them

The three formats you will see most often are jpg, png, and gif. Each one compresses the image differently, which affects file size and quality.

JPG works best for photographs and images with many colors. It shrinks file size by removing some detail that the human eye usually cannot see. A photo saved as jpg is often 10 to 20 times smaller than the same photo saved as png.

PNG works best for graphics, logos, and images with solid blocks of color. It keeps every pixel exactly as it is, so the image stays sharp. PNG also lets you make parts of the image transparent — useful when you want the background to show through.

GIF is an older format that works for straightforward graphics and animations. It is less common now because png handles static images better, and video formats handle animation better.

Adding width and height to control image size

By default, an image displays at its actual size — the size it was saved at. You can make it smaller or larger by adding width and height attributes:

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

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. You can do the same by setting only the height.

If the image is much larger than the size you display it at, the browser still has to read the full file. For better performance, resize the image in an image editor before you upload it, then use width and height to fine-tune it on the page.

Linking an image so it acts like a button

To make an image clickable, wrap the img tag inside an anchor tag:

<a href="page.html"><img src="button.png" alt="Click here to go to the next page"></a>

Now when someone clicks the image, they go to the page listed in the href attribute. The alt text should still describe what the image shows, but it can also mention that it is clickable.

By default, a clickable image gets a blue border around it. You can remove that border with CSS if you want the image to look cleaner, but the border helps people know it is a link.

Troubleshooting when an image will not show up

If you add an img tag but the image does not appear, check these things in order. First, make sure the file name in the src attribute matches the actual file name exactly — including capital letters and the file extension. "Photo.jpg" and "photo.jpg" are different on most computers.

Second, verify the file is in the location you specified. If you wrote src="images/photo.jpg", the photo must be in a folder called "images" in the same location as your HTML file. If the folder does not exist or the file is not in it, the image will not load.

Third, check that the file format is actually jpg, png, or gif. Some image files have the wrong extension — for example, a file that says "photo.jpg" but is actually a different format. Right-click the file and check its properties to see what type it really is.

If you are linking to an image on another website and it does not show up, that website may have blocked direct linking, or the image may have been moved or deleted.

Frequently Asked Questions

Can I use an image as a background for the whole page?

Yes, but you use CSS instead of the img tag. In your style section, write: background-image: url("image.jpg"); on the body element. This tiles the image across the background. You can also use background-size: cover; to make it fill the screen without tiling.

What if the image file is really large and slows down my page?

Resize it in an image editor like GIMP or Photoshop before you upload it. A photo for a web page usually does not need to be larger than 1200 pixels wide. You can also use a tool like TinyPNG to compress the file without losing visible quality.

Do I need to use the width and height attributes?

No, but it helps. When you include width and height, the browser reserves space for the image before it loads, so the page does not jump around. Without them, the layout can shift once the image appears.

Can I add a caption below an image?

Yes. Wrap the img tag and the caption text in a figure tag, and put the caption in a figcaption tag: <figure><img src="photo.jpg" alt="..."><figcaption>Your caption here</figcaption></figure>

What happens if someone clicks an image that is not a link?

Nothing happens — the image just displays. If you want it to do something when clicked, you need to wrap it in an anchor tag or add JavaScript code. The img tag by itself is just for display.