HTML Images

Images make web pages more engaging and informative. In HTML, images are embedded using the <img> tag. This tag is a self-closing element, meaning it does not have a separate closing tag.

Basic Image Syntax

<img src="image-file.jpg" alt="Description of image">

The two most important attributes for the <img> tag are:

• src – The source path or URL of the image file
• alt – Alternative text shown if the image fails to load (also helps screen readers)

Image Source Types

1. Image from the Same Folder

<!-- Image stored in the same folder as the HTML file -->
<img src="dog.jpg" alt="A brown dog sitting outside">

2. Image from a Sub-Folder

<!-- Image stored in a folder called 'images' -->
<img src="images/sunset.jpg" alt="A beautiful sunset">

3. Image from an External URL

<!-- Image loaded from another website -->
<img src="https://www.example.com/photos/flower.jpg" alt="A red flower">

Setting Image Width and Height

The width and height attributes control the size of the image. Values are set in pixels.

<!-- Fixed width and height -->
<img src="photo.jpg" alt="Profile photo" width="300" height="200">

<!-- Only setting width (height adjusts automatically to keep proportion) -->
<img src="banner.jpg" alt="Banner" width="100%">

The alt Attribute

The alt attribute is very important for two reasons:

1. Accessibility – Screen readers read the alt text aloud for visually impaired users
2. Fallback – If the image cannot be loaded, the alt text is shown in its place

<!-- Good alt text - descriptive -->
<img src="team.jpg" alt="The company team at their annual meeting in 2024">

<!-- Empty alt for decorative images that add no meaning -->
<img src="divider.png" alt="">

Image as a Link

Wrap an image inside an <a> tag to make it clickable and navigate to a URL.

<a href="https://www.example.com">
  <img src="logo.png" alt="Company Logo" width="150">
</a>

Image with a Title Tooltip

Adding a title attribute shows a small tooltip when hovering the mouse over the image.

<img src="map.jpg" alt="City map" title="Map of the city center" width="400">

Common Image Formats Used on the Web

Figure and Figcaption

The <figure> and <figcaption> tags are used to group an image with a caption. This is the semantic way to add descriptive captions to images.

<figure>
  <img src="waterfall.jpg" alt="A tall waterfall in a forest" width="400">
  <figcaption>Angel Falls, the world's highest waterfall, located in Venezuela.</figcaption>
</figure>

Key Points to Remember

• The <img> tag is self-closing and does not need a closing tag
• Always provide an alt attribute for every image — it is important for accessibility
• Use width and height to control image size
• Images can be loaded from local files or external URLs
• JPEG is best for photos; PNG is best for images that need transparent backgrounds
• Wrap images in <figure> with <figcaption> for accessible captions
• Large images slow down page loading — always optimize image file sizes