The basic HTML image tag does the job in one line

To display an image on a web page, you use the <img> tag. Unlike most HTML tags, the <img> tag does not have an opening and closing pair — it is self-closing. The tag tells the browser where to find the image file and how to display it.

The simplest version looks like this:

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

The src attribute tells the browser the file name or web address of the image. The alt attribute holds text that appears if the image does not load, and it also helps people using screen readers understand what the image shows. Both attributes matter — src makes the image appear, and alt makes your page work for everyone.

Key Takeaways

  • The <img> tag is self-closing and requires a src attribute pointing to the image file location.
  • The alt attribute should describe what the image shows in a few words, and it displays if the image fails to load.
  • Image file paths can be relative (pointing to a file in your own folder) or absolute (a full web address starting with http).
  • Width and height attributes help prevent layout shifts when the page loads, though you can also set these in CSS.
  • Common image formats for the web are JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes.

Where to point the src attribute: file paths and web addresses

The src attribute can point to an image in two ways: a relative path or an absolute path. A relative path assumes the image is stored in a folder on your own website. If your HTML file and image file are in the same folder, you write just the file name: src="photo.jpg". If the image is in a subfolder called images, you write src="images/photo.jpg". If you need to go up one folder level, you use src="../photo.jpg".

An absolute path is a full web address that works no matter where your HTML file lives. It starts with http:// or https:// and points to an image anywhere on the internet: src="https://example.com/images/photo.jpg". Absolute paths are useful when you want to display an image hosted on someone else's server, but they also mean the image will not show if that server goes down or removes the file.

For images you control, relative paths are usually better because they keep your files portable — you can move your whole folder to a different server and the images will still load. For images from other websites, absolute paths are necessary, but be aware that you are depending on another site to keep that image available.

The alt attribute: what to write when an image does not load

The alt attribute holds a text description that appears in two situations: when the image file fails to load, and when someone using a screen reader visits your page. Write alt text that describes what the image shows in a straightforward way. For a photo of a dog, write alt="Brown dog sitting on grass". For a logo, write alt="Company name logo". For a decorative image that adds no information, you can leave it empty: alt="".

Keep alt text brief — usually under 125 characters. The goal is to convey what the image shows, not to write a caption. If the image is a chart or diagram that contains important information, your alt text should summarize that information so someone who cannot see the image still understands it. For example, if a bar chart shows sales by quarter, your alt text might be alt="Sales increased from $50,000 in Q1 to $75,000 in Q4".

Browsers do not display alt text by default — you only see it if you hover over a broken image or if you use a screen reader. But search engines read alt text, and it helps them understand what your images show, which can improve how your page ranks in image search results.

Setting image width and height to prevent layout shift

When a browser loads a page, it reads the HTML first and starts laying out the content before images arrive. If you do not tell the browser how big an image will be, it reserves no space for it. When the image finally loads, the page suddenly shifts to make room, which is jarring for anyone reading. You can prevent this by adding width and height attributes:

<img src="photo.jpg" alt="A description" width="400" height="300">

The numbers are in pixels. If your image is 400 pixels wide and 300 pixels tall, you write those exact numbers. The browser then reserves that space before the image loads, and the page stays stable. If you only set width or only set height, the browser scales the other dimension automatically to keep the image from stretching.

You can also control image size with CSS instead of HTML attributes. Many developers prefer CSS because it keeps styling separate from content, but both methods work. If you use CSS, you do not need width and height in the HTML tag itself.

Common image formats and when to use each one

Different image formats have different strengths. JPG (or JPEG) is best for photographs because it compresses the image to a smaller file size while keeping quality high. A photo that is 2 MB as a PNG might be 200 KB as a JPG. PNG is best for graphics, logos, and images that need a transparent background — areas where you can see through to whatever is behind the image. WebP is a newer format that makes files even smaller than JPG while keeping quality high, but older browsers do not support it.

For most web pages, JPG works for photos and PNG works for everything else. If you want to use WebP for better performance, you can provide a fallback: the browser will use WebP if it understands it, and fall back to JPG or PNG if it does not. This requires a bit more HTML, but it is worth it if file size matters to you.

GIF is an older format that works for simple animations, but it produces large files. Avoid GIF unless you specifically need animation. SVG is a text-based format for logos and icons that scales to any size without losing quality, but it is not suitable for photographs.

Wrapping images in links and adding captions

To make an image clickable, wrap the <img> tag in an <a> tag:

<a href="https://example.com"><img src="photo.jpg" alt="A description"></a>

When someone clicks the image, they go to the URL in the href attribute. This is common for thumbnails that link to larger versions or for images that link to product pages.

To add a caption below an image, use the <figure> and <figcaption> tags:

<figure><img src="photo.jpg" alt="A description"><figcaption>This is the caption text</figcaption></figure>

The <figure> tag groups the image and caption together, and the <figcaption> tag holds the caption text. This tells the browser and screen readers that the caption belongs to that specific image, which is more meaningful than just putting text next to the image.

Responsive images that look good on phones and desktops

A single image size does not work well on all devices. A photo that looks good on a desktop monitor might be too large on a phone, wasting bandwidth and slowing the page down. You can use the srcset attribute to provide multiple versions of the same image at different sizes, and let the browser choose the right one:

<img src="photo.jpg" srcset="photo-small.jpg 480w, photo-medium.jpg 800w, photo-large.jpg 1200w" alt="A description">

The numbers after each file name (480w, 800w, 1200w) tell the browser the width of each image in pixels. The browser looks at the screen size and chooses the smallest image that still looks sharp, which saves bandwidth on phones and tablets. The src attribute is still required as a fallback for older browsers.

If you want more control, you can use the <picture> tag to serve completely different images for different screen sizes or image formats. This is more complex but useful when you want to crop or change an image for mobile, not just shrink it.

Frequently Asked Questions

What happens if the image file does not exist or the link is broken?

The browser shows a broken image icon (usually a small picture frame with an X) and displays the alt text. Visitors know something went wrong, but they can still read the alt text to understand what should have been there. Check your file paths carefully — relative paths are case-sensitive on most web servers, so photo.jpg and Photo.jpg are different files.

Can I use an image from another website without permission?

Technically, yes — you can link to any image on the internet with an absolute path. But you should not do this without permission. The image owner can delete it or change it, breaking your page. More importantly, using someone else's image without permission violates copyright. If you want to use an image, ask the owner or use images from free stock sites like Unsplash or Pexels.

Should I use width and height in HTML or in CSS?

Either works, but setting width and height in the HTML tag prevents layout shift while the page loads. If you set size only in CSS, the browser does not know how much space to reserve until the CSS loads. For best performance, use HTML attributes for width and height, and use CSS if you need to override them for specific situations like mobile screens.

What is the difference between alt text and a caption?

Alt text is for people who cannot see the image — it should describe what the image shows. A caption is visible text below the image that adds context or explanation for everyone. They serve different purposes. Alt text might be "A person holding a coffee cup," while a caption might be "Sarah takes a break during the morning meeting." Both can appear on the same image.

Why do some images load slowly even though the file size is small?

File size is only one factor. The image also depends on the visitor's internet speed and the server's response time. Slow servers or slow networks both cause delays. You can check how long images take to load using your browser's developer tools (press F12, then look at the Network tab). If an image is genuinely too large, convert it to WebP or compress it with a tool like TinyPNG.