Images are a big part of every website. They make content more engaging, help explain ideas, and improve user experience. In HTML, the <img> tag is used to display images on a web page.
In this guide, you will learn what the <img> tag is, how it works, and how to use it properly. This is an evergreen, beginner-friendly explanation you can always come back to.
What is the <img> Tag?
The <img> tag is used to embed an image into a web page.
Simple meaning:
The <img> tag = shows an image
Unlike many HTML tags, <img> does not have a closing tag. It is a self-closing tag.
Basic Syntax
Here is the basic structure:
<img src="image.jpg" alt="Description of image">
Explanation:
<img>→ image tagsrc→ path to the imagealt→ description of the image
How the <img> Tag Works
The browser reads the src attribute and loads the image from that location.
If the image cannot load:
- The text in
altwill be displayed instead
The src Attribute
The src (source) attribute tells the browser where the image is located.
Example:
<img src="photo.jpg" alt="A sample photo">
You can use:
1. Relative Path
<img src="images/photo.jpg" alt="Photo">
2. Absolute URL
<img src="https://example.com/image.jpg" alt="Online image">
The alt Attribute (Very Important)
The alt attribute provides a text description of the image.
Example:
<img src=”cat.jpg” alt=”A cute cat sitting on a sofa”>
Why alt matters:
- Helps screen readers (accessibility)
- Shows text if image fails to load
- Improves SEO
Setting Image Width and Height
You can control image size using attributes:
<img src="image.jpg" alt="Example" width="300" height="200">
Or using CSS:
<img src="image.jpg" alt="Example" style="width:300px;">
Responsive Images
To make images adjust to screen size:
<img src="image.jpg" alt="Responsive image" style="max-width:100%; height:auto;">
This makes your image mobile-friendly.
Using Images from a Folder
If your images are inside a folder:
<img src="assets/images/pic.jpg" alt="Picture">
Image Formats
Common image formats:
- JPG → photos
- PNG → transparent images
- GIF → animations
- SVG → scalable graphics
<a href=”https://example.com”>
<img src=”image.jpg” alt=”Clickable image”>
</a>
Lazy Loading Images
Lazy loading improves performance by loading images only when needed.
<img src="image.jpg" alt="Lazy image" loading="lazy">
Adding a Title Tooltip
You can add a tooltip using the title attribute:
<img src="image.jpg" alt="Example" title="This is an image">
Styling Images with CSS
Example:
<style>
img {
border-radius: 10px;
}
</style>
Image Alignment
Using CSS:
<img src="image.jpg" alt="Example" style="display:block; margin:auto;">
Common Mistakes to Avoid
1. Missing alt Attribute
❌ Wrong:
<img src="image.jpg">
✔ Correct:
<img src="image.jpg" alt="Description">
2. Wrong File Path
Make sure your image path is correct.
3. Large Image Sizes
Big images slow down your website. Always optimize images.
Real-Life Use Cases
1. Blog Images
<img src="blog-image.jpg" alt="Blog illustration">
2. Profile Pictures
<img src="profile.jpg" alt="User profile picture">
3. Product Images
<img src="product.jpg" alt="Product image">
4. Logos
<img src="logo.png" alt="Company logo">
SEO Benefits of <img>
Search engines cannot “see” images like humans. They rely on text.
Tips:
- Use clear file names (e.g., red-shoes.jpg)
- Write good
alttext - Optimize image size
- Use proper formats
Accessibility Benefits
The <img> tag helps users with disabilities when used correctly.
- Screen readers read the
alttext - Makes your site inclusive
- Improves user experience
Advanced Example
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
<style>
img {
max-width: 100%;
border: 2px solid #ccc;
border-radius: 8px;
}
</style>
</head>
<body>
<h2>Sample Image</h2>
<img src="nature.jpg" alt="Beautiful nature landscape" loading="lazy">
</body>
</html>
When Should You Use <img>?
Use <img> when:
✔ You want to display an image
✔ You want visual content
✔ You want better user engagement
Avoid using it when:
✘ The image is purely decorative (use CSS instead)
✘ You don’t have proper alt text
<img> vs CSS Background Images
<img>→ content image- CSS background → design/styling
Browser Support
The <img> tag works in all browsers:
- Chrome
- Firefox
- Safari
- Edge
Best Practices
- Always use
alt - Keep image sizes small
- Use responsive design
- Use correct formats
- Organize images in folders
The <img> tag is simple but very powerful. It allows you to add visuals to your website, making it more engaging and easier to understand.
By using the <img> tag properly, you improve accessibility, SEO, and user experience. Whether you are building a blog, portfolio, or business website, images will always play an important role.
Mastering this tag is a key step in becoming a better web developer.