The img tag is how you put a picture on a webpage

To display a picture on a webpage, you use the img tag. This 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 location of your image file. The alt attribute holds text that describes the picture — this text appears if the image fails to load, and it helps people using screen readers understand what the picture shows.

You place the img tag wherever you want the picture to appear on your page, usually inside a paragraph or a div. The browser will display the image at its original size unless you add width and height attributes to resize it.

Key Takeaways

  • The img tag syntax is <img src="filename.jpg" alt="description">, and it does not need a closing tag.
  • The src attribute must point to the correct file path — either a filename in the same folder, a subfolder path, or a full web address.
  • The alt attribute should describe what the picture shows in a few words, and it displays if the image fails to load.
  • You can control image size by adding width and height attributes, or by using CSS to style the image.
  • Common image formats for the web are JPG, PNG, and GIF — each has different uses depending on the type of picture.

How to write the src attribute correctly

The src attribute is the path to your image file. If your image is in the same folder as your HTML file, you only need the filename: <img src="dog.jpg" alt="brown dog">. If the image is in a subfolder called "images", the path becomes: <img src="images/dog.jpg" alt="brown dog">.

You can also link to an image hosted on another website by using the full web address: <img src="https://example.com/images/dog.jpg" alt="brown dog">. However, linking to someone else's image file this way uses their server's bandwidth and can break if they move or delete the file.

The most common mistake is typing the wrong path. If your image does not appear on the page, open your browser's developer tools (usually by pressing F12), go to the Console tab, and look for an error message that tells you the file was not found. This tells you the path is wrong.

Writing a useful alt attribute

The alt attribute holds a short text description of the image. Write it as if you were describing the picture to someone who cannot see it. For a photo of a brown dog sitting on grass, write: alt="brown dog sitting on grass". For a logo, write: alt="Company name logo". For a chart showing sales data, write: alt="bar chart showing sales by quarter".

Keep alt text brief — usually under 125 characters. The goal is to convey what the image shows, not to write a paragraph. If the image is purely decorative and adds nothing to the meaning of the page, you can use an empty alt attribute: alt="". This tells screen readers to skip the image entirely.

The alt text appears in the browser if the image file fails to load or if the user has images disabled. It also helps search engines understand what your images show, which can improve how your page ranks in search results.

Controlling image size with width and height

By default, the browser displays an image at its original size. To make it smaller or larger, add width and height attributes: <img src="dog.jpg" alt="brown dog" width="300" height="200">. The numbers represent pixels — so this image will display 300 pixels wide and 200 pixels tall.

If you only set the width, the browser automatically adjusts the height to keep the image from looking stretched or squashed. For example, <img src="dog.jpg" alt="brown dog" width="300"> will make the image 300 pixels wide and scale the height proportionally. This is usually the safest approach.

For responsive design — where images resize to fit different screen sizes — use CSS instead of fixed pixel values. You can set the width to a percentage: width="100%" makes the image fill its container. This way, the image grows and shrinks as the browser window changes size.

Choosing the right image format

JPG is best for photographs and images with many colors. JPG files are smaller than PNG files, which makes pages load faster. Use JPG when you have a photo of a person, landscape, or any image with gradual color changes.

PNG is best for images that need a transparent background, like logos or icons. PNG also works well for images with sharp edges and solid colors. PNG files are larger than JPG, so avoid PNG for photographs unless you need the transparency.

GIF is an older format that works for straightforward images and animations. Most modern websites use PNG instead of GIF for static images, but GIF is still useful if you want an animated image that loops.

To check what format your image is, look at the filename extension — it will end in .jpg, .png, or .gif. If you have an image in the wrong format, you can convert it using free online tools or image editing software like GIMP.

Common mistakes and how to fix them

The most common mistake is a broken file path. If you type <img src="dog.jpg"> but the file is actually in an "images" subfolder, the browser will not find it. Always double-check that the path matches where the file actually lives on your computer or server.

Another mistake is forgetting the alt attribute. While the page will still display the image, the alt attribute is important for accessibility and search engine optimization. Always include it, even if it is just a short description.

Using an image that is too large also slows down your page. If your original image is 4000 pixels wide but you only display it at 300 pixels, you are wasting bandwidth. Resize the image file itself before uploading it, or use an image optimization tool to reduce file size without losing quality.

Frequently Asked Questions

What happens if the image file is not found?

The browser displays a broken image icon (usually a small picture frame with an X) where the image should appear. Open your browser's developer tools and check the Console tab for an error message that tells you the file path is wrong or the file does not exist.

Can I use an image from another website?

Yes, you can link to an image hosted elsewhere by using the full web address in the src attribute. However, this uses that website's bandwidth and the image may disappear if they move or delete the file. It is better to read the image and host it on your own server.

Do I have to specify width and height?

No, the image will display at its original size without them. However, adding width and height helps the browser reserve space for the image before it loads, which prevents the page layout from shifting when the image appears.

What is the difference between alt text and a title attribute?

The alt attribute describes what the image shows and displays if the image fails to load. The title attribute is optional and shows a tooltip when you hover over the image. Always use alt; title is extra.

How do I make an image clickable?

Wrap the img tag inside an anchor tag: <a href="page.html"><img src="dog.jpg" alt="brown dog"></a>. Now clicking the image will navigate to the page specified in the href attribute.