Responsive Images

Definitions

1. HTML techniques for serving appropriately sized images based on the viewer's screen size, pixel density, and supported formats. Uses srcset (multiple resolutions), sizes (layout hints), and the <picture> element (art direction and format selection). Prevents mobile users from downloading 4K images and desktop users from seeing blurry thumbnails.

   In plain English: Serving different sized images to different devices so phones don't download huge desktop images.

   Example: "<img srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1600.webp 1600w" sizes="100vw"> — the browser picks the right size for each device."

Related Terms

• Hydration
• Islands Architecture
• Virtual DOM
• Debounce
• Throttle
• ARIA
• Code Splitting
• Skeleton Screen
• XHTML