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.
35 min•By Priygop Team•Last updated: Feb 2026
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.
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
Images Code Examples
Example
<!-- 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
Try It Yourself: HTML ImagesHTML
HTML Editor
✓ ValidTab = 2 spaces
HTML|22 lines|1118 chars|✓ Valid syntax
UTF-8