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, but Adaptive-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.

Issue - Mar-19-2012

Comments

  1. Le Roux, March 26, 2012

    I think I have a better proposal that would work with CSS and require no server scripts or javascript: http://opensores.za.net/2012/responsive-images/

  2. Joshua Sortino, March 31, 2012

    Le Roux, that’s a great idea, however, right now it is only a proposal. My tutorial was written to solve the problem right now. Hopefully something like what you suggested will be adopted by browsers and we can solve many issues we’re facing right now.

  3. Joshua Sortino, March 31, 2012

    Last comment should real “This tutorial was written to solve …”

  4. Joshua Sortino, March 31, 2012

    read* (Need a way to edit comments. Clumsy fingers today!)

  5. dsadasdsad, December 4, 2012

    dsadasd

Leave A Comment:

Name:

Email:

Website: