Responsive Images and the Picture Element
Serve appropriately sized images with srcset, sizes, and the HTML picture element.
Responsive Image Challenges
A full-resolution desktop image downloaded on a mobile device wastes bandwidth and slows load time. Responsive images serve the right image at the right size for the device.
max-width: 100% Baseline
The minimum responsive image rule: prevent images from overflowing their container while preserving aspect ratio.
img {
max-width: 100%;
height: auto;
display: block;
}All lessons in this course
- Mobile-First vs Desktop-First Approach
- Fluid Widths with Percentages
- Min-Width and Max-Width Patterns
- Responsive Images and the Picture Element