Working with Images

Images make web pages visual and engaging. The <img> element embeds images in HTML documents.

Basic Image Syntax

Required attributes:

• src - Image URL or path
• alt - Alternative text description

The Importance of Alt Text

Alt text guidelines:

• Describe the image content and purpose
• Keep it concise (under 125 characters)
• Use alt="" for purely decorative images
• Don't say "image of" or "picture of"

Image Dimensions

Always specify dimensions:

• Prevents Cumulative Layout Shift (CLS)
• Improves Core Web Vitals
• Use CSS for responsive behavior

Lazy Loading

The loading attribute:

• lazy - Defer loading until near viewport
• eager - Load immediately (default)

Image as Link

When using images as links:

• Alt text should describe the link destination
• For image + text links, use empty alt

Common Image Formats

Format	Best For	Features
JPEG	Photos	Lossy compression
PNG	Graphics, transparency	Lossless
WebP	Modern websites	Best compression
SVG	Icons, logos	Vector, scalable
GIF	Simple animations	Limited colors

Exercise: Add Images with Alt Text

Add images with appropriate alt text:

Proper image usage improves both accessibility and performance!