Responsive Image Solutions: Fluid Images
Introduction
In an earlier article we outlined some of the main issues regarding images in responsive websites. This will be the first of a series of episodes looking at various solutions to these issues which will include:
- Fluid Images
- Picturefill
- Adaptive Images
In this installment we are going to look at the first of these and the most basic responsive image solution of all: Fluid Images - which aims to address the scaling issue.
A word of warning: I will be assuming a degree of technical knowledge in this episode as I will cover specific details of this solution! Despite this, i will attempt to explain the gist of this in a non-technical way, so even if you are not initiated into the dark arts of coding but are still curious - do read on.
Fluid images
One of the first issues we highlighted in my earlier ‘issues’ article was regarding the fact that in the past images had only fixed widths and heights and nothing more - which in a responsive website prevents the image from adapting it’s size while the rest of the site changes according to the size of the viewing device. Thankfully rectifying this issue is relatively straightforward by making our images ‘fluid’. This involves the following change:
Adding the following CSS:
img {
max-width: 100%;
height: auto;
}
The net result of this will be to ensure the image will be free to scale down or up in relation to the container its in, with the caveat of not scaling any bigger than its actual size (i.e. max-width: 100%) which ensures that the quality of the image will not degrade by being expanded too much.
If you need to support IE 6 & 7 then in addition you will need to include the following CSS just for these browsers:
img {
*width: 100%;
}
As these browsers do not understand max-width! You can target these browsers by adding the rule above which includes the ie * browser hack, or as we prefer by including an ie specific css file with a conditional include:
<!--[if lt IE 8]>
<link rel="stylesheet" type="text/css" href="ie7.css" />
<![endif]-->
Which will include these styles for all ie browsers below ie7. So looking at this solution - how does it measure up to the issues we face ?
Pros:
- Solves the ‘Scaling’ issue
- Easy to implement & no ongoing work required
- Compatible with many other responsive image approaches as a ‘basic responsive layer’
Cons:
- Does not address the performance issue
- Does not address the screen resolution issue
- Does not address the art direction issue
Conclusion
In this installment we have looked at the fluid images solution which addresses the scaling issue in responsive images. While this solution does not solve all responsive image issues at all, it is very compatible with other solutions that do try to address those issues and so is a great easy first step for a website whose images are not yet responsive at all.
In our next installment we will be looking at a solution with a far more ambitious scope, that has been hailed in many quarters of the web design community as virtually the ‘second coming of christ’ for responsive images! - Picturefill. Will this solution live up to all the hype ? Or crash to earth like a damp squib under objective scrutiny ? Stay tuned for the next installment…..
Update 16th March 2016
This basic approach continues to be written about and popularised in various blogs and sites. For any consideration for responsive images - having a fluid image layer is a virtual no-brainer for providing a very quick and basic level of responsive images.
Recent articles:
- http://www.hostingreviewbox.com/x-tips-for-beginners-to-get-you-started/
- https://developer.mozilla.org/en-US/Apps/Progressive/Responsive/responsive_design_building_blocks
- http://ux.stackexchange.com/questions/91434/handle-responsive-images