Responsive-images is the part of Responsive Web Design (RWD) dealing specifically with images on the web to provide optimal experiences across a wide range of devices based on screen size, platform, and orientation.

- Stackoverflow.com Wiki
3 articles, 0 books.

Use responsive images and asynchronous loading to lower initial page weight by ~80% and improve the Speed Index. For further improvements, use mozjpeg smartly to reduce JPEG file size for initially visible images and consider alternate formats such as BPG for initially invisible images.


Responsive images have been around long enough for most of us to have taken them for a spin, or at least to have learned from the experiences of those who have.


If you already know your way around srcset, w descriptors, and sizes, you might not know exactly how browsers use it to load images responsively. The mechanics are interesting, and have some confounding side effects.