Images are one of the most important elements on a web page in terms of user experience. Few objects on a page have the same impact on everything from emotional responses to bounce rates.
When users are viewing your site on mobile devices, small screens, or in other unusual situations the images can distort the page and ruin your careful site design. That’s why responsive design is being developed. In this post we examine the use of images in responsive design
The Challenge Of Images In Responsive (& Mobile) Design
Responsive design has the web industry talking. Rightly so – it’s the most important development in web design for years. For the first time, devices of all shapes and sizes will have the opportunity to experience a beautiful and feature rich Internet. For those not in the loop, responsive design builds sites to adapt to the display area (browser window) available to them. Whilst this is a great opportunity to make the Internet better, that’s not to say the advantages are without challenges. One of the most interesting being the handling of images. Let’s examine some basic techniques along with the problems they pose.
A Simple Fit
Seting the images so their width can never be greater than their container element is one of the easier ways to allow images to adjust to the page size automatically. As the column they are contained in shrinks, for example, the would simply scale down to match. You can even include videos and other objects the same way.
Imagine the layout on the left (1) with one large image clearly dominating the other two. As we shrink our display area, designers have chosen to move to a one column layout (2) and ensure the images are set to never go beyond 100% of the column width resulting in the layout on the right.
You can see that the lower images have doubled in relative size on the mobile screen, but our main image has become an extremely thin letterbox atop the two now dominant images. This clearly isn’t the intention of the design.
Dave Rupert has a really nice solution to this phenomenon:
|
1
2
3
4
5
6
7
|
.banner-item { overflow: hidden; min-height: 300px; /* 300px is arbitrary. */}.banner-item img { width: 100%;} |
By fixing the height of the header image and allowing it to overflow we ensure the image ranking is maintained. As we see in the simple picture for narrow screens, image height determines this instead of width.
Think Responsive And Look Forward To Developments To Come
The most important thing about responsive design is that we keep thinking and looking forward to a time when users on all devices can enjoy a beautiful web. As problems such as those examined here present themselves, web technologies and development tools will advance to fill those gaps. In the mean time we’ll cover some useful issues and provide some interesting additional reading for advanced users looking to tackle these issues in their designs.
Other Solutions
Adaptive Images
A Javascript solution for your website’s content images. No need to change your mark-up, it manages its own image re-sizing, and will work on any CMS or even on static HTML pages.
Responsive Images Using CSS3
This method relies on the use of @media queries, CSS3 generated content, and the CSS3 extension to the attr() function.
Resizable Images at Full Resolution
The trick to this solution is to make sure your starting image is larger than the default size.
Responsive Images: Experimenting with Context-Aware Image Sizing
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
Fluid Images
By Ethan Marcotte on Unstoppable Robot Ninja.