Responsive design demands two major qualities- flexible images and media. It seems like an easy thing to do from the surface. However, beneath the surface lie a lot of technicalities to consider. You simply cannot call it a day by removing the width and height attributes on images or by simply setting their maximum width to 100%. While working with such attributes, you might face challenges with performance or with art direction. In such a situation what can be the right solution? Well, there is a wide field of responsive image solutions to help you deal with the responsive designing issues quite efficiently.
Let me inform you beforehand that while working with responsive images, you might come across some major challenges. Do you know the solutions to those problems, well, if not, reading this blog post will make you aware of the possible problems associated with responsive images and its right solutions.
Common problems with responsive images:
The performance problem:
With responsive design, small icons and logos are not an issue, but the problem crops up with larger and heftier images. On top of that Retina images aggravate the problem. Of course, in such a situation, you will not send a big Retina image to a device that is not capable of displaying the entire details. Is it possible for a 990*300-pixel 100 KB image meant for desktop to a mobile phone? Obviously it is not. Smartphones and tablets do not need images larger than they can display. It simply kills the bandwidth. Moreover, if the page takes too long to load it only leads to potential customer lost.
Bandwidth detection problem:
Network speed is important for all devices to run smoothly. You can only feed larger images on those devices that are on a speedy network. Even if bandwidth is not an issue, then you have to check whether the same image works at different sizes. What is communicated in the details of a 1000px image might be lost when the image is 300px. Instead of resizing, it is always better to crop the image or use an entirely different one in its place.
The art direction problem:
Supposedly, you have a beautiful image on your home page. It shows a wide expanse of fields and forests, clear blue sky and fluffy clouds with a happy family enjoying their picnic on the grass. Now if you want to scale it down to 300px wide in your mobile the family would look more like the ants at the picnic.
Here lies the problem with art direction. Some images just do not tune well and all the details and dramatic impact is lost.
All these problems need responsive image solutions that help you to specify different versions of the image for different situations or adjust the image according to the size of the devices.
So, what are the best possible solutions? Let’s find it out-
Thankfully, the web development and designing community have creative people who have been working hard to solve these problems associated with responsive images. Take a quick look at them-
A new image format:
Christopher Schmitt called for a new image format. The new responsive image format would be a container of several different sized versions. For instance, a 100K file might have a 75K version, 20K version or the 5K version of the same image inside. In a nutshell, it would work like .mp3 files that can store both the Meta information of the songs and the song. Instead of Meta information this new format will store different variations of the image.
A standard set of rule will determine which of the inside images will get served to the device. Even the code does not change other than just using a new image extension. One of the important feature is that the new format will determine the rules for which version gets delivered and when.
Although, Picturefill does not entail JQuery however it definitely requires the picturefill.js script to get integrated somewhere in the page. Also Picturefill require special markups with divs to represent image variations differentiated by data-media attributes that act like media queries in CSS.
Adaptive images by Matt Wilcox is a server-side solution where the real work is done through Apache 2 Web server, GD library and PHP 5.x. To get the help of adaptive images, you have to do the following activities:
- Upload PHP files to your website’s root directory
- Configure breakpoint variables in the PHP files to match the website’s media query
- Add or alter .htaccess
Adaptive images do not require any special markup on any of the images. Once it is installed and configured correctly, it is all set to function.
HiSRC is a jQuery plugin that enables you to create high, medium and low resolution versions of an image. The script will show those images which are appropriate based on the network speed and Retina- readiness. The solution is found by Christopher Schmitt and Marc Grabanski. HiSRC can handle multiple images that are added to the pages dynamically. It allows you to specify the different crops and size to overcome the art direction issue.
Sencha.io src is a third party solution that acts as a proxy for all the images. Therefore, you do not require to configure anything on the server. All you need to do is point your image at the sencha’s servers and sencha will process it and send it back accordingly to a resized version as required.
This solution uses a user – agent string for detection and resizes your images to fit the width of the device’s screen. It is one of the most convenient adaptive image solutions and is a free service for individual users.
Now it will be quite interesting to watch which best solution will rule the responsive design community.