How to Use the Image Tag

Images make web pages visually engaging. The <img> tag is how you embed images in HTML.

Basic Image Syntax

<img src="photo.jpg" alt="A beautiful sunset">

The <img> tag is self-closing — it has no closing tag.

Key Attributes

• src — The image file path or URL (required)
• alt — Alternative text for accessibility (required)
• width — Image width in pixels
• height — Image height in pixels

<!-- Local image -->
<img src="images/logo.png" alt="Company logo" width="200" height="80">

<!-- Online image -->
<img src="https://example.com/photo.jpg" alt="Example photo">

Why Alt Text is Important

• Screen readers read it aloud for blind users
• Displays when the image fails to load
• Helps search engines understand the image
• Write descriptive alt text: "Golden retriever playing in a park" not just "dog"

Image Formats

Format	Best For
JPEG	Photos, complex images
PNG	Logos, images with transparency
SVG	Icons, vector graphics
WebP	Modern format, smaller files
GIF	Simple animations

Setting Width and Height

Always specify dimensions to prevent layout shift — the page jumping as images load:

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