Responsive Web Design: The Flexible Images
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:
img {
max-width: 100%;
}
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:
img,object,video,embed {
max-width: 100%;
}
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
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.
- If you wish, it will make all of your images go mobile-first (just in case that’s what you want if JavaScript and cookies aren’t available).
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 755should do it). - Add the following line of JavaScript into the
<head>of your site:
<script>document.cookie='resolution='+Math.max(screen.width,screen.height)+'; path=/‘;</script>
That’s it, unless you want to tweak the default settings. You likely do, but essentially you’re already up and running
Adaptive Images isn't restricted to static sites. It can also be used alongside Content Management Systems and there are also workarounds for when JavaScript is unavailable. With Adaptive Images, there is a way to serve entirely different images based upon screen size, saving bandwidth overheads for devices that wouldn't see the benefit of the default full size images.
If you are searching for the best responsive web solution out here, please feel free to contact us.
Resources
Responsive Web Design by Ethan Marcotte
Jump Start Responsive Web Design by Craig Sharkie & Andrew Fisher
Responsive Web Design with HTML5 and CSS3 by Ben Frain
Posted by Ingenium Web
iNGENIUM Ltd. is an software development company from EU which delivers a full range of custom .NET, web and mobile solutions for different business to meet partner's demand.
The Power of Imagination Makes Us Infinite
Related Posts
Today's internet era is more about having a mobile-friendly website that is easy to access and control.
The number of mobile users has been growing continuously.
Need a good reach? Go mobile. Want to improve your brand’s visibility? Get onto the mobile. Want to enhance your user base? Create a mobile app.
When mobile internet usage surpassed that from desktop devices, it didn’t come as a blow to those who were paying attention.
Comments
comments powered by Disqus