-
Hajipur, Bihar, 844101
HTML Images
Images play an important role in web design. They help explain ideas, make pages attractive, and improve user engagement. HTML provides a simple way to embed images using the <img> tag. In this chapter, you’ll learn how to insert images, set size, add alternative text, work with paths, add borders, float images, and create responsive layouts.
The img Tag
HTML uses the <img> tag to display an image. Unlike most tags, <img> is self-closing and does not require a closing tag.
Basic syntax:
<img src="image.jpg" alt="Description">
There are two important attributes:
-
srctells the browser where the image is located -
altprovides a text description if the image cannot load
Example:
<img src="mumbai-sunset.jpg" alt="Sunset view near Marine Drive">
If the image fails to load, the user will see the alternate text, and screen readers also use it for accessibility.
Using the src Attribute
The src attribute can point to:
1. A file in the same folder
<img src="photo.jpg" alt="Travel photo">
2. A file inside another folder
<img src="images/hawa-mahal.jpg" alt="Hawa Mahal">
3. An online image (absolute URL)
<img src="https://example.com/pictures/city.jpg" alt="City skyline">
Relative paths are preferred inside real projects because they keep your website portable.
The alt Attribute
The alt attribute improves accessibility and SEO. It describes what the image shows and helps screen readers understand the content.
Good alt text:
<img src="hyderabad-charminar.jpg" alt="Charminar in Hyderabad during evening">
This tells the browser and users what the image represents.
Avoid meaningless alt text such as:
alt="image1"
If an image is decorative and does not need description, you can leave alt empty:
<img src="border-line.png" alt="">
Setting Image Width and Height
You can control the size of images using the width and height attributes.
<img src="udaipur-lake.jpg" width="300" height="200" alt="Udaipur lake view">
Width and height accept values in pixels or percentages.
Pixel example:
<img src="pune-cafe.jpg" width="400" alt="Cafe in Pune">
Percentage example:
<img src="kolkata-bridge.jpg" width="50%" alt="Howrah Bridge">
Percentage width adjusts according to the container size, helping make images responsive.
Responsive Images
A responsive image adjusts its size automatically based on screen width. This is important for mobile-friendly designs.
HTML alone cannot make images responsive, but a simple CSS rule does:
<img src="goa-beach.jpg" style="max-width: 100%; height: auto;" alt="Goa beach">
max-width: 100% ensures the image never grows beyond the container.
Image Titles
You can show a tooltip when the user moves their mouse over the image using the title attribute.
<img src="agra-tajmahal.jpg" title="Beautiful view of Taj Mahal" alt="Taj Mahal">
This is optional but adds extra context.
Image Borders
You can add borders using the style attribute.
<img src="varanasi-ghat.jpg" style="border: 2px solid black;" alt="Ghat in Varanasi">
You can modify color, thickness, and type.
<img src="delhi-market.jpg" style="border: 3px dashed brown;" alt="Market in Delhi">
Aligning Images Using CSS
Images can be aligned left or right using the float property.
Float left
<img src="ahmedabad-riverfront.jpg" style="float: left; margin-right: 10px;" alt="Riverfront view">
Float right
<img src="jaipur-fort.jpg" style="float: right; margin-left: 10px;" alt="Fort in Jaipur">
Floating is useful when you want text to wrap around an image.
Linking Images
Sometimes you want an image to work like a link. Wrap the image inside an <a> tag.
<a href="gallery.html">
<img src="gallery-thumbnail.jpg" alt="Open gallery">
</a>
This is common for banners, logos, and preview thumbnails.
Images in Different Formats
HTML supports many image formats. The most common ones are:
JPEG (.jpg)
-
Best for photos
-
Good balance between quality and file size
PNG (.png)
-
Supports transparency
-
Best for graphics, icons, and logos
GIF (.gif)
-
Supports animation
-
Limited colors
SVG (.svg)
-
Scalable without losing quality
-
Best for logos and illustrations
WebP (.webp)
-
Modern format
-
Smaller file size with good quality
Example using an SVG:
<img src="logo.svg" alt="Company logo">
Background Images vs.
HTML images are for content. When an image is purely decorative or meant to be a background, use CSS instead.
Example:
<div style="background-image: url('pattern.png'); height: 200px;">
</div>
Use <img> only when the image is part of the content.
Using Images From a Folder Structure
A practical folder layout might look like:
project/
index.html
images/
delhi.jpg
pune.jpg
hyderabad.jpg
To load a picture from the folder:
<img src="images/pune.jpg" alt="Pune street view">
Organizing images in a separate folder keeps your files clean.
Full Example With Multiple Image Features
<!DOCTYPE html>
<html>
<head>
<title>HTML Images Example</title>
</head>
<body>
<h1>Travel Image Gallery</h1>
<p>
<img src="images/mumbai.jpg" width="300" alt="Marine Drive in Mumbai">
</p>
<p>
<img src="images/jaipur.jpg" style="border: 2px solid brown;" width="300" alt="Hawa Mahal">
</p>
<p>
<img src="images/hyderabad.jpg" style="max-width: 100%; height: auto;" alt="Hyderabad city">
</p>
<p>
<a href="gallery.html">
<img src="images/gallery-thumbnail.jpg" alt="Open gallery">
</a>
</p>
</body>
</html>
Summary of HTML Images
HTML images are added using the <img> tag with src and alt attributes. You learned how to set image paths, control size, add borders, float images, and make them responsive. You also explored linking images, using different image formats, and organizing files in clean folder structures. Images improve design and help communicate information visually, making them a key part of any website.
Practice Questions
Q1. Insert an image named banner.jpg into a webpage.
Q2. Add an alternative text “Nature Photo” to an image.
Q3. Display an image with width 500px and height 300px.
Q4. Create a responsive image using CSS.
Q5. Link an image to https://example.com.
Q6. Load an image from an external URL.
Q7. Show an image located inside a folder named gallery.
Q8. Use title attribute to show a tooltip on hover.
Q9. Add multiple images in a row using HTML.
Q10. Create an image gallery layout with three images.
