O'Reilly logo

Responsive Web Design: Solutions For Responsive Images by Smashing Magazine

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Automate Your Responsive Images With Mobify.js

By Shawn Jansepar

Responsive images are one of the biggest sources of frustration in the web development community. With good reason, too: The average size of pages has grown from 1 MB to a staggering 1.5 MB1 in the last year alone. Images account for more than 60% of that growth, and this percentage will only go up2.

Much of that page weight could be reduced if images were conditionally optimized based on device width, pixel density and modern image formats (such as WebP3). These reductions would result in faster loading times and in users who are more engaged and who would stick around longer. But the debate isn’t about whether to optimize images for different devices, but about how to go about doing ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required