The Basic Image Tag

To add a picture to an HTML page, you use the <img> tag. This tag tells the browser where to find the image file and displays it on the page. Unlike most HTML tags, the <img> tag does not have a closing tag — it stands alone.

The simplest version looks like this: <img src="picture.jpg">. The src attribute tells the browser the name and location of the image file. If the image file is in the same folder as your HTML file, you only need the filename. If it is in a different folder, you need to include the path to that folder.

For example, if your image is in a subfolder called "images", you would write: <img src="images/picture.jpg">. If the image is on another website, you use the full web address: <img src="https://example.com/picture.jpg">.

Key Takeaways

  • The <img> tag is self-closing and requires only the src attribute to display an image on your page.
  • Always include the alt attribute with a description of the image, which helps people using screen readers and shows text if the image fails to load.
  • Image file paths can be relative (pointing to a file on your own server) or absolute (pointing to a full web address).
  • The width and height attributes let you control how large the image appears, and you can use them to prevent layout shifts while the image loads.

Adding Alt Text for Accessibility and Reliability

The alt attribute is not optional — it serves two critical purposes. First, it provides a text description for people using screen readers or other assistive technology. Second, if the image fails to load (because the file is missing or the server is down), the alt text displays instead, so visitors still understand what was supposed to be there.

Write alt text that describes what the image shows, not what it is. Instead of "image" or "photo", write something like <img src="sunset.jpg" alt="Orange and pink sunset over a calm ocean">. Keep it concise — usually one sentence is enough. If the image is purely decorative and adds nothing to the meaning of the page, you can use an empty alt attribute: <img src="divider.jpg" alt="">.

Controlling Image Size with Width and Height

By default, images display at their actual file size. If your image file is 1200 pixels wide but your page layout only has room for 400 pixels, the image will overflow and break your design. You control this with the width and height attributes.

You can set just the width and let the browser scale the height automatically to keep the image proportional: <img src="picture.jpg" alt="Description" width="400">. The number is in pixels by default. If you set both width and height to different proportions than the original image, the image will stretch or squash, which usually looks bad. It is better to set one dimension and let the other scale automatically.

Setting width and height also prevents a layout shift when the page loads. Without these attributes, the browser does not know how much space to reserve for the image, so the page layout can jump around as the image loads. Adding the dimensions tells the browser to hold that space from the start.

Relative vs. Absolute File Paths

A relative path points to a file on your own server, relative to where your HTML file is located. If your HTML file and image are in the same folder, use just the filename: <img src="photo.jpg">. If the image is in a subfolder, include the folder name: <img src="images/photo.jpg">. If the image is in a parent folder (one level up), use two dots: <img src="../photo.jpg">.

An absolute path is a complete web address that works from anywhere: <img src="https://example.com/images/photo.jpg">. Use absolute paths when you are linking to an image on a different website. Be aware that if that website removes the image or changes its location, your page will show a broken image. For images you control, relative paths are usually better because they keep your site portable — you can move your entire folder to a different server and all the links still work.

Common Image Formats and When to Use Them

JPG (or JPEG) is best for photographs and images with many colors. It compresses well, so the file size stays small, but it loses some detail in the compression. PNG is better for images that need sharp edges, like logos or screenshots, and it supports transparency (see-through areas). GIF is an older format that works for straightforward images and animations, but PNG usually produces better results for static images. WebP is a newer format that compresses better than JPG or PNG, but not all older browsers support it.

The browser displays whatever format you put in the src attribute, so choose based on what your image needs. A photograph should be JPG. A logo should be PNG. If you are not sure, PNG is a safe choice for most things because it handles both color and transparency well.

Wrapping Images in Links

You can make an image clickable by wrapping the <img> tag in an <a> tag (the link tag). When someone clicks the image, they go to the URL you specify:

<a href="https://example.com"><img src="picture.jpg" alt="Description"></a>

This is common for logos that link to the home page, or for thumbnail images that link to a larger version. The image itself does not change — you are just wrapping it in a clickable link. The browser usually adds a border around linked images to show they are clickable, though you can remove this with CSS if you want.

Responsive Images That Scale to Different Screen Sizes

On a phone, a 400-pixel-wide image might be too large. On a desktop, it might be too small. The max-width property in CSS lets you make images scale to fit their container instead of staying a fixed size. Add this to your CSS: img { max-width: 100%; height: auto; }. This tells every image to never be wider than its container, and to scale its height automatically to stay proportional.

For more control, you can use the srcset attribute to provide different image files for different screen sizes. This is more advanced and requires multiple versions of the same image at different resolutions, but it lets you serve smaller files to phones and larger files to desktops, which saves bandwidth and loads faster.

Frequently Asked Questions

What happens if the image file is missing or the link is broken?

The browser displays a broken image icon (usually a small picture frame with an X) and shows the alt text if you included it. Visitors will see that something was supposed to be there but could not load. Always test your images in a browser after you add them to make sure the paths are correct.

Can I use an image from another website without downloading it?

Yes — you can link directly to an image on another website using its full URL in the src attribute. However, this uses bandwidth from that website's server, and if they move or delete the image, your page will show a broken image. It is better to read the image and host it on your own server if you have permission to use it.

How do I make an image appear side by side with text?

By default, images are inline elements, so text will wrap around them. You can control this with CSS. Use float: left; to make text wrap to the right of the image, or use display: block; to make the image take up its own line. For more precise control, use CSS Grid or Flexbox to position the image and text exactly where you want them.

What is the difference between width and max-width?

width sets a fixed size — the image will always be that many pixels wide. max-width sets a maximum size — the image will be smaller if its container is smaller, but will never be larger than the max-width value. For responsive design that works on phones and desktops, max-width is usually the better choice.