Self-adapting images in responsive design

adminCSS, HTML, JavaScript0 Comment
5 min. reading

In my humble opinion, responsive design is a future. One layout, carefully designed, will look beautiful and by user-friendly, no matter, which device user will use to view it. Of course, you can craft responsive designed website by hand, but the easiest way is to use some framework. But what about non-framework elements, like for example images? How to style them, what size should they have, to be responsive and look exactly like other, framework elements, on any device?

There are at least few approaches to solve this problem, among which one or two are not that famous.

Method 1: CSS Media Queries = Responsive design-oriended framework

There are many responsive design-oriented frameworks out there. To count:

I’m using Bootstrap, because it is recognized as the best or one of the best resposive design frameworks by many plus it has a lot of components, CSS additions and JavaScript tools to use. Therfore, it allows to create entire website, responsive designed and beautifully looking, using only this one library.

To make an image like that, all you have to do (as sanusart says) is to omit width and height on the <img /> tag. Then, if it’s parent element is responsive, it’ll scale the inner image.

I use Twitter Bootstrap to show an example. Using this framework, all you have to do, is to put your image inside responsive container, for example well:

<div class="well">
    <img src="img/logo.png" class="img-polaroid" />
</div>

And your image will adapt its dimensions according to screen resolution.

If you would like to separate it with left and right margin,
you can use fluid layout, for example like that:

<div class="well">    
    <div class="row-fluid">
        <div class="span2"></div>
        <div class="span8"><img src="img/sunflower.jpg" /></div>
        <div class="span2"></div>
    </div>
</div>

But we aware, that on a wide screens (like phones in portrait mode) your left and right “separators” will be stacked top and bottom, which may produce unwanted side effects.

You can, of course, use CSS Media Queries in a bit different way for images — i.e. provide few fixed-size images and define in CSS, which one to use for which screen resolution. But this does work only for background images, as CSS has no way to change <img src=""/> attribute.

Method 2: Javascript + server-side image resizing

Using CSS Media Queries is an easiest approach, but it has a large, bad impact on bandwidth. To have image look great on any device, you have to design it to the biggest ones and let the framework (media queries) downscale it to proper size.

For current devices (iPads and iMacs with Retina display) that means 2000px wide images for fullscreen photos, which (when have many details) can have as much as 1,5 MB or 2 MB or even more file size.

So, if you care about bandwidth you should consider resizing the photos on the server side, depending on the resolution the clients will request. There is a library called Adaptive Images, which works quite good with PHP on the server side. I guess you can find libraries for any language you need.

If you’re lazy to setup your one solution, you can try a third party service like [http://docs.sencha.io/current/index.html#!/guide/src][2]. We can name it Resizing-as-a-Service. You can use it as ease as for example like that:

<img src="http://src.sencha.io/160/100/http://sencha.com/files/u.jpg" />

But then, again, this convinient solution needs exact, fixed image size, which breaks the idea of fluid layout system, self adapting to screen resource, as discussed in previous paragraph.

Summary

You’ll find a lot posts and blogs on these matters across the Internet.

I think, that this article is especially worth reading, if you’re in need of more detailed information.

Leave a Reply