The flexible images are responsive web design’s second pillar. They allows us to provide image solutions with no restrictions to a fixed display size.
The flexible images, often also called adaptive images. respond to different viewport sizes and display resolutions. It seeks to overcome two problems facing visual elements in the age of mobile development.
Making images to scale with a fluid layout can be achieved simply for modern browsers. It's as simple as declaring the following in the CSS:
This makes any images automatically scale to up to 100 percent of their containing element. Furthermore, the same attribute and property can be applied to other media. For example:
And they will scale too. For now though, we'll concentrate on images as the principles are the same, regardless of the media.
There are some important considerations in using this approach. Firstly the images inserted must be large enough to scale to larger viewport sizes.
This leads to a further, perhaps more important consideration. No matter the viewport size or device viewing the site, they will still have to download the large images, even though on certain devices the viewport may only need to see an image 25 percent of its actual size.
This is an important bandwidth consideration in some instances so we'll revisit this second problem shortly.
Serving different images for different screen sizes
We have our images resizing nicely and we now understand how we can limit the display size of specific images should we choose to. However, earlier we noted the inherent problem with scaling images. They must be physically larger than they are displayed in order to render well. If they aren't, they start to look a mess. Because of this, images, in terms of file size, are almost always bigger than they need to be given the likely display size.
Fortunately Adaptive Images, created by Matt Wilcox, already deliver small images to small devices .
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques.
Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On those devices your desktop-centric images load slowly, cause UI lag, and cost you and your visitors un-necessary bandwidth and money. Adaptive Images in your website design fixes that.
So, what does this solution do?
- It allows
<img>s to adapt to the same break points you use in your media queries, giving granular control in the same way you get with your CSS.
- It installs on your server in five minutes or less and after that is automatic and you don’t need to do anything.
- It generates its own rescaled images on the server and doesn’t require markup changes, so you can apply it to existing web content.
Setting up and rolling out
- Download the latest version of Adaptive Images either from the website or from the GitHub repository.
- Upload the included .htaccess and adaptive-images.php files into the root folder of your website.
- Create a directory called ai-cache and make sure the server can write to it (
CHMOD 755 should do it).
<head> of your site:
That’s it, unless you want to tweak the default settings. You likely do, but essentially you’re already up and running
We have implemented adaptive images to our latest version of the CMS
. At first
we had slightly problem, because Adaptive Images are based on php, so we needed to create a custom solution based on .NET. As result we get much faster websites on mobile devices.
If you are searching for the best responsive web solution out here, please feel free to contact us
Responsive Web Design by Ethan Marcotte
24 Ways by Matt Wilcox
Jump Start Responsive Web Design by Craig Sharkie & Andrew Fisher
Responsive Web Design with HTML5 and CSS3 by Ben Frain