How To Serve True Responsive Images

How To Serve True Responsive Images


Ethan Marcott, the one who coined the term 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 Fill

Picture Fill is a tiny JavaScript library that is developed by Scott Jehl. It mimics how works using the 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>


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

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)

Final Thought

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, will be a recommended solution in the future. So, until then, it seems that we are stuck with Fluid Image.

 Our Sincere Thanks to Thoriq Firdaus for this post

Share this post