How to Add a Photo in HTML

The Basic Image Tag

To add a photo to a webpage, 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:

The src attribute points to your image file. The alt attribute describes what the photo shows — this text appears if the image fails to load, and it helps people using screen readers understand the content. Both attributes matter: src tells the browser what to display, and alt tells it what to say if the display fails.

Key Takeaways

The <img> tag requires a src attribute that points to your image file and an alt attribute that describes the photo.
Image file paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http).
Common image formats for the web are JPG for photographs, PNG for images with transparency, and WebP for smaller file sizes.
You can control how large the image appears by adding width and height attributes to the <img> tag.

Where Your Image File Lives

The src attribute needs to point to your image file in one of two ways. A relative path points to a file inside your project folder — for example, if your HTML file and your photo are in the same folder, you write src="photo.jpg". If the photo is in a subfolder called images, you write src="images/photo.jpg".

An absolute path is a complete web address. If your photo lives on the internet, you write the full URL: src="https://example.com/images/photo.jpg". Relative paths are simpler when you're building a site on your own computer. Absolute paths work when the image is already hosted somewhere online.

A common mistake is typing the wrong path. If you write src="photo.jpg" but the file is actually in an images folder, the browser will not find it and the image will not appear. Check your folder structure carefully — the path must match exactly where the file actually sits.

Choosing the Right Image Format

Different image formats work better for different purposes. JPG is the standard for photographs because it compresses the file down to a smaller size without losing much quality. PNG is better when you need a transparent background — the areas around your subject can be see-through instead of a solid color. WebP is a newer format that makes files even smaller than JPG, though older browsers may not display it.

For a photo from a camera or a realistic image, use JPG. For a logo, icon, or anything with a transparent background, use PNG. If you want the smallest possible file size and you know your audience uses modern browsers, try WebP. The format you choose goes in the filename: src="photo.jpg" or src="logo.png".

Setting the Size of Your Image

By default, the browser displays an image at its actual size. If your photo is 2000 pixels wide but you only want it to take up 400 pixels on the page, you can add width and height attributes:

You can set just the width and let the browser scale the height automatically to keep the photo from looking stretched. If your photo is 800 by 600 pixels and you set width to 400, the height will become 300 automatically. This keeps the proportions correct without you having to do the math.

Setting the size in HTML is different from resizing the actual image file. The HTML width and height just tell the browser how much space to reserve on the page — the full image file still downloads. If you want to reduce file size, you should resize the image in an image editor before uploading it.

Making Images Responsive

A responsive image looks good on both a phone screen and a desktop monitor. Instead of setting a fixed width in pixels, you can use a percentage or a relative unit. For example, width="100%" makes the image as wide as its container, and it shrinks or grows depending on the screen size.

You can also add max-width="100%" to prevent the image from stretching larger than its original size on very wide screens. This combination — setting width to 100% and max-width to 100% — is a common pattern that works across devices:

When you use percentages instead of fixed pixel sizes, your image adapts to the space available, which is especially important for mobile phones where screen width varies widely.

Common Mistakes and How to Fix Them

The most frequent problem is a broken image — you see a broken-image icon instead of your photo. This almost always means the src path is wrong. Open your file manager and check that the image file is actually where you said it is. If the file is in a subfolder, make sure you included the folder name in the path.

Another common issue is forgetting the alt attribute. While the page will still display, the alt text is important for accessibility and for search engines. Always include a short, clear description of what the photo shows.

If your image looks blurry or pixelated, the image file itself may be too small, or you may have set the width larger than the image's actual size. Check the original image dimensions — if it is 400 pixels wide and you set width to 800, the browser will stretch it and it will look fuzzy.

Frequently Asked Questions

What if my image file is on a different website?

You can link to it using the full web address in the src attribute: src="https://example.com/photo.jpg". However, if that website goes down or deletes the image, your photo will disappear. It is safer to read the image and store it with your own files.

Can I use an image as a link?

Yes. Wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="photo.jpg" alt="Click here"></a>. When someone clicks the image, they go to the page specified in the href attribute.

How do I make an image appear side by side with text?

Place the <img> tag and the text inside the same container, or use CSS to float the image. The simplest approach is to put them both in a paragraph or div and let the browser flow them together, though CSS gives you more control over spacing and alignment.

What size should my image file be?

Smaller is better for web pages because they load faster. A photo for a webpage is usually between 50 and 500 kilobytes depending on its dimensions and quality. Use an image editor or an online tool to compress your photo before uploading it.

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.