How to Serve True Responsive Images (5 Methods)

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 even though the image seems to be responsive and could fit nicely in various viewport sizes, 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.

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

Keith Clark has his approach to serving responsive images with Cookies. It technically detects the screen size by using JavaScript and sizes the proper image size using PHP before it is served and loaded on the page.

However, this technique has a lot of issues and requires 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

Sencha is a mobile development framework that allows us to build a native-looking app with HTML, CSS and JavaScript. If you build your app with Sencha, you can utilize its API, Sencha.io Src, for resizing your images in a smart way, based on users device screen size.

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 images. 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">
  <img src="default.jpg" alt="description of image">
</picture>
 

This element, however, is still in the Working Draft stage. It is not yet applicable. Until then you can use a Polyfill called Picture Fill.

Picture Fill

Picture Fill is a tiny JavaScript library that is developed by Scott Jehl. It mimics how <picture> works using the <span> element.

<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>
 

Plugins

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 <picture> element.

• PB Responsive Image
• WP Responsive Image
• Simple Responsive Image
• Picture Fill WP

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 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

Final Thoughts

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.