5 Methods To Serve True Responsive Images
Ethan Marcott, the one who coined the term Responsive Web Design, stated in his article that Fluid Image is one of the ingredients of Responsive Web Design. The problem with Fluid Image, however is that eventhough the image seems to be responsive and could fit nicely in various viewport size, the same image size is downloaded by the users regardless of the medium the image is being viewed on.
This is bad news for users who have a limited data plan but is not in the know, and it makes your site seem ‘slow’ in areas with dismal Internet speed connections.
This is one of the most discussed issues among web developers. And there is a whole lot to do before RWD can be a proper end-solution for building a mobile-optimized website. At the moment there are various emerging techniques and tools that try to solve this hurdle. Let’s look at them a few of them now.
Recommended Reading: 50 Useful Responsive Web Design Tools For Designers
1. Adaptive Image
Adaptive Image is a small PHP script that detects user screen size and deliver the proper image for that screen size. It does not require the changing of your current
<img> markup, but the implementation is rather intimidating for less tech-savvy users.
(Image source: AdaptiveImage)
2. Responsive Image Using Cookies
However, this technique has a lot of issues and require some more experimenting before it can become a practical solution. You can read his explanation as well as get the code from the article at Clark’s blog, Responsive Image Using Cookies.
3. Sencha.io Src
The API has a set of functions allowing flexibility over the output. For more technical details, head over to this reference.
(Image source: Sencha)
4. HTML5 Picture Element
This seems to be the future standard of responsive image. A new element called <picture> is proposed to allow us to set different sources of images, and also to refer to the breakpoint for which the source of image should be served, like so:
<picture id="images"> <source media="(min-width: 45em)" srcset="large-1.jpg 1x, large-2.jpg 2x"> <source media="(min-width: 18em)" srcset="med-1.jpg 1x, med-2.jpg 2x"> </picture>
This element, however, is still in a Working Draft stage. It is not yet applicable. Until then you can use a Polyfill called Picture Fill.
<picture> works using the
<span data-picture data-alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> <span data-src="small.jpg"></span> <span data-src="medium.jpg" data-media="(min-width: 400px)"></span> </span>
If you are using WordPress as your publishing platform, you are lucky, as there are several plugins that serve the image in a way similar to the
If you use Drupal, there is a project called Picture that works the same way.
5. Focal Point
Focal Point is a framework that allows developers to “crop” images and control the focus on its focal point for responsive design. This technique is purely done with CSS; the author simply adds the classes in the element that contains the image.
It is worth noting though that the trick in this technique is by using
overflow:hidden to hide part of the image. So the image is not (technically) cropped, which means we end up of downloading the same image size. In addition, this also might not work in the case where the image is not wrapped with an element.
(Image source: Noupe)
As said, there isn’t yet one implementation that sets a standard to answer this issue completely. These techniques and tools although listed above as solutions, have their own drawbacks and none can come out as the final solution for every case.
It is also unsure whether the new proposed property,
<picture> will be a recommended solution in the future. So, until then, it seems that we are stuck with Fluid Image.