Images make your webpage more visually appealing and engaging. In HTML, you can add images using the <img> tag, which allows you to display pictures, logos, icons, and graphics directly on a webpage.
The <img> tag is a self-closing tag, meaning it doesn’t require a closing tag. Images can come from your computer or from an online source using a URL.
In short, HTML img tag help websites look professional and improve user experience.
<img> tag like this,
<img src="url" alt="description">- src – Specifies the path or URL of the image file
- alt – Provides alternate text if the image fails to load
Example of Basic HTML Image
<img src="nature.jpg" alt="Beautiful nature view">This code displays an image named nature.jpg on your webpage. If the image doesn’t load, the text “Beautiful nature view” appears instead.
Image from Local Folder
You can use images that are saved inside your project folder.
Example:
<img src="images/photo.jpg" alt="Mountain View">Here, the image file photo.jpg must be located inside the images folder within your project directory.
Image from an External URL
You can also load an image directly from another website or CDN.
Example:
<img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="External Image Example">This method is useful for online resources or logos hosted on other servers.
The alt Attribute (Alternative Text)
The alt attribute defines the alternate text for an image. This text is shown if the image fails to load or if the user is visually impaired (screen readers read the alt text).
Example:
<img src="logo.png" alt="Company Logo">Why is alt important?
- Improves Accessibility (for blind users using screen readers).
- Helps in SEO (search engines use it to understand image content).
- Acts as a fallback if the image file is missing or broken.
HTML Image Tag with Width and Height
You can define image dimensions in pixels or percentages.
Example (in pixels):
<img src="car.jpg" alt="Sports Car" width="400" height="250">Example (in percentage):
<img src="car.jpg" alt="Sports Car" width="50%">- src – Specifies the path or URL of the image file
- alt – Provides alternate text if the image fails to load
- width – Defines the width of the image
- height – Defines the height of the image
- title – Displays a tooltip when hovered over the image
Avoid stretching images unnaturally use original aspect ratios for better quality.
Adding a Tooltip using title Attribute
The title attribute adds a small tooltip when the user hovers over the image.
Example:
<img src="sunset.jpg" alt="Evening Sunset" title="Beautiful Sunset at the Beach">Hovering on the image shows the message: “Beautiful Sunset at the Beach”
Using Images as Links
You can make an image clickable by wrapping it inside an <a> tag.
Example:
<a href="https://htmlonlinecompiler.net">
<img src="logo.png" alt="HTML Online Compiler" width="150">
</a>Clicking the image will open the linked webpage.
Adding Borders and Styling to Images
You can style images using the style attribute or CSS.
Example:
<img src="mountain.jpg" alt="Mountain" style="border:3px solid gray; border-radius:10px;">An image with a gray rounded border.
You can also use box-shadow, margin, and padding for a more polished look.
Centering an Image on the Page
To align an image in the center, use CSS,
<img src="flower.jpg" alt="Flower" style="display:block; margin:auto;">This centers the image horizontally on the webpage.
Responsive Images (Auto Resize on All Devices)
You can make images responsive (fit automatically on all screen sizes) using CSS.
Example:
<img src="forest.jpg" alt="Forest View" style="max-width:100%; height:auto;">This ensures that your image resizes automatically on mobile, tablet, and desktop devices.
Image Inside a Figure Tag (with Caption)
You can group an image with a caption using the <figure> and <figcaption> elements.
Example:
<figure>
<img src="lake.jpg" alt="Peaceful Lake" width="400">
<figcaption>Figure 1: A beautiful lake in the morning.</figcaption>
</figure>Helps describe images clearly and improves SEO readability.
Example of Full HTML Image Page
<!DOCTYPE html>
<html>
<head>
<title>HTML Images Example</title>
</head>
<body>
<h2>HTML Images Tutorial</h2>
<!-- Local Image -->
<img src="nature.jpg" alt="Beautiful Nature View" width="400" height="250">
<!-- External Image -->
<img src="https://www.w3schools.com/images/lamp.jpg" alt="External Lamp Image">
<!-- Image with Tooltip -->
<img src="bird.jpg" alt="Flying Bird" title="A Bird in Flight" width="300">
<!-- Responsive Image -->
<img src="city.jpg" alt="City Skyline" style="max-width:100%; height:auto;">
</body>
</html>