HTML Images

Master the art of adding visual content to your web pages with HTML images!

🖼️ Visual Content

♿ Accessibility

⚡ Performance

Quick Navigation

📝 Basic Syntax 🔧 Attributes 🌐 Browser Process 🎮 Playground

What are HTML Images?

The <img> tag is used to embed images in web pages. It's a self-closing tag that pulls images from external sources.

🎯 Why Images Matter:

👁️Visual Appeal - Make content engaging and memorable
📖Content Enhancement - Show what words can't describe
♿Accessibility - alt text helps screen readers
🔍SEO Benefits - Images can appear in search results

🏞️

Image Formats

JPEGPhotos

PNGGraphics, Transparency

GIFAnimations

SVGIcons, Logos

WebPModern Web

📝 Basic Image Syntax

The <img> Tag

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

💡

Self-Closing Tag

The <img> tag doesn't need a closing tag - it's self-contained!

📁

External Reference

Images are loaded from external files, not embedded in HTML

Live Example

<img src="landscape.jpg" alt="Beautiful landscape with mountains and lake">

🔧 Image Attributes Explained

🎯 Required Attributes

src (Source)

Specifies the path to the image file

src="images/photo.jpg"

Paths can be: Relative, Absolute, or Full URL

alt (Alternative Text)

Provides text description for accessibility

alt="A red apple on a wooden table"

Used by: Screen readers, when images fail to load, SEO

⚡ Optional Attributes

width & height

Specifies image dimensions in pixels

width="400" height="300"

Benefit: Prevents layout shifts during loading

loading

Controls when the image loads

loading="lazy"

Values: eager (default), lazy (load when visible)

👀 Visual Attribute Guide

Attribute Explorer

Live Demonstration

📁 → 🖼️

src Attribute

<img src="images/photo.jpg" ...>

What it does:

The image file path or URL

Example:

src="images/photo.jpg"

Importance:

Required

🌐 How Browsers Process Images

Browser Processing Journey

Follow how the browser processes an image from HTML to screen

HTML Parsing

Browser reads the HTML and encounters the <img> tag

📄 → 🔍

Source Resolution

Browser determines the image file location

🔍 → 📁

HTTP Request

Browser sends request to fetch the image file

🌐 → 📡

Download & Decode

Image data is downloaded and processed

📥 → 🖼️

Rendering

Image is displayed on the page

🎨 → 👁️

Accessibility

Alt text is available for screen readers

♿ → 📖

Step 1: HTML Parsing

📄 → 🔍

HTML parser identifies the image element and its attributes

<img src="photo.jpg" alt="Description">

What happens:

Browser reads the HTML and encounters the <img> tag

Browser Action:

Creates DOM element and collects attributes

Complete Processing Flow

📄

Step 1

→

🔍

Step 2

→

🌐

Step 3

→

📥

Step 4

→

🎨

Step 5

→

♿

Step 6

💡 Real-World Examples

🏞️

Basic Image

<img src="landscape.jpg" alt="Mountain landscape at sunset">

Simple image with descriptive alt text

Use Case: General purpose images

📐

With Dimensions

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

Image with specified width and height

Use Case: Preventing layout shifts

🚀

Lazy Loading

<img src="banner.jpg" alt="Promotional banner" loading="lazy">

Image loads when it enters viewport

Use Case: Below-fold content

🔗

External URL

<img src="https://example.com/image.jpg" alt="External image">

Image loaded from external source

Use Case: CDN or external hosting

💫

With CSS Class

<img src="avatar.jpg" alt="User avatar" class="rounded-full">

Image with CSS styling class

Use Case: Styled images

♿

Decorative Image

<img src="divider.png" alt="">

Empty alt for decorative images

Use Case: Visual elements without meaning

♿ Accessibility & Best Practices

🎯 Writing Good Alt Text

✅ Do's

✓Be descriptive but concise
✓Include text that's in the image
✓Describe the purpose, not just content
✓Use empty alt for decorative images

❌ Don'ts

✗Start with "image of" or "picture of"
✗Use filenames as alt text
✗Write overly long descriptions
✗Skip alt attribute entirely

📊 Alt Text Examples

✅

Descriptive & Concise

alt="Golden retriever playing fetch in the park"

❌

Too Vague

alt="Dog" (What kind? What is it doing?)

✅

Functional Context

alt="Download PDF file" (for download button image)

❌

Filename as Alt

alt="IMG_0234.jpg" (Not helpful for users)

✅

Empty for Decorative

alt="" (For purely decorative images)

❌

Missing Alt

No alt attribute (Poor accessibility)

🎮 Image Playground

Configure Your Image

Image URL (src)

Alt Text

Width

Height

Loading Behavior

💡 Try These URLs:

Live Preview & Code

Generated HTML Code:

<img 
  src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4"
  alt="Snowy mountain landscape under blue sky"
  width="400"
  height="300"
  loading="eager"
>

Current Settings:

Size: 400×300px

Loading: eager

Accessibility:

✅ Alt text provided

⚡ Performance & Optimization

📐

Right Size & Format

Use appropriate dimensions and modern formats like WebP for better performance.

🚀

Lazy Loading

Use loading="lazy" for images below the fold to improve initial page load.

🎯

Dimensions

Always specify width and height to prevent layout shifts and improve CLS.

🚀 Performance Best Practices:

• Compress images without losing quality
• Use responsive images with srcset
• Implement lazy loading for off-screen images
• Consider using CDN for image delivery
• Specify dimensions to prevent layout shifts

Ready to Learn More?

🔗

HTML Links

Connect your web pages together

🎨

Image Styling

Make your images look amazing with CSS

📱

Responsive Images

Optimize images for all devices