As internet speeds have improved, we’ve gotten used to exploring beautiful, high-definition photography on large screens with little to no parameters. But as the mobile revolution changes the way we interact with the internet, we’ve had to adjust how these images are served for a host of smaller, differently oriented screens. While responsive design has done wonders for the ways we consume content, it’s often been a struggle to correctly display these images across all platforms.
Common Problems with Responsive Design Images
Making “responsive” images is actually a relatively simple process — just set a variable percentage width. For example, take a look at the screen shots and code below:
img { width: 100%;height: auto; }
While most sites build out full responsive layouts with a few “fluid” rules like this, this simple approach doesn’t work for all circumstances — especially when considering the slower download speeds and screen-size ratios of mobile devices.
There are a ton of factors when it comes to implementing responsive images; we’ll be focusing on two of the bigger roadblocks here. If you’d like to read a more comprehensive breakdown, see Chris Coyier’s article on finding the right responsive image solution.
Dealing with Bandwidth
One of the most substantial issues when dealing with responsive design is simply that mobile networks don’t have sufficient speeds to serve up full-resolution images. A photography site that loads in two seconds on a cable connection can often screech to a halt if accessed from a 3G or EDGE connection. And while 4G speeds are improving these issues, we’re still a long way from reaching comparable wired speeds.
In order to deal with this issue, developers have started to serve up different images based on the device browser width. This is often referred to as adaptive design. See below:
In essence, this allows a mobile phone to download a substantially smaller image file (20kb) while simultaneously giving a desktop user access to the full resolution image (200kb).
While the development process of these tools is rather complicated, implementing these adjustments in your designs isn’t too difficult. One of the best free tools, Adaptive Images, simply requires the addition of a few PHP files and one line of JavaScript.
Instead of loading an inherent image path, tools like Adaptive Images pass the image requests through a server-side PHP file that determines which image the device should download, based on its screen width. In short, big screens get the big files, while small screens get the small ones.
The Problems with Aspect Ratio
When it comes to desktop computers, we’re used to 16:9 aspect ratios on our monitors. It only takes a few minutes on the web to notice that most images are horizontally oriented and designed to take advantage of these wider screens. But how do these images translate to smaller, vertically oriented mobile screens?
I’ve recently been working on a project for an image post-production firm. From the nature of the work, it’s obvious that this firm needs its images to really shine. Of course, this can be problematic when trying to load the site on mobile platforms. (Note: screenshots are taken from a site test build, and not the company’s live site.)
Notice that when the images are styled with fluid widths, a lot of visual information is lost. What once was a large, vivid photo is now a small, awkward strip.
For many sites, these issues may not be of primary importance. But for those that need to make sure their images remain at the forefront of the design, regardless of platform, there are a few solutions.
Similar to the way that the bandwidth issue is handled, services like Picturefill also allow websites to serve up different images based on the device’s screen width. However, unlike Adaptive Images, Picturefill allows you to specify specific sources for each circumstance, like so:
<img src=”external/imgs/small.jpg” >
So a mobile device with a 320px screen width will be served a specialized image that can be custom cropped for best application. While this takes substantially more planning, and doesn’t offer the most semantic code, it’s an effective way to have control over exactly which images are displayed for each device scenario.
There are still issues with “hacks” like these, though. For example, how do we determine which resolutions get which images? Should we serve up 3 different images, or do we need 12 to account for retina/high-resolution displays? In short, since our current web standards don’t really allow for a proper fix, the issue of truly responsive images can quickly become quite a nightmare.
At this stage, a lot of developers are pushing for new shifts in the ways that we code images in web design. But, at the moment, opinions remain split on what the best solution actually is for moving forward. To find out more about the complexity of the issue, check out Paul Lloyd’s article on responsive images.
Moving Forward
As you begin to implement responsive styling on your site, be sure to determine which issues are most important to you. This is always the best way to wade through the numerous opinions and solutions. Will you be hosting a lot of large images? Do you want to serve different images to different platforms? Is semantic code/validation really important to you?
All of these factors will affect which approach you take. As you navigate through these steps, take time to refer to charts and other online resources, like this responsive images chart, to make sure you find the right solution for your own needs.
What kinds of problems are you running to with responsive images? Are there any other specific tools you’d recommend? Let us know in the comments below.
Luke Clum is a Seattle-based graphic designer and web developer. You can chat with him on Twitter @lukeclum.
