Pure Awesomeness

Responsive Images


Most responsive designs use Max-width to create flexible images. To make the images fluid, just add max-width:100% and height:auto.

The max-width: 100% treatment ensures that your images never exceeds the width of its parent element. If the width of its container changes, the image resizes proportionally in nearly all modern browsers.

Filament Group introduced a practical technique that delivers optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

This technique uses .htaccess files and a JS file to serve up different sized images based on the screen width. This approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes. You can view a demonstration of the technique here.

Matt Wilcox took a similar approach to the mobile image problem and created a solution called Adaptive Images. The Adaptive Images script works much like the Filament Group’s Responsive Images code, butAdaptive-Images doesn’t require you to do anything special or even create the different versions of the images yourself. Just drop in the Adaptive Images code and you’re done.

Craig Russell developed a technique that uses a server side script (in PHP) to serve up images of several different resolutions. It requires a small amount of JavaScript and can scale quite easily. The PHP script has a nested array that lists images files and their relative percentage scales. For each image file the nested array describes the file’s scale.

Leave a Reply