The basic way to add a photo in HTML

To add a photo to a web page, use the <img> tag with a src attribute that points to your image file. The simplest version looks like this:

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

The src attribute tells the browser where to find the 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 makes the photo appear, alt makes your page accessible to everyone.

The image file (photo.jpg in this example) needs to be in a location your browser can reach. If the file is in the same folder as your HTML file, you can just write the filename. If it's in a subfolder called "images", write src="images/photo.jpg".

Key Takeaways

  • The <img> tag requires a src attribute pointing to your image file and an alt attribute describing the photo.
  • Image file paths can be relative (same folder or a subfolder) or absolute (a full web address starting with http).
  • Common image formats for web pages are JPG for photographs, PNG for images with transparency, and WebP for smaller file sizes.
  • Adding width and height attributes prevents the page layout from shifting while the image loads.

File paths: where the browser looks for your image

The browser finds your image by following the path you write in the src attribute. A relative path starts from your HTML file's location. If your HTML file and image are in the same folder, just write the filename: src="sunset.jpg". If the image is in a subfolder called "images", write src="images/sunset.jpg".

An absolute path is a complete web address. If your image lives on another website or you're hosting it on a server, use the full URL: src="https://example.com/images/sunset.jpg". This works from anywhere, but if that server goes down or moves the file, your image disappears.

Relative paths are usually better for your own website because they keep working even if you move your entire site to a different server. Absolute paths are useful when you're linking to an image someone else is hosting, but be aware that you're depending on their server staying online.

Image formats and when to use each one

Different image formats work better for different purposes. JPG (or JPEG) is best for photographs and complex images with many colors. It compresses well, so files stay small, but you lose some detail in the compression. PNG is better for images that need a transparent background, like logos or icons. It preserves every detail but creates larger files than JPG.

WebP is a newer format that creates smaller files than both JPG and PNG while keeping good quality. Not every browser supports it yet, but most modern ones do. GIF works for simple images and animations, but it's rarely the best choice anymore — PNG is usually smaller for static images, and video formats work better for animation.

To pick a format: use JPG for photos, PNG for graphics with transparency or sharp edges, and WebP if you want the smallest possible file. You can also use multiple formats by combining the <picture> tag with <source> tags, which lets browsers pick the format they support best.

Adding width and height to prevent layout shift

When you don't tell the browser how big your image is, it has to download the entire file before it knows how much space to reserve on the page. While it's loading, the page layout can jump around — text moves, buttons shift position. This is called layout shift, and it makes the page feel broken.

Add width and height attributes to prevent this: <img src="photo.jpg" alt="A photo" width="400" height="300">. The browser reserves that space immediately, so nothing moves when the image loads. The numbers are in pixels by default.

If you set only width or only height, the browser scales the other dimension automatically to keep the image from stretching. If you set both to different proportions than the actual image, the image will distort, so make sure the ratio matches. For example, if your image is 800 by 600 pixels, you can safely use width="400" height="300" (both half the original), but not width="400" height="200".

Making images responsive on different screen sizes

A fixed width like width="400" works fine on a desktop, but on a phone it might be too wide for the screen. Responsive images scale to fit the device they're viewed on. The simplest way is to set width as a percentage instead of pixels: <img src="photo.jpg" alt="A photo" width="100%" height="auto">. This makes the image fill its container, and height="auto" keeps the proportions correct.

You can also use CSS to control image size. Add a style attribute: <img src="photo.jpg" alt="A photo" style="max-width: 100%; height: auto;">. The max-width: 100% means the image won't grow larger than its container, and height: auto maintains the correct proportions.

For more control, use the <picture> tag with multiple <source> tags to serve different image sizes to different devices. This is more complex but lets you send a smaller image to phones and a larger one to desktops, saving bandwidth on mobile.

Common mistakes and how to fix them

The most common mistake is a wrong file path. If your image doesn't appear, check that the filename matches exactly — "Photo.jpg" and "photo.jpg" are different on most servers. Check that the file actually exists in the location you specified. Open your browser's developer tools (usually F12 or right-click and select "Inspect"), go to the Console tab, and look for error messages about the image.

Another mistake is forgetting the alt attribute. Search engines and screen readers can't understand images without it, so your page becomes less accessible and less searchable. Always write a short, clear description of what the image shows.

Oversized image files slow down your page. A photo straight from a camera can be several megabytes; compress it before uploading. Free tools like TinyPNG or your operating system's built-in image editor can shrink file size without obvious quality loss. Aim for under 500 KB for most web images.

Frequently Asked Questions

Can I use an image from another website in my HTML?

Yes, by using the full web address in src: <img src="https://example.com/image.jpg">. However, you're relying on that server to stay online, and the image owner might move or delete it. For your own website, download the image and host it yourself.

What size should my image be?

It depends on where it appears. A thumbnail might be 150 by 150 pixels, a blog post image 600 to 800 pixels wide, and a full-width banner 1200 pixels or more. Start with the largest size you'll display it at, then compress the file. Larger images look sharper but load slower.

Why does my image look blurry?

The image is probably being stretched larger than its original size. If your image is 300 pixels wide and you set width="600", the browser enlarges it, making it blurry. Use an image that's already the size you need, or make it larger than you need and scale it down instead.

Do I need to close the img tag?

No. The <img> tag is self-closing, meaning it doesn't have a separate closing tag like </img>. Some people write <img /> with a slash at the end, but modern HTML doesn't require it.

How do I make an image a clickable link?

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