HTML Images

HTML Images

Images are crucial for web content. The <img> element allows you to embed images into your HTML documents.

HTML Images Syntax

Images are defined with the <img> tag. It’s an empty element, meaning it has no closing tag.

The required attributes are src (source) and alt (alternative text).

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

• src attribute: Specifies the path or URL to the image file.
• alt attribute: Provides descriptive text for the image.

The alt Attribute - Accessibility

The alt attribute is essential for accessibility and SEO:

• Screen Readers: Screen readers read the alt text aloud to users who are visually impaired.
• Broken Images: If the image fails to load (due to a wrong path, network error, etc.), the browser will display the alt text instead.
• Search Engines: Search engines use alt text to understand the image content.
• Context: It provides context for users who may have images disabled.

Good alt text should be concise and accurately describe the image’s content or function.

<!-- Good alt text -->
<img src="company-logo.png" alt="Example Corp logo">
<img src="chart-sales-q1.png" alt="Bar chart showing Q1 sales figures increasing each month">
<img src="icon-print.png" alt="Print this page">

<!-- If image is purely decorative, use an empty alt attribute -->
<img src="decorative-border.gif" alt="">

	The alt attribute is mandatory for the <img> element to be valid HTML5. Omitting it harms accessibility.

Image Size - width and height

Specifying image dimensions using width and height attributes is crucial for performance and user experience:

<img src="photo.jpg" alt="A landscape photo" width="600" height="400">

Why specify dimensions?

• Prevent Layout Shift (CLS): By providing width and height, the browser can reserve the correct amount of space for the image before it loads. This prevents the page content from jumping around as images load, improving the Cumulative Layout Shift metric.
• Faster Rendering: Helps the browser lay out the page more quickly.

The values for width and height are interpreted as pixels by default (don’t add px).

Note on CSS vs. HTML Attributes: While you can also set image dimensions using CSS (width and height properties), setting the HTML attributes width and height is still recommended for reserving space during initial page load. CSS can then be used for responsive adjustments (e.g., max-width: 100%; height: auto;) without losing the initial layout stability benefit.

Image Paths

Same Folder: If the image is in the same folder as the HTML file:

<img src="logo.png" alt="Logo">

Subfolder: If the image is in a subfolder (e.g., images):

<img src="images/profile.jpg" alt="Profile picture">

Parent Folder: To go up one level:

<img src="../assets/icon.svg" alt="Icon">

Absolute URL: To link to an image on another server:

<img src="https://www.example.com/images/banner.jpg" alt="Promotional Banner">

Animated Images

You can embed animated image formats like GIF or animated WebP using the standard <img> tag:

<img src="loading-spinner.gif" alt="Loading...">
<img src="animated-diagram.webp" alt="Diagram showing process flow">

Consider file size and performance. For complex animations, using the <video> element with a short, looping video might be more efficient.

Using an Image as a Link

Nest the <img> tag inside an <a> (anchor) tag to make the image clickable:

<a href="https://www.example.com">
  <img src="logo.png" alt="Visit Example Corp" width="150" height="50" style="border: none;">
</a>

	It’s common practice to remove the default border browsers might add to linked images using CSS (img { border: none; } or inline style="border: none;").

Image Floating (Text Wrapping)

Use the CSS float property to make text wrap around an image.

<p>
  <img src="avatar.jpg" alt="User avatar" style="float: left; margin-right: 10px;" width="50" height="50">
  This text will wrap around the image which is floated to the left. Add some margin to prevent text from touching the image directly.
</p>

<p style="clear: left;">This paragraph starts below the floated image because of 'clear: left'.</p>

<p>
  <img src="icon.png" alt="Info icon" style="float: right; margin-left: 10px;" width="30" height="30">
  This text will wrap around the image floated to the right.
</p>

While float is the traditional way for text wrapping, modern CSS layout techniques like Flexbox and Grid offer more powerful options for general page layout, but float remains useful specifically for this text-wrapping effect.

Image Maps (Client-Side)

An image map defines clickable areas within a single image, linking each area to a different destination.

Use the <map> tag (with a name attribute) and <area> tags inside it. The <img> tag’s usemap attribute links it to the map.

<img src="world_map.png" alt="World Map with clickable regions" width="800" height="400" usemap="#worldmap">

<map name="worldmap">
  <area shape="rect" coords="0,0,200,150" href="north_america.html" alt="North America">
  <area shape="circle" coords="400,200,50" href="africa.html" alt="Africa">
  <area shape="poly" coords="600,100,750,150,700,250,580,200" href="australia.html" alt="Australia">
</map>

<area> attributes:

• shape: Defines the shape (rect, circle, poly, default).
• coords: Specifies the coordinates defining the shape.
• href: The destination URL for the clickable area.
• alt: Provides alternative text for the area (important for accessibility).

Image maps are less common now due to challenges with responsiveness and the ease of achieving similar results with CSS/JavaScript, but they remain a valid HTML feature.

Chapter Summary

• Use <img> to embed images.
• The src attribute specifies the image URL.
• The alt attribute provides essential alternative text for accessibility and SEO.
• Use width and height attributes to prevent layout shifts.
• CSS float can be used for text wrapping around images.
• Images can be used as links by nesting <img> inside <a>.
• <map> and <area> create client-side image maps with clickable regions.
• Optimize images for the web to ensure fast loading times.

HTML Image Tags

Tag	Description
	Embeds an image.
	Defines a client-side image map.
	Defines a clickable area within an image map.