The img tag is how you place an image on a web page

To display an image in HTML, you use a single tag called <img>. Unlike most HTML tags, the img tag does not have an opening and closing pair — it stands alone and tells the browser where to find the image file and how to show it. The tag needs two pieces of information: the location of the image file and a text description of what the image shows.

The simplest img tag looks like this:

<img src="photo.jpg" alt="A golden retriever sitting on grass">

The src attribute tells the browser which file to load. The alt attribute holds text that appears if the image fails to load, and it also helps people using screen readers understand what the image shows. Both attributes are important — src makes the image appear, and alt makes your page work for everyone.

Key Takeaways

  • The img tag uses src to point to your image file and alt to describe what the image shows.
  • Image file paths can be relative (pointing to a file in your project folder) or absolute (a full web address starting with http).
  • Common image formats for the web are JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes.
  • You can control image size by adding width and height attributes, which also prevents the page from jumping around while images load.

How to write the src attribute correctly

The src attribute must point to where your image file actually lives. If the image is in the same folder as your HTML file, you only need the filename: <img src="sunset.jpg" alt="Orange sunset over water">. This is called a relative path because it is relative to where your HTML file sits.

If your image is in a subfolder, include the folder name: <img src="images/sunset.jpg" alt="Orange sunset over water">. If you go up one level to a parent folder, use two dots: <img src="../sunset.jpg" alt="Orange sunset over water">.

You can also use an absolute path — a complete web address that starts with http or https. This works when the image lives on another website: <img src="https://example.com/images/sunset.jpg" alt="Orange sunset over water">. Absolute paths are useful for testing, but linking to images on someone else's server can be slow and may violate their terms of service.

Writing alt text that actually describes the image

The alt attribute is not optional. It serves two purposes: if the image fails to load (broken link, slow connection, missing file), the alt text appears in its place so the page is still readable. Second, people using screen readers hear the alt text aloud, so they understand what the image shows.

Write alt text as if you were describing the image to someone who cannot see it. Be specific: "A golden retriever sitting on grass" is better than "dog" or "image". If the image is purely decorative and adds nothing to the meaning of the page, use an empty alt attribute: <img src="divider.png" alt="">. This tells the screen reader to skip it.

Avoid starting with "image of" or "picture of" — screen readers already announce that it is an image. Keep alt text under 125 characters so it is not too long to read aloud.

Controlling image size with width and height

By default, an image displays at its actual file size. If your image is 1200 pixels wide but your page is only 800 pixels wide, the image will overflow. You can resize it by adding width and height attributes:

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

The numbers are in pixels. If you set only width, the browser automatically adjusts height to keep the image from stretching or squishing. Setting both width and height can distort the image if the numbers do not match its original proportions, so usually you set one and let the browser calculate the other.

Adding width and height also prevents a layout shift — the annoying jump that happens when an image finally loads and pushes other content down. Browsers reserve space for the image while it loads, so the page stays stable.

Choosing the right image format for the web

Different image formats work better for different purposes. JPG is best for photographs because it compresses well and keeps file sizes small, which makes pages load faster. PNG works for graphics, logos, and images that need a transparent background (where you can see through parts of the image). WebP is a newer format that produces smaller files than JPG or PNG, but older browsers do not support it.

For most web pages, JPG and PNG cover nearly all cases. If you are not sure which to use, JPG is the safe choice for photos and PNG for everything else. You can check your image file by looking at the extension: photo.jpg, logo.png, or graphic.webp.

Common mistakes when adding images

The most common mistake is a broken src path — the browser cannot find the file because the path is wrong or the file has been moved. Check that the filename matches exactly, including capitalization. On some servers, Photo.jpg and photo.jpg are different files.

Another mistake is forgetting the alt attribute or leaving it blank when the image is not decorative. This breaks the page for people using screen readers and fails accessibility standards. Always include alt text that describes what the image shows.

A third mistake is using an image that is too large. A 5 MB photo file makes your page slow to load. Resize images before uploading them, or use a format like WebP that compresses better. Most image editors (even free ones like Pixlr or Photopea) can shrink file size without losing much quality.

Frequently Asked Questions

Can I use an image from another website in my img tag?

Technically yes — you can paste the full web address into src and the image will appear. However, this is usually not a good idea. The image loads from someone else's server, which makes your page slower and depends on their server staying online. More importantly, using someone else's image without permission may violate copyright. read the image and host it on your own server instead.

What if my image file is in a different folder than my HTML file?

Use a relative path that shows the folder structure. If your image is in a subfolder called "assets", write <img src="assets/photo.jpg" alt="description">. If the image is in a parent folder one level up, use <img src="../photo.jpg" alt="description">. The two dots mean "go up one folder".

Do I have to set width and height, or can I just use src and alt?

You only need src and alt to make an image appear. Width and height are optional. However, setting them prevents layout shift while the image loads, which makes the page feel faster and more stable. It is a good habit to include them.

What happens if the image file does not exist?

The browser shows a broken image icon (usually a small picture frame with an X) and displays the alt text next to it. This tells you the src path is wrong or the file is missing. Check the filename, folder path, and file extension to make sure everything matches.