Responsive images serve appropriately sized files to each device. A 4K desktop needs a larger image than a phone. HTML srcset attribute lists multiple sizes: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 400px, 800px">. The browser picks the best fit. Combined with WebP format and lazy loading, responsive images can reduce page weight by 50-70%.
glossary2 min read
Responsive Images
Serve different image sizes for different screen sizes with srcset.
Try these tools
More glossary articles
What is WebP?
WebP is a modern image format by Google offering superior compression. Learn when and how to use WebP images.
What is HEIC?
HEIC is the default photo format on iPhones. Learn what it is, why Apple uses it, and how to convert it.
What is JSON?
JSON (JavaScript Object Notation) is the standard data format for web APIs. Learn the syntax and common uses.
What is Regex?
Regular expressions (regex) are patterns for matching text. Learn the basics and common use cases.