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 attribute tells the browser which image file to load. The alt attribute describes what the picture shows — this text appears if the image fails to load, and it helps people using screen readers understand what they're looking at. Both attributes matter: src makes the picture appear, and alt makes your page work for everyone.

You can place this tag anywhere inside the <body> section of your HTML document, usually between other content like text or headings. The image will appear exactly where you put the tag.

Key Takeaways

  • The <img> tag requires a src attribute pointing to your image file and an alt attribute describing the picture.
  • 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 pages are JPG, PNG, and GIF; use JPG for photographs and PNG for graphics or images that need transparency.
  • You can control how large an image appears by adding width and height attributes to the <img> tag.
  • Wrapping an <img> tag in an <a> tag turns the picture into a clickable link.

Where to Store Your Image File

The browser needs to know where to find your image. If the image is in the same folder as your HTML file, you can just write the filename:

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

If your image is in a subfolder called "images", you write the path to it:

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

You can also use a full web address if the image is hosted somewhere else online:

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

The most common mistake is putting the image file in a different folder and forgetting to update the src path. If your image doesn't appear, check that the filename and path are exactly correct — including capital letters and file extensions like .jpg or .png.

Choosing the Right Image Format

Different image formats work better for different types of pictures. JPG is best for photographs and complex images with many colors — it compresses the file size so pages load faster. PNG works well for graphics, logos, and images that need a transparent background. GIF is rarely used on modern websites but still works for simple animations.

For most situations, use JPG for photos and PNG for everything else. The format you choose affects both how the image looks and how long it takes to download. A large uncompressed image can slow down your entire page, so it's worth saving your image in the right format before you add it to HTML.

Controlling Image Size

By default, an image displays at its full original size. You can make it smaller or larger by adding width and height attributes:

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

The numbers represent pixels — units of measurement on a screen. 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 don't match its original proportions.

A common approach is to set just the width and let the height adjust on its own. For example,

<img src="photo.jpg" alt="My photo" width="400">
will display the image at 400 pixels wide and scale the height automatically.

Making an Image Into a Link

To turn a picture into a clickable link, wrap the <img> tag inside an <a> tag:

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

When someone clicks the image, they go to the web address in the href attribute. This is useful for creating image galleries, navigation buttons, or clickable thumbnails. The alt text still matters — it describes the picture for people who can't see it, and it also tells search engines what the image is about.

Common Problems and How to Fix Them

If your image doesn't appear, the most likely cause is an incorrect file path. Double-check that the filename in the src attribute matches exactly — including the file extension (.jpg, .png, etc.) and any capital letters. If the file is in a subfolder, make sure you included the folder name in the path.

If the image appears but looks distorted or stretched, you probably set both width and height to numbers that don't match the image's original proportions. Try setting only the width and letting the height adjust automatically.

If you're using an image from another website, check that you have permission to use it. Some websites allow you to link directly to their images, but others block this practice. The safest approach is to download the image and store it on your own server.

Adding Images Responsively for Different Screen Sizes

On phones and tablets, a fixed image size might be too large or too small. You can make images scale to fit different screen sizes by using percentages instead of fixed pixel numbers:

<img src="photo.jpg" alt="My photo" width="100%">

This tells the browser to make the image as wide as its container — if the container is 500 pixels wide on a desktop and 300 pixels wide on a phone, the image scales to fit. The height adjusts automatically to keep the image from looking stretched.

For more control over how images behave on different devices, you can use CSS (a separate styling language) to set rules for image sizing. But for most situations, width="100%" is a simple way to make images work on both large and small screens.

Frequently Asked Questions

What's the difference between src and alt in an img tag?

The src attribute tells the browser where to find the image file and makes it display on the page. The alt attribute describes what the picture shows in words — it appears if the image fails to load and helps people using screen readers. Both are necessary: src makes the picture visible, alt makes your page work for everyone.

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

You can link directly to an image on another website by using its full web address in the src attribute. However, many websites block this practice, and you should only do it if you have permission. The safest approach is to download the image and store it on your own server.

Why does my image look blurry or pixelated?

This usually happens when you make an image much larger than its original size. If the original image is 200 pixels wide and you set width="600", the browser stretches it and it looks blurry. Use images that are already close to the size you need, or use a larger original image.

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

No. The <img> tag is self-closing, which means it doesn't need a closing tag. You can optionally write it as <img .../> with a slash at the end, but modern HTML doesn't require it. Either way works fine.

What if I want to add a caption or text below my image?

You can put regular text or a paragraph tag right after the <img> tag. For more structured captions, use the <figure> and <figcaption> tags, which tell the browser that the text belongs with the image. This helps with organization and accessibility.