How to Add an Image in HTML

The basic image tag syntax

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:

The src attribute tells the browser where to find the image file. The alt attribute provides text that displays if the image fails to load, and it helps screen readers describe the image to people with vision impairments. Both matter — src makes the image appear, alt makes your page accessible and more useful when images don't load.

The <img> tag is self-closing, meaning it does not need a closing tag like </img>. You can write it with or without a forward slash at the end: <img src="image.jpg" alt="text"> or <img src="image.jpg" alt="text" /> — both work in modern HTML.

Key Takeaways

Use the <img> tag with a src attribute pointing to your image file path, either relative (same folder or subfolder) or absolute (full web address).
Always include an alt attribute with a short description of what the image shows, for accessibility and when images fail to load.
Image file paths can be relative to your HTML file's location or absolute URLs to images hosted anywhere on the web.
You can control image size with width and height attributes, and position images within text or inside containers using HTML structure.
Common image formats for web use are JPG (photographs), PNG (graphics with transparency), and WebP (smaller file sizes).

Relative vs. absolute image paths

An image path tells the browser where to find your image file. A relative path is relative to where your HTML file sits. If your HTML file and image are in the same folder, you only need the filename: <img src="photo.jpg" alt="My photo">. If the image is in a subfolder called "images", use <img src="images/photo.jpg" alt="My photo">.

An absolute path is the full web address to the image, starting with http:// or https://. Use this when the image is hosted on a different website: <img src="https://example.com/images/photo.jpg" alt="My photo">. Absolute paths work from anywhere, but if the other website removes or moves the image, your page will show a broken image icon instead.

For images you control, relative paths are usually better — they keep your HTML and images together, and moving your whole folder to a new location does not break the links. For images from other sites, absolute paths are necessary, but understand you depend on that site keeping the image in the same place.

Setting image width and height

Control how large an image appears on the page using the width and height attributes. You can set them in pixels or as a percentage of the container:

If you set only width or only height, the browser automatically scales the other dimension to keep the image from looking stretched or squashed. Setting both can distort the image if the numbers do not match its original proportions. A common practice is to set width to a percentage (like width="100%") so the image shrinks and grows with the page, and let height adjust automatically.

You can also control image size with CSS in a style sheet, which gives you more flexibility — for example, making an image smaller on phones and larger on desktop screens. For simple, fixed sizes, the width and height attributes in the HTML tag are straightforward and work without any CSS knowledge.

Using images inside links and containers

To make an image clickable, wrap the <img> tag inside an <a> (anchor) tag:

When a visitor clicks the image, they go to the URL in the href attribute. The alt text should describe where the link goes or what happens when clicked, not just what the image shows.

You can also place images inside other containers like <div>, <section>, or <figure> tags to organize them on the page. A <figure> tag is useful when you want to add a caption:

<figure><img src="photo.jpg" alt="Sunset over water"><figcaption>Sunset at the beach</figcaption></figure>

Image formats and file size

JPG is best for photographs and images with many colors. It compresses well, making files smaller, but loses some detail. PNG works better for graphics, logos, and images that need a transparent background — it preserves every detail but creates larger files. WebP is a newer format that compresses better than both JPG and PNG, making pages load faster, but older browsers may not support it.

Smaller image files load faster, which matters for page speed and for visitors on slow connections. Before adding an image to your page, consider resizing it to the width you actually need and compressing it with a tool like TinyPNG or your image editor. A photograph that is 4000 pixels wide but displays at 400 pixels wastes bandwidth and slows your page down.

If you use WebP, you can provide a fallback for older browsers by using the <picture> tag, which lets you offer multiple formats and lets the browser pick the one it supports. For most cases, JPG or PNG is sufficient and widely supported.

Common mistakes and how to fix them

The most common mistake is a broken image path — the browser cannot find the file. Check that the filename and folder path in your src attribute exactly match the actual file location. Paths are case-sensitive on most web servers, so "Photo.jpg" and "photo.jpg" are different files. If you see a broken image icon, double-check the path first.

Another mistake is forgetting the alt attribute. Every <img> tag should have one, even if it is just a decorative image. For decorative images that do not add meaning, use an empty alt attribute: <img src="decoration.jpg" alt="">. This tells screen readers to skip it, which is the right behavior for images that are only visual filler.

Images that are too large in file size slow down your page. If an image takes several seconds to load, resize it or compress it before uploading. Images that are too large in display size can also break your page layout on phones — using width="100%" or setting a max-width in CSS prevents this.

Frequently Asked Questions

What is the difference between src and alt?

The src attribute tells the browser where the image file is located and makes the image appear on the page. The alt attribute provides text that displays if the image fails to load and helps screen readers describe the image to people who cannot see it. Both are important — src for functionality, alt for accessibility and resilience.

Can I use an image from another website?

Technically yes, using the full URL in the src attribute. However, you should have permission from the image owner. Linking to someone else's image without permission can be copyright infringement, and if they move or delete the image, your page will show a broken image. Download the image and host it yourself when possible.

How do I make an image responsive so it looks good on phones and desktops?

Set the width to a percentage like width="100%" and let the height adjust automatically. This makes the image scale with the page. For more control, use CSS with max-width to set a maximum size, and media queries to change the size on different screen sizes. This requires CSS knowledge but gives you precise control over how images look on different devices.

What image format should I use?

Use JPG for photographs, PNG for graphics and logos, and WebP if you want smaller file sizes and do not need to support very old browsers. Compress your images before uploading to keep file sizes small and pages loading fast. Most modern websites use a mix of formats depending on the content.

Why does my image look blurry or stretched?

Blurriness usually means the image is being displayed larger than its actual size — a 400-pixel-wide image displayed at 800 pixels will look fuzzy. Stretching happens when you set both width and height to values that do not match the image's original proportions. Let one dimension adjust automatically, or use an image editor to resize the file before uploading.

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.