HTML Images
Images make a page more attractive and easier to understand.
The img Tag
Images are added with the empty <img> tag. It has two required attributes:
| Attribute | Meaning |
|---|---|
src | The path (address) of the image file |
alt | A text description of the image |
Example
<img src="karachi-beach.jpg" alt="Sunset at Clifton beach in Karachi">The example below uses a tiny built-in picture (a coloured rectangle written as text), so it works without any file:
Example
<!DOCTYPE html>
<html>
<body>
<h2>Our Logo Colour</h2>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='120'%3E%3Crect width='200' height='120' fill='%23e34c26'/%3E%3C/svg%3E" alt="An orange-red rectangle" width="200" height="120">
</body>
</html>Always Write Good alt Text
The alt text is shown if the image cannot load, and it is read aloud by screen readers. Describe what the picture shows, in a few words.
Example
<!DOCTYPE html>
<html>
<body>
<img src="no-such-file.jpg" alt="Ayesha receiving her certificate" width="300" height="200">
</body>
</html>If an image is only decoration and adds no information, use an empty alt: alt="". Screen readers will then skip it.
Width and Height
Set the size in pixels with width and height. Giving both stops the page from jumping while the image loads.
Example
<img src="shop.jpg" alt="Front of the shop" width="400" height="300">You can also use CSS: style="width:400px; height:300px;". To make an image shrink on small phones, use style="max-width:100%; height:auto;".
Images in Another Folder
Most websites keep pictures in an images folder. Include the folder in the path:
Example
<img src="images/classroom.jpg" alt="Computer lab with twenty PCs">To use an image from another website, give the full URL. Only do this if you have permission to use that image.
Images as Links
Put an <img> inside an <a> to make the picture clickable.
Example
<a href="courses.html">
<img src="images/courses-banner.jpg" alt="See all our courses" width="600" height="200">
</a>Floating an Image Beside Text
The CSS float property lets text wrap around an image.
Example
<!DOCTYPE html>
<html>
<body>
<p>
<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Ccircle cx='60' cy='60' r='55' fill='%23059669'/%3E%3C/svg%3E" alt="A green circle" width="120" height="120" style="float:right; margin-left:12px;">
The green circle floats to the right, and this text flows around it on the left side. Add more text here to see it wrap below the image once the image ends. Floating is often used for a small photo next to a news story.
</p>
</body>
</html>Common Image Formats
| Format | Best for |
|---|---|
| JPG / JPEG | Photos |
| PNG | Graphics with sharp edges or a transparent background |
| WEBP | Photos and graphics with smaller file sizes |
| SVG | Logos and icons that stay sharp at any size |
| GIF | Simple animations |
Exercise
Exercise
Which attribute describes an image for screen readers and when it fails to load?