The Basic Image Tag: <img>

To display a photo on a webpage, you use the <img> tag. This tag tells the browser where to find the image file and how to show it. Unlike most HTML tags, <img> does not have a closing tag — it stands alone.

The simplest version looks like this: <img src="photo.jpg">. The src attribute points to your image file. The browser reads this instruction, finds the file, and displays the photo where that tag appears on the page.

The image file must exist somewhere the browser can reach it. That might be in the same folder as your HTML file, in a subfolder, or at a web address. The path you write in src tells the browser exactly where to look.

Key Takeaways

  • The <img> tag requires a src attribute that points to your image file, either as a local path or a web address.
  • Always include an alt attribute with a text description of the image, which displays if the image fails to load and helps people using screen readers.
  • Image file names are case-sensitive on most web servers, so "photo.jpg" and "Photo.jpg" are treated as different files.
  • You can control image size with width and height attributes, or let the browser display the image at its original size.
  • Common image formats for the web are JPG for photographs, PNG for graphics with transparency, and WebP for smaller file sizes.

Writing the Path to Your Image File

The path in your src attribute depends on where the image lives relative to your HTML file. If the image is in the same folder as your HTML file, you only need the filename: <img src="sunset.jpg">.

If the image is in a subfolder called "images", write: <img src="images/sunset.jpg">. If you need to go up one level to find the image, use two dots: <img src="../sunset.jpg">. The two dots mean "go to the parent folder".

You can also link to an image hosted on another website by using its full web address: <img src="https://example.com/photos/sunset.jpg">. The browser will fetch the image from that server each time the page loads. This works, but you depend on that other website staying online and keeping the image in the same place.

The Alt Attribute: Describing Your Image

The alt attribute holds a text description of what the image shows. Write it like this: <img src="sunset.jpg" alt="Orange sun setting over ocean waves">. This description appears if the image fails to load, and it is read aloud by screen readers that people with vision loss use to browse the web.

Write alt text that describes what someone would see in the image, not just the filename. "sunset.jpg" is not useful. "Orange sun setting over ocean waves" tells the reader what is actually there. Keep it brief — one sentence is usually enough.

If the image is purely decorative and adds nothing to the meaning of the page, you can leave alt empty: <img src="decoration.png" alt="">. This tells screen readers to skip over it. Never omit the alt attribute entirely — always include it, even if it is empty.

Controlling Image Size

By default, the browser displays an image at its original size. You can change this with the width and height attributes. Both take a number in pixels: <img src="sunset.jpg" alt="Sunset" width="400" height="300">.

If you set only the width, most browsers will shrink or stretch the height automatically to keep the image from looking squashed or stretched. Setting both width and height gives you exact control, but the image may look distorted if the numbers do not match the original proportions.

You can also use CSS to resize images, which gives you more flexibility. That approach is covered in the CSS section of this guide. For now, the width and height attributes on the tag itself are the quickest way to make an image smaller or larger.

Choosing the Right Image Format

JPG is the standard format for photographs and images with many colors. It compresses the file to a smaller size, which makes pages load faster. A JPG file loses some detail when compressed, but the loss is usually invisible to the human eye.

PNG is better for graphics, logos, and images that need a transparent background. PNG files are larger than JPG, but they preserve every pixel exactly. If you need crisp text or sharp edges in your image, PNG is the right choice.

WebP is a newer format that makes files smaller than both JPG and PNG while keeping quality high. Not all older browsers support it, so you may need to provide a JPG or PNG as a fallback. GIF is an older format mainly used for straightforward animations; for static images, JPG or PNG is better.

Common Mistakes and How to Fix Them

The most common mistake is a broken path. If you write <img src="photo.jpg"> but the file is actually in an "images" folder, the browser will not find it and will show a broken image icon instead. Check that the path matches where the file actually lives.

Case matters on most web servers. If your file is named "Sunset.jpg" but you write src="sunset.jpg", the browser will not find it. Windows and Mac computers often ignore case, so the image might work on your computer but break when you upload to a web server. Use lowercase for all filenames to avoid this.

Forgetting the alt attribute is another common issue. Browsers will still display the image, but screen readers will have nothing to read, and if the image fails to load, the reader will see nothing. Always include alt, even if it is empty.

Putting It All Together

Here is a complete example with all the pieces: <img src="images/sunset.jpg" alt="Orange sun setting over ocean waves" width="600" height="450">. This tells the browser to find sunset.jpg in the images folder, display it at 600 pixels wide and 450 pixels tall, and show the alt text if something goes wrong.

Place this tag anywhere in your HTML where you want the image to appear. It can go inside a paragraph, in a div, or anywhere else. The browser will display the image at that exact spot on the page.

If you want to make the image a clickable link, wrap the <img> tag in an <a> tag: <a href="full-sunset.jpg"><img src="images/sunset.jpg" alt="Sunset"></a>. Now clicking the image will open the full-size version or navigate to another page.

Frequently Asked Questions

What happens if the image file does not exist?

The browser will display a broken image icon (usually a small picture frame with an X) in place of the photo. The alt text will appear as a tooltip if you hover over it. Check your file path and make sure the image file actually exists in the location you specified.

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

Yes, you can link directly to an image on another server using its full web address in the src attribute. However, that image depends on the other website staying online. If they move or delete the file, your image will break. It is better to read the image and host it yourself.

How do I make an image responsive so it looks good on phones and large screens?

Set the width to a percentage instead of pixels: <img src="sunset.jpg" alt="Sunset" width="100%">. This makes the image scale up or down to fit its container. You can also use CSS to set a maximum width so it does not get too large on big screens.

What is the difference between width and height attributes and CSS sizing?

The width and height attributes on the tag itself are quick and straightforward. CSS gives you more control and lets you explore the same sizing to many images at once. For a single image, either works. For a whole website, CSS is usually cleaner.

Do I need to compress my images before uploading them?

It is a good idea. Large image files make pages load slowly. You can use free tools like TinyPNG or ImageOptim to reduce file size without losing visible quality. Smaller files mean faster pages and happier visitors.