Introduction
Images are an important part of any webpage. They make content more attractive, engaging, and easier to understand.
In HTML, images are used to display pictures such as photos, icons, logos, and graphics on a webpage. Adding images helps improve user experience and also makes your content visually appealing.
In this lesson, you will learn how to add images in HTML and understand different image attributes.
What You’ll Learn
- HTML
<img>tag srcattributealtattribute- Image width and height
- Image paths (relative & absolute)
- Best practices for using images
1️⃣ Basic Image Syntax
<img src="image.jpg" alt="My Image">
Explanation:
<img>→ Image tag (self-closing)src→ Image path (source)alt→ Alternative text (VERY important)
The <img> tag is a self-closing tag (it does not need a closing tag).
2️⃣ Example (Same Folder Image)
If your image is in the same folder as your HTML file:
<img src="photo.jpg" alt="Sample photo">
3️⃣ Image from a Folder
Folder structure:
images/
└── logo.png
index.html
<img src="images/logo.png" alt="Website Logo">
4️⃣ Image from Internet (URL)
<img src="https://example.com/image.jpg" alt="Online image">
⚠️ Use this carefully — if the image is deleted, it won’t show.
5️⃣ Width and Height
You can control the size of an image using the width and height attributes.
<img src="photo.jpg" alt="Photo" width="300" height="200">
✅ Best practice:
Use CSS for sizing, but HTML width/height is okay for beginners.
6️⃣ Image Title (Tooltip)
You can add a tooltip using the title attribute.
<img src="logo.png" alt="Logo" title="Div PHP Tutorials Logo">
When you hover over the image, the title text will appear.
7️⃣ Broken Image Example
If the image is missing:
<img src="wrong.jpg" alt="Image not found">
The alt attribute provides alternative text for an image.
Why it is important:
- Displays text if the image fails to load
- Improves accessibility for screen readers
- Helps in SEO
8️⃣ Clickable Image (Image as Link)
<a href="https://divphptutorials.in">
<img src="logo.png" alt="Div PHP Tutorials">
</a>
Clicking the image will open the link.
9️⃣ Image Alignment (Old method – just for knowledge)
<img src="photo.jpg" align="left">
⚠️ Deprecated — use CSS instead.
How Images Appear in Browser
- Images are displayed at their original size unless resized
- If the image path is incorrect, the
alttext is shown - Images are inline elements by default
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Images</title>
</head>
<body>
<h2>HTML Image Examples</h2>
<img src="https://via.placeholder.com/150" alt="Sample Image"><br><br>
<img src="https://via.placeholder.com/150" alt="Resized Image" width="200" height="150"><br><br>
<a href="https://example.com">
<img src="https://via.placeholder.com/100" alt="Clickable Image">
</a>
</body>
</html>
Explanation:
This example shows how to display images, resize them, and use an image as a clickable link.
Common Image Formats
Different image formats are used on the web depending on the purpose.
- JPEG (.jpg) → Used for photos and large images
- PNG (.png) → Used for images with transparency
- GIF (.gif) → Used for simple animations
- SVG (.svg) → Used for scalable vector graphics
- WebP (.webp) → Modern image format that provides better compression and quality
👉 WebP images are smaller in size compared to JPEG and PNG, which helps websites load faster and improves performance.
👉 Most modern browsers support WebP, making it a great choice for web development today.
Important Notes
- Use optimized images to reduce page load time
- Always add descriptive
alttext - Use proper file names (e.g.,
html-logo.pnginstead ofimg1.png) - Avoid using very large images
- Maintain correct aspect ratio
Common Mistakes
- Missing
altattribute - Incorrect image path
- Using very large images
- Distorting images by wrong width/height
Practice Tasks
Now try these exercises:
- Task 1: Add an image to your webpage using the
<img>tag. - Task 2: Set the width and height of an image.
- Task 3: Use a relative path to display a local image.
- Task 4: Create an image that works as a link.
- Task 5: Add
alttext andtitleto an image.
FAQs
What is the <img> tag in HTML?
The <img> tag is used to display images on a webpage.
What is the src attribute?
The src attribute specifies the path or URL of the image.
Why is the alt attribute important?
It provides alternative text, improves accessibility, and helps SEO.
Conclusion
Images make web pages more engaging and visually appealing. Using optimized and modern formats like WebP can also improve website performance and SEO.
In the next tutorial, you will learn about HTML Lists to build better and more interactive web pages.