The Basic Image Tag

To add an image to a webpage, 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="image.jpg">. The src attribute tells the browser the name or location of your image file. If your image is named "photo.jpg" and sits in the same folder as your HTML file, you write exactly that filename.

You can place this tag anywhere in your HTML where you want the image to appear — inside a paragraph, in a heading, or on its own line. The browser will display the image at that exact spot.

Key Takeaways

  • The <img src="filename.jpg"> tag is all you need to display an image, with src pointing to the image file name or web address.
  • Always include the alt attribute with a short description of the image, which displays if the image fails to load and helps screen readers.
  • Image file paths can be relative (just the filename if the image is in the same folder) or absolute (a full web address starting with http).
  • Common image formats for the web are JPG for photographs, PNG for images with transparency, and GIF for simple graphics or animations.
  • The width and height attributes let you control how large the image appears, but resizing in HTML does not reduce file size.

Where to Point the src Attribute

The src attribute can point to an image file in three ways. First, if the image is in the same folder as your HTML file, write only the filename: <img src="sunset.jpg">. Second, if the image is in a subfolder, include the folder path: <img src="images/sunset.jpg">. Third, if the image is hosted on another website, use the full web address: <img src="https://example.com/sunset.jpg">.

The most common mistake is typing a path that does not match where the file actually sits. If you upload an HTML file to a web server but forget to upload the images folder, the images will not appear — the browser will show a broken image icon instead. Always check that your image files are in the location your src attribute points to.

If you are working on your computer before uploading to the web, relative paths (just the filename or folder/filename) work fine. Once you move files to a web server, make sure the folder structure stays the same, or update your src paths to match the new layout.

Adding the alt Attribute

The alt attribute holds a short text description of the image. Write it like this: <img src="sunset.jpg" alt="Orange sunset over the ocean">. If the image fails to load, the browser displays this text instead. More importantly, screen readers used by people with vision loss read the alt text aloud, so they understand what the image shows.

Keep alt text brief and descriptive — 10 to 20 words is usually enough. Describe what the image shows, not "image of" or "picture of". Write "A golden retriever playing fetch in a park" rather than "A dog". If the image is purely decorative and carries no meaning, you can leave alt empty: <img src="decoration.png" alt="">.

The alt attribute is not optional if you want your page to work for everyone. It is also used by search engines to understand what your images contain, which can help your page appear in image search results.

Controlling Image Size

You can set how large an image appears using the width and height attributes. For example: <img src="sunset.jpg" alt="Orange sunset" width="400" height="300">. The numbers are in pixels — a pixel is one dot on the screen. This image will display 400 pixels wide and 300 pixels tall.

If you set only width or only height, most browsers will automatically adjust the other dimension to keep the image from looking stretched or squashed. Setting both width and height can distort the image if the numbers do not match the original proportions. A safe approach is to set width and let the browser handle height, or vice versa.

Important: resizing an image in HTML does not reduce the file size that the browser downloads. A 5-megabyte photo displayed at 200 pixels wide still downloads as 5 megabytes. If you want smaller file sizes, edit the image in a photo editor before uploading it to your website.

Image Formats and When to Use Them

JPG is the standard format for photographs and complex images with many colors. It compresses well, meaning the file size stays small, but it loses some detail in the process. Use JPG for photos from a camera or realistic artwork.

PNG preserves every detail and supports transparency — meaning you can have a see-through background instead of a solid color. PNG files are larger than JPG, so use PNG when you need perfect quality or a transparent background, such as logos or icons. GIF is an older format that works for simple graphics and animations, but PNG has largely replaced it for static images.

For the web, stick with JPG, PNG, or GIF. Other formats like TIFF or BMP create files too large to load quickly on a webpage. Most image editors (including free ones like GIMP) let you save in any of these formats.

Linking an Image to Another Page

To make an image clickable, wrap the <img> tag inside an <a> tag: <a href="page2.html"><img src="sunset.jpg" alt="Click to see more sunsets"></a>. When someone clicks the image, the browser goes to the page listed in the href attribute.

The href can point to another page on your site, a different website, or even an email address. If you link to an external website, use the full web address starting with http or https. The alt text should describe what happens when the user clicks, not just what the image shows — "Click to see more sunsets" is more helpful than "A sunset".

Common Problems and How to Fix Them

If you see a broken image icon instead of your picture, the src path is wrong. Check that the filename matches exactly — "Sunset.jpg" is different from "sunset.jpg" on most web servers. Also check that the image file is actually in the folder you specified. Open your file manager and navigate to the folder where your HTML file sits to confirm the image is there.

If the image appears but looks blurry or stretched, you may have resized it in HTML without matching the original proportions. Check the original image dimensions (right-click the image file and select Properties or Get Info), then set width and height to the same ratio. If the original is 800 by 600 pixels, setting width to 400 and height to 300 maintains the same proportions.

If you uploaded files to a web server and images do not appear, the folder structure may have changed during upload. Some web hosting services put files in a public_html folder, while others use www or a different name. Check your hosting provider's documentation or contact their support to confirm where to upload image files.

Frequently Asked Questions

Can I use an image from another website in my own webpage?

Technically yes — you can point your src to any image on the internet. However, this is usually not a good idea. The image owner may delete it, move it, or change permissions, breaking your page. More importantly, using someone else's image without permission violates copyright. Instead, download the image, save it to your own server, and point src to your copy.

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

Pixels are fixed sizes — 400 pixels is always 400 pixels. Percentages are relative to the container holding the image. If you write width="50%", the image takes up half the width of its parent element. Percentages are useful for responsive design, where images shrink on small phone screens and grow on large desktop screens.

Do I need to close the img tag with </img>?

No. The <img> tag is self-closing and does not need a closing tag. Some older HTML standards used <img /> with a slash at the end, but modern HTML does not require it. Either <img src="photo.jpg"> or <img src="photo.jpg" /> works fine in current browsers.

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

Set the width to a percentage and omit the height: <img src="sunset.jpg" alt="Sunset" width="100%">. The image will shrink and grow with the browser window while keeping its original proportions. You can also use CSS to set a maximum width, preventing the image from becoming too large on big screens.

Can I add a border or shadow to an image using HTML?

HTML can add a simple border with the border attribute: <img src="sunset.jpg" border="2">. For more control — shadows, rounded corners, or colored borders — use CSS instead. HTML is for structure; CSS is for styling. Most modern webpages use CSS to make images look polished.