The img tag is how you put a picture on a web page

To display a picture on a web page, you use the img tag. It is a single line of code that tells the browser where to find the image file and how to show it. Unlike most HTML tags, the img tag does not have a closing tag — it stands alone.

The basic structure looks like this: <img src="picture.jpg" alt="description of picture">. The src attribute tells the browser the file name or web address of the picture. The alt attribute holds text that describes the picture — this text appears if the image fails to load, and it also helps people using screen readers understand what the picture shows.

Key Takeaways

  • The img tag requires a src attribute that points to the image file, either by file name or full web address.
  • Always include an alt attribute with a short description of what the picture shows, even if it seems obvious to you.
  • Image files must be in a format the browser recognizes, such as .jpg, .png, .gif, or .webp.
  • You can control how large the picture appears by adding width and height attributes to the img tag.

Where to point the src attribute

The src attribute can point to an image in two ways: by file name alone, or by a full web address. If the image file is in the same folder as your HTML file, you can use just the file name: <img src="dog.jpg" alt="brown dog sitting">. If the image is in a subfolder, include the folder name: <img src="images/dog.jpg" alt="brown dog sitting">.

If the image lives on another website, use the full web address: <img src="https://example.com/images/dog.jpg" alt="brown dog sitting">. Be aware that if that website removes the image or changes its location, your page will show a broken image icon instead. For images you control, keeping the file in your own folder is more reliable.

Writing a useful alt attribute

The alt text should describe what the picture shows in a way that makes sense to someone who cannot see it. Do not write "image" or "picture" — that is already clear from context. Instead, describe the content: "woman in red jacket standing on a mountain" or "screenshot of a spreadsheet with three columns of data".

Keep alt text under 125 characters. If the picture is purely decorative and adds nothing to the meaning of the page, you can leave the alt attribute empty: <img src="divider.png" alt="">. This tells screen readers to skip the image entirely, which is the right choice for spacing graphics or background decorations.

Controlling the size of the image

By default, the browser displays an image at its actual file size. If your image is very large, it will take up most of the page. To make it smaller, add width and height attributes: <img src="dog.jpg" alt="brown dog sitting" width="300" height="200">. The numbers are in pixels.

You can also set only the width and let the browser scale the height automatically to keep the picture from looking stretched: <img src="dog.jpg" alt="brown dog sitting" width="300">. This is often the better choice because it preserves the original shape of the picture. If you set both width and height to different proportions than the original image, the picture will look distorted.

Image file formats that browsers understand

The most common image formats are .jpg (for photographs), .png (for graphics and images with transparent backgrounds), .gif (for straightforward graphics and animations), and .webp (a newer format that creates smaller files). All modern browsers support these four formats.

If you try to use a format the browser does not recognize — such as .bmp or .tiff — the image will not display. You will see a broken image icon instead. If you have an image in an unsupported format, you can convert it using free online tools or image editing software like GIMP before adding it to your page.

Common mistakes when adding images

The most frequent error is a typo in the file name or path. If you write <img src="dog.jpg"> but the file is actually named Dog.jpg (with a capital D), the browser will not find it on most web servers. File names are case-sensitive on Linux and Mac servers, though not always on Windows servers. To avoid this, use lowercase letters and no spaces in image file names.

Another common problem is forgetting the alt attribute entirely. While the page will still display, you lose the benefit of describing the image to people using assistive technology, and you make your page less accessible. It takes only a few seconds to write useful alt text, and it is worth doing every time.

A third mistake is using an image from another website without permission. Even if you can see the image in your browser, that does not mean you have the right to copy it. Always use images you own, have created yourself, or have a license to use.

Frequently Asked Questions

What if the image file is not found?

The browser will display a broken image icon (usually a small picture frame with an X) instead of the image. Check that the file name matches exactly, including capitalization, and that the file is in the location you specified in the src attribute. Open the image file directly in your browser to confirm it exists and is readable.

Can I use an image from Google Images on my website?

Not without permission. Most images on Google Images are owned by someone else and protected by copyright. You can use images that are labeled for reuse, or search for images with a Creative Commons license that permits the use you have in mind. Always read the license terms before using an image.

Does the order of attributes in the img tag matter?

No. You can write <img src="dog.jpg" alt="brown dog"> or <img alt="brown dog" src="dog.jpg"> and the browser will display the image the same way. The order of attributes does not affect how the page works, though many developers put src first by convention.

What is the difference between width and height in pixels versus percentages?

Pixels are a fixed size — 300 pixels is always 300 pixels. Percentages are relative to the container holding the image. If you write width="50%", the image will be half as wide as its parent element. Percentages are useful when you want the image to resize based on the size of the browser window.