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 provides text that appears if the image does not load, and it helps people using screen readers understand what the photo shows. Both matter — src makes the photo appear, alt makes your page work for everyone.

The <img> tag does not need a closing tag. It is a self-closing tag, meaning the browser knows it is complete after the final >.

Key Takeaways

  • The <img> tag with a src attribute is all you need to display a photo, but always include an alt attribute describing what the image shows.
  • 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 photo size with width and height attributes, or with CSS styling for more flexible layouts.

Relative paths versus absolute paths

A relative path points to a file inside your project folder. If your image is in the same folder as your HTML file, you write:

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

If your image is in a subfolder called images, you write:

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

An absolute path is a full web address. This works for images hosted anywhere on the internet:

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

Relative paths are simpler when you are building a site on your own computer. Absolute paths let you use images from other websites, but be aware that those images can change or disappear without warning.

Setting the width and height of your photo

By default, an image displays at its actual size. To make it smaller or larger, add width and height attributes:

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

The numbers are in pixels. If you only set the width, most browsers will automatically adjust the height to keep the photo from looking stretched. Setting both can distort the image if the proportions do not match the original.

For more control over how images behave on different screen sizes, use CSS instead. You can set a max-width of 100% so the photo shrinks on small screens but never grows larger than its original size.

Choosing the right image format

JPG is the standard format for photographs. It compresses images to smaller file sizes, which means pages load faster. JPG works well for photos with many colors and details.

PNG is better when you need a transparent background or when the image has sharp edges and text. PNG files are usually larger than JPG, but they preserve quality without loss.

WebP is a newer format that creates smaller files than both JPG and PNG while keeping good quality. Not all older browsers support it, but most modern ones do. You can offer WebP to newer browsers and fall back to JPG or PNG for older ones using the <picture> tag.

For web use, avoid BMP and TIFF formats — they create very large files that slow down your page. GIF works for simple animations but is outdated for still images.

Making photos responsive with the picture tag

The <picture> tag lets you show different images depending on the screen size or browser capability. This is useful when you want a smaller, cropped version on phones and a full version on desktop:

<picture>  <source media="(max-width: 600px)" srcset="photo-small.jpg">  <source media="(max-width: 1200px)" srcset="photo-medium.jpg">  <img src="photo-large.jpg" alt="My photo"></picture>

The browser reads the <source> tags from top to bottom and uses the first one that matches. If none match, it falls back to the <img> tag. This approach saves bandwidth on mobile devices by not downloading a full-size image that will be shrunk anyway.

Common mistakes when adding photos

Forgetting the alt attribute is the most common mistake. Without it, screen readers cannot describe the image to people with vision loss, and the page looks broken if the image file goes missing.

Using an image path that does not exist will show a broken image icon instead of your photo. Double-check that the filename matches exactly — "Photo.jpg" and "photo.jpg" are different on most web servers. Also verify that the folder path is correct.

Uploading very large image files slows down your page. Before adding a photo to your site, resize it to the dimensions you actually need and compress it. Tools like TinyPNG or ImageOptim reduce file size without visible quality loss.

Embedding images from other websites without permission can violate copyright. If you use someone else's photo, make sure you have the right to do so, and consider giving credit in the alt text or a caption.

Frequently Asked Questions

What does the alt attribute do if the image loads fine?

The alt text appears when someone hovers over the image in some browsers, but its main purpose is accessibility. Screen readers read the alt text aloud to people who cannot see the image. Search engines also use alt text to understand what your images show, which can help your page rank better in image search results.

Can I use an image from Google Images on my website?

Most images on Google Images are protected by copyright. Using them without permission is illegal, even if you change the filename. Instead, look for images with a Creative Commons license that allows reuse, or purchase a license from a stock photo site. Always read the license terms before using someone else's photo.

Why does my image look blurry on high-resolution screens?

High-resolution screens like those on newer phones and tablets have more pixels per inch. If you upload a small image and stretch it to fill a large space, it will look blurry. Provide larger image files or use the <picture> tag to serve different sizes to different devices.

How do I add a caption below a photo?

Wrap the <img> tag and a <figcaption> tag inside a <figure> tag. The <figcaption> holds your caption text. This tells screen readers and search engines that the caption belongs to that specific image.

What image size should I use for my website?

Start by deciding how wide the image will be on desktop. If it fills a 600-pixel-wide column, upload an image around 1200 pixels wide so it looks sharp on high-resolution screens. For full-width images, 1920 pixels is a safe maximum. Compress the file afterward to keep page load times reasonable.