Chapter 3Adaptive Images

Adaptive images, responsive web design’s second pillar, allows us to provide image solutions with no restrictions to a fixed display size; adaptive images respond to different viewport sizes and display resolutions. It seeks to overcome two problems facing visual elements in the age of mobile development. Let’s look at those now.

The first issue is that when a site’s structure is fluid, its content must be just as fluid; otherwise, the structure will move and expose whitespace next to any inflexible content elements. And while fluidity is easy enough for a site’s text, it’s not so much the case for graphical elements. When you’ve labored over cropping an image to the exact size and shape you need, or compress it to just ...

Get Jump Start Responsive Web Design now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.