Responsive Image
A technique for delivering optimally sized and formatted images based on the viewing device's screen size and pixel density, preventing unnecessary data transfer.
Responsive images deliver appropriately sized images based on the viewing device's screen width and pixel density. Sending a 4000px-wide image to a smartphone wastes bandwidth; selectively serving display-appropriate sizes dramatically reduces transfer.
HTML's srcset and sizes attributes present multiple image candidates to the browser. The <picture> element enables format switching (WebP for supporting browsers, JPEG fallback).
Implementation requires pre-generating multiple image sizes. The batch resize tool creates variants at 320px, 640px, 1280px, and 1920px for srcset enumeration. Combined with lazy loading, this delivers only needed images at appropriate sizes.