The Basic Image Tag

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

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

The src attribute tells the browser where to find the image file. The alt attribute provides text that appears if the image fails to load and helps screen readers describe the image to people with vision loss. Both matter — src makes the image show up, alt makes it accessible.

Unlike most HTML tags, <img> does not have a closing tag. It is a self-closing tag that stands alone in your code.

Key Takeaways

  • The <img> tag requires a src attribute pointing to your image file and 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).
  • The width and height attributes let you control how large the image displays, and you can set just one to keep the image proportional.
  • Common image formats for the web are JPG for photographs, PNG for images with transparency, and WebP for smaller file sizes.

Relative vs. Absolute File Paths

A relative path points to a file inside your own project folder. If your HTML file and image file are in the same folder, you only need the filename:

<img src="sunset.jpg" alt="Sunset over the ocean">

If the image is in a subfolder called "images", use a forward slash to navigate into it:

<img src="images/sunset.jpg" alt="Sunset over the ocean">

An absolute path is a full web address. Use this when the image lives on a different website:

<img src="https://example.com/images/sunset.jpg" alt="Sunset over the ocean">

Relative paths work offline and move with your project. Absolute paths let you pull images from anywhere on the internet, but if that website goes down or moves the image, your page will show a broken image icon instead.

Setting Image Width and Height

By default, images display at their actual pixel size. To make an image smaller or larger, add width and height attributes:

<img src="sunset.jpg" alt="Sunset over the ocean" width="400" height="300">

If you set only the width, the browser automatically scales the height to keep the image proportional. This prevents the stretched or squashed look that happens when you change both dimensions unevenly:

<img src="sunset.jpg" alt="Sunset over the ocean" width="400">

You can also use percentages to make an image scale with the page size, though this works best when the image is inside a container with a defined width. Pixels (like 400) give you exact control; percentages (like 50%) make the image responsive to screen size.

Image Formats and File Types

JPG is the standard format for photographs and complex images with many colors. It compresses well, making files smaller, but loses some detail in the process. Use JPG when file size matters and perfect clarity does not.

PNG preserves every pixel exactly and supports transparent backgrounds — areas you can see through. Use PNG for logos, icons, and images where you need crisp edges or transparency. PNG files are larger than JPG, so they take longer to download.

WebP is a newer format that compresses better than both JPG and PNG while keeping quality high. Not all older browsers support it, so use it only when you know your audience has modern browsers, or provide a JPG fallback.

GIF works for simple images and animations, but produces larger files than PNG for still images. GIF is rarely the best choice for new projects.

Making Images Responsive

On phones and tablets, a fixed-width image might be too large or too small. To make an image scale with the screen, set the width to a percentage and let the height adjust automatically:

<img src="sunset.jpg" alt="Sunset over the ocean" width="100%" height="auto">

Wrapping the image in a container with a max-width prevents it from stretching too large on big screens:

<div style="max-width: 600px;"><img src="sunset.jpg" alt="Sunset over the ocean" width="100%" height="auto"></div>

This approach works on all devices and browsers. The image shrinks on small screens and stops growing once it reaches 600 pixels wide on larger screens.

Common Mistakes to Avoid

Forgetting the alt attribute is the most common mistake. Even if you think the image is purely decorative, include an alt attribute — leave it empty with alt="" if the image truly adds no information, but never omit it entirely.

Pointing to an image that no longer exists breaks your page. If you move image files to a different folder or delete them, update the src path or the image will show as broken. Test your links after reorganizing files.

Using an image that is much larger than you display it wastes bandwidth. If you display an image at 400 pixels wide, do not upload a 2000-pixel version. Resize the image file before uploading to save loading time.

Forgetting to close the alt attribute or misspelling src will break the tag. The browser will not display the image if the tag syntax is wrong. Check that all quotes match and attribute names are spelled correctly.

Frequently Asked Questions

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

Yes, by using the full web address in the src attribute. However, this uses bandwidth from the other website's server, and if they move or delete the image, your page shows a broken link. For images you plan to keep, download them and store them in your own project folder instead.

What size should my image file be?

Resize your image to the largest width it will display at on any device. A 600-pixel-wide image is plenty for most web use. Smaller files load faster. Use an image editor or online tool to resize before uploading.

Why does my image look blurry?

The image is probably being stretched larger than its actual pixel size. If your image is 300 pixels wide but you display it at 600 pixels, it will look blurry. Either upload a larger version or display it smaller.

How do I make an image clickable?

Wrap the <img> tag in an <a> link tag: <a href="page.html"><img src="photo.jpg" alt="Description"></a>. Clicking the image will navigate to the URL in the href attribute.

Should I use width and height attributes or CSS?

Both work. Attributes are simpler for one-off images. CSS is better if you want to resize many images the same way or make images responsive across different screen sizes. For modern responsive design, use CSS or percentage widths with height="auto".