The Basic Image Tag

To display an image on a webpage, you use the <img> tag. This is a self-closing tag, meaning it does not need a closing tag like most HTML elements do. The tag tells the browser where to find the image file and how to display it.

The simplest version looks like this: <img src="image.jpg">. The src attribute tells the browser the location of your image file. If the image file is in the same folder as your HTML file, you only need the filename. If it is in a different folder, you need to include the path to that folder.

Always include the alt attribute as well: <img src="image.jpg" alt="A description of the image">. The alt text appears if the image fails to load, and it helps people using screen readers understand what the image shows. Write alt text that describes what is actually in the image, not just "image" or "photo".

Key Takeaways

  • The <img> tag is self-closing and requires a src attribute that points to your image file.
  • Always include an alt attribute with a description of what the image shows, for accessibility and when images fail to load.
  • Image file paths can be relative (same folder or subfolder) or absolute (full web address), depending on where your image is stored.
  • You can control image size with width and height attributes, and you should set at least one to prevent distortion.
  • Wrap the <img> tag in an <a> tag if you want the image to be clickable and link somewhere.

Relative vs. Absolute File Paths

A relative path describes where the image is located relative to your HTML file. If your image is in the same folder, use just the filename: <img src="photo.jpg" alt="My photo">. If the image is in a subfolder called "images", use <img src="images/photo.jpg" alt="My photo">. If you need to go up one folder level, use <img src="../photo.jpg" alt="My photo">.

An absolute path is the full web address of the image, starting with http:// or https://. Use this when the image is hosted on a different website: <img src="https://example.com/images/photo.jpg" alt="My photo">. Absolute paths work from anywhere on the internet, but if that website goes down or moves the image, your image will disappear.

For images you control, relative paths are usually better because they keep your files portable — you can move your entire folder to a different location and the links still work. For images from other websites, absolute paths are necessary, but understand that you depend on that website keeping the image in the same place.

Setting Image Width and Height

By default, images display at their actual size. If your image is very large, it may take up too much space on the page. You can control the size using the width and height attributes: <img src="photo.jpg" alt="My photo" width="300" height="200">. The numbers are in pixels.

Always set either width or height, or both. If you set only one, the browser automatically scales the other to keep the image from looking stretched or squished. If you set both to different proportions than the original image, the image will distort. A safe approach is to set the width and let the height adjust automatically: <img src="photo.jpg" alt="My photo" width="300">.

You can also use percentages instead of pixels: <img src="photo.jpg" alt="My photo" width="100%">. This makes the image scale to fit its container, which is useful on mobile devices where screen sizes vary. The image will never be larger than its original size unless you specifically allow that in your CSS.

Making Images Clickable Links

To turn an image into a clickable link, wrap the <img> tag inside an <a> tag: <a href="page.html"><img src="photo.jpg" alt="My photo"></a>. When someone clicks the image, they go to the page specified in the href attribute.

You can link to another page on your website, a different website, or even an email address. For example, <a href="https://example.com"><img src="photo.jpg" alt="My photo"></a> links to an external website, while <a href="mailto:name@example.com"><img src="photo.jpg" alt="My photo"></a> opens the user's email program.

Common Image Formats and When to Use Them

JPG (or JPEG) is best for photographs and images with many colors. It compresses well, meaning the file size is small, but it loses some detail in the process. PNG is best for images that need a transparent background or sharp text and lines, like logos or screenshots. PNG files are usually larger than JPG files. GIF is an older format that works for simple images and animations, but PNG is usually a better choice today.

WebP is a newer format that produces smaller files than JPG or PNG while keeping good quality. Not all older browsers support it, so use it only if you are comfortable with some visitors seeing a fallback image instead. SVG is a vector format that works well for icons, logos, and simple graphics because it scales to any size without losing quality.

For most photographs, use JPG. For logos, icons, and images with transparent areas, use PNG. For very simple graphics, SVG is often the best choice because the file size is tiny and it looks sharp at any size.

Troubleshooting Images That Do Not Display

If an image does not show up on your page, check the file path first. Open your browser's developer tools (usually F12 or right-click and select "Inspect"), go to the Console tab, and look for error messages. A common error is a typo in the filename or path — file paths are case-sensitive on most servers, so "Photo.jpg" and "photo.jpg" are different files.

Verify that the image file actually exists in the location you specified. If you are using a relative path, make sure the image is in the correct folder relative to your HTML file. If you are using an absolute path to an image on another website, check that the URL is correct by pasting it into your browser's address bar.

Make sure the file extension matches the actual file type. If you have a PNG file but name it "image.jpg", the browser will try to read it as a JPG and fail. If the image file is very large, it may take a long time to load — consider using an image editor to reduce the file size or dimensions before uploading it.

Frequently Asked Questions

What is the difference between width and height attributes?

Width controls how wide the image is, and height controls how tall it is. Both are measured in pixels by default. If you set only one, the browser automatically adjusts the other to keep the image from stretching. Setting both to values that do not match the original image's proportions will distort it.

Can I use an image from another website on my page?

Technically yes, using the full URL as the src. However, you should only do this if you have permission from the website owner. Linking to images you do not own can be considered copyright infringement, and the owner can remove or move the image at any time, breaking your page.

What should I write in the alt attribute?

Write a short, accurate description of what the image shows. If the image is a photo of a dog, write "A brown dog sitting on grass", not just "dog" or "image". If the image is purely decorative, you can leave alt empty: alt="". Screen reader users rely on alt text to understand your page.

Why is my image stretched or squished?

This happens when you set both width and height to values that do not match the original image's proportions. If your original image is 400 pixels wide and 300 pixels tall, and you set width="300" and height="300", it will look squished. Set only one dimension and let the browser calculate the other.

How do I make an image responsive on mobile devices?

Use width="100%" to make the image scale to fit its container. You can also use CSS to set a max-width, which prevents the image from becoming too large on big screens. This approach ensures the image looks good whether someone is viewing on a phone, tablet, or desktop.