How to Add Images to Your Web Pages With HTML

The basic way to add an image to a webpage

To display an image on a webpage, you use the <img> tag. This is a self-closing tag, meaning it does not need a closing tag like most HTML elements do. The tag tells the browser where to find the image file and how to display it.

The simplest version looks like this: <img src="image.jpg" alt="A description of the image">. The src attribute tells the browser the path to your image file. The alt attribute provides text that displays if the image cannot load, and it also helps people using screen readers understand what the image shows.

You can place this tag anywhere in the body of your HTML document where you want the image to appear. It will display at that location in the order your page reads from top to bottom.

Key Takeaways

The <img> tag requires two attributes: src (the path to your image file) and alt (a text description of what the image shows).
Image paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http or https).
Common image formats for the web are JPG for photographs, PNG for images with transparency, and WebP for smaller file sizes.
You can control image size with width and height attributes, and position images using CSS or by placing them inside other HTML elements.

Relative paths versus absolute paths

A relative path points to an image file stored in 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 the image is in a subfolder called "images", you write: <img src="images/photo.jpg" alt="My photo">.

An absolute path is a complete web address. You use this when the image lives on a different website or a different server. For example: <img src="https://example.com/images/photo.jpg" alt="My photo">. The browser downloads the image from that web address every time someone visits your page.

Relative paths are better for images you control and host yourself, because they load faster and still work if you move your entire project folder. Absolute paths are necessary when you want to display an image from another website, but that image can disappear if the other site removes it or changes the address.

Setting image width and height

By default, images display at their full size. You can make them smaller or larger by adding width and height attributes: <img src="photo.jpg" alt="My photo" width="300" height="200">. The numbers are in pixels.

If you set only the width or only the height, the browser automatically scales the other dimension to keep the image from looking stretched or squashed. For example, <img src="photo.jpg" alt="My photo" width="300"> will shrink the height proportionally.

For more precise control over spacing and positioning, you can use CSS instead of HTML attributes. CSS gives you options like centering an image, wrapping text around it, or making it responsive so it shrinks on smaller screens. Most web developers use CSS for styling and reserve HTML attributes for the basic structure.

Image formats and when to use each one

The format you choose affects file size and how the image looks. JPG (or JPEG) works best for photographs and complex images with many colors. It compresses the file to a smaller size, which means pages load faster. The trade-off is that JPG loses some detail when compressed.

PNG is better for images that need a transparent background, like logos or icons. It preserves every detail without compression loss, but the file size is usually larger than JPG. Use PNG when clarity matters more than file size.

WebP is a newer format that combines the best of both: it compresses like JPG but can have transparency like PNG, and the files are smaller than either. Not all older browsers support WebP, so you may need to provide a fallback image format for older devices.

GIF is rarely used for new projects. It works for simple images and animations, but PNG and WebP do the same job better.

Adding images inside links and other elements

You can place an image inside a link tag so clicking the image goes to another page. The code looks like this: <a href="page2.html"><img src="photo.jpg" alt="Click to go to page 2"></a>. The image becomes clickable, and the alt text should describe what happens when you click it.

You can also place images inside other containers like divs or sections to group them with text or control their layout. For example, you might put an image and a paragraph inside a div, then use CSS to position them side by side or stack them vertically on mobile devices.

When an image is part of a larger design, the alt text should still describe what the image shows, not what it does. Write "A sunset over mountains" instead of "Click here to see more photos".

Common mistakes and how to avoid them

The most common mistake is forgetting the alt attribute. Every image needs one, even if the alt text is just a period for decorative images that do not add meaning to the page. Screen reader users and people on slow connections depend on alt text to understand your page.

Another mistake is using the wrong file path. If you write <img src="photo.jpg"> but the file is actually in an "images" folder, the browser will not find it and the image will not display. Check that the path matches your actual folder structure.

Using images that are too large also slows down your page. A photograph taken on a phone might be 4000 pixels wide, but you probably only need 600 or 800 pixels for a webpage. Resize images before uploading them, or use CSS to shrink them. This makes pages load faster for visitors.

Finally, do not use images you do not have permission to use. If you download an image from another website, check whether it is free to use or if you need to ask the owner first. Many free image sites like Unsplash and Pexels let you use photos without asking, but always read their terms.

Frequently Asked Questions

What if my image does not show up on the page?

Check three things: the file path is correct and matches your folder structure, the file name spelling and capitalization match exactly, and the file format is supported (JPG, PNG, WebP, or GIF). Open your browser's developer tools (usually F12) and look at the Console tab for error messages that tell you what went wrong.

Can I use an image from another website on my page?

Technically yes, but you should not without permission. You can write the full web address in the src attribute, but the image will disappear if the other site removes it or blocks access. Always download images you have permission to use and host them yourself instead.

How do I make images responsive so they shrink on mobile phones?

Use CSS instead of fixed width and height. Write width: 100%; and max-width: 600px; to make an image fill its container but never grow larger than 600 pixels. This way the image shrinks on small screens and stays readable on large ones.

What is the difference between width and height attributes and CSS sizing?

HTML attributes set a fixed size in pixels. CSS lets you use percentages, relative units, and media queries to change size based on screen width. CSS is more flexible and is the standard way to style modern websites. Use HTML attributes only when you need a quick fixed size.

Do I need to compress my images before uploading them?

Yes. Images straight from a camera or phone are usually much larger than necessary for a webpage. Use free tools like TinyPNG or ImageOptim to reduce file size without visible quality loss. Smaller files mean faster page loads for your visitors.

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.