Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on.You've got this!
HTML Images & the img Tag
Images are essential to web content. Learn how to embed images with the <img> tag, choose the right format (JPEG, PNG, WebP, AVIF), write meaningful alt text for accessibility and SEO, and control sizing with CSS vs HTML attributes.
The img Element
The <img> tag is a self-closing (void) element that embeds an image in the page. It requires two attributes: src (the image URL) and alt (alternative text describing the image). The alt text is critical - screen readers read it aloud for visually impaired users, search engines use it to understand image content, and it displays when the image fails to load. Google explicitly recommends descriptive, concise alt text for SEO.
Always include alt text for accessibility and set dimensions to prevent layout shift
Image Formats & When to Use Them
- JPEG (.jpg) - Best for photographs and complex images with many colors. Lossy compression. Smallest file size for photos
- PNG (.png) - Best for graphics with transparency (logos, icons). Lossless compression. Larger file size than JPEG for photos
- WebP (.webp) - Modern format by Google. 25-34% smaller than JPEG at same quality. Supports transparency and animation. Use as primary format with JPEG/PNG fallback
- AVIF (.avif) - Newest format. 50% smaller than JPEG. Best compression but slower to encode. Limited older browser support
- SVG (.svg) - Vector format for icons, logos, and illustrations. Scales to any size without losing quality. Can be styled with CSS and manipulated with JavaScript
- GIF (.gif) - Limited to 256 colors. Used for simple animations. Prefer WebP or video for better quality animations
Tip
Always specify width and height attributes on <img> tags, even if you resize with CSS. This prevents Cumulative Layout Shift (CLS) - the annoying page jumping that happens when images load. The browser reserves the correct space before the image downloads, keeping your layout stable.
Images Code Examples
<!-- Basic image with alt text -->
<img src="photo.jpg" alt="Golden retriever playing in a park" width="600" height="400">
<!-- Image with figure and caption -->
<figure>
<img src="chart.png" alt="Q3 revenue growth chart showing 15% increase">
<figcaption>Figure 1: Q3 2025 Revenue Growth</figcaption>
</figure>
<!-- Responsive image with srcset -->
<img
src="hero-800.jpg"
srcset="hero-400.jpg 400w,
hero-800.jpg 800w,
hero-1200.jpg 1200w"
sizes="(max-width: 600px) 400px,
(max-width: 900px) 800px,
1200px"
alt="Mountain landscape at sunset"
>
<!-- Lazy loading (native browser support) -->
<img src="below-fold.jpg" alt="Product showcase" loading="lazy">
<!-- Picture element for format fallback -->
<picture>
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<img src="photo.jpg" alt="Team photo at company retreat">
</picture>Try It Yourself: HTML Images
Quick Quiz: HTML Images
Key Takeaways
- Images are essential to web content.
- JPEG (.jpg) - Best for photographs and complex images with many colors. Lossy compression. Smallest file size for photos
- PNG (.png) - Best for graphics with transparency (logos, icons). Lossless compression. Larger file size than JPEG for photos
- WebP (.webp) - Modern format by Google. 25-34% smaller than JPEG at same quality. Supports transparency and animation. Use as primary format with JPEG/PNG fallback