Adaptive Images- What are they and why are they valuable?

Keeping mobile in mind, incorporating fluidity, starting small and building up. These are all ingredients of a successful responsive web design. However, a key task remains: delivering the right images for each screen size.

When delivering graphic elements, as with other aspects of responsive design, the challenge is to deliver the highest quality content without overloading bandwidth or sacrificing usability.

Designers find themselves in a pickle. They can ride the emerging mobile wave by delivering small, low-res images that don’t look nice on bigger screens, or they can deliver sharp, high-res images that look great on fast devices, but take forever to load on weaker connections.

CSS is lauded for its adaptability to different window sizes and ability to scale background images. Unfortunately, html and <img>s are more static, but they can’t be left behind. Adaptive image solutions overcome the limitations of <img>s and serve up appropriately-sized images for each device.

So how does this happen? Think of adaptive images as responsive designs optimized for image delivery.

There’s no uploading multiple images or complicated code to re-enter whenever you have an <img>. Just start with the desktop resolution in the markup as you normally would. Then, adaptive imaging automatically brings the  <img> tag to the modern web, allowing <img>s to adapt to the same break points used in media queries; generates its own rescaled images; and can be applied to existing web content. All it takes is a single installation on your server, which doesn’t require markup changes- pretty nifty stuff.

To quote Bob Ryan from Entourage, if this sounds like something you might be interested in, check out the rest of Matt Wilcox’s post on 24 Ways and start some adaptive imaging projects yourself. Adaptive images are still coming into their own- so there is room to contribute to their evolution and make your mark, too.