June 29, 2015

391 Views

Responsive Web Design - A Boon in Web Technology

Responsive Web Design (RWD) is a boon in web technology. Even though a lot of techniques have evolved to achieve it efficiently, the fact remains that no RWD solution is complete without a suitable technique for dealing with images. The main problem is, big screens require images with high resolution for sharpness, and small screens require less resolution to save on bandwidth. Whatever the techniques we use for dealing with images in RWD, we should follow the two crucial factors given below:

  • Bandwidth: High resolution images are used for greater clarity in retina display and in desktops. But, in mobile networks, it will consume more bandwidth and increase website loading time. Therefore, you need to replace that high resolution image with a low resolution image.
  • Art direction: As you might be aware of the famous quote - "A picture is worth a thousand words", images with a lot of detail will not be so clear in a smaller viewport. So we need an alternative method using CSS or some other technique.

The Current Techniques

An easy way of making an image fit for all devices is using the CSS code given below:

img { max-width: 100%; height: auto; }

This will expand the image fully up to its parent element’s width and not beyond it. But this way, the bandwidth will not be saved and it will not follow the prescribed art direction.

  • Adaptive images

This is a server side technique. It requires the .htaccess file and script files to be added in the website. This adaptive image technique will detect the screen size of the user’s device and automatically re-scale the image corresponding to the device. There is no need of mark-up changes here, and it works well with the Mobile-first philosophy. But, adaptive images will not be suitable for all scenarios, since the images are automatically re-scaled and it would not be good for images with lots of details when they get squeezed into a small layout. Once again, this also does not follow the art direction.

  • HiSRC

HiSRC is a simple JQuery plug-in, which detects the speed of the user connection, then loads either a low quality image or high quality image, corresponding to the speed. In mark-up, you have to mention a low resolution image (also known as mobile first image). So the browser loads that low resolution image, and then the HiSRC plug-in will find the user connection speed to load the corresponding image.

Picture Tag

After many debates between developers and WHATWG, we finally got a HTML markup for responsive images, called Picture element. Picture element is a simple HTML tag that contains multiple source tags which refer to different types of images. It allows the browser to choose the source according to the user device. It’s a new approach for image loading using HTML tags itself and nothing else.

Syntax

<picture>      

 <source media="(min-width: 1024px)" srcset="images/home-wide.png 2x">

<source media="(min-width: 768px)" srcset="images/home.png">

<source media="(max-width: 480px)" srcset="images/home-cropped.png">

<img src="images/home-square.png" alt="Home">

</picture> 

The above image and syntax shows, how different images can be loaded corresponding to the user device. For example, for desktops we can load high resolution images and for mobile we can load low resolution images.

Here, in the ‘Picture’ element, the source tag which is already available in Audio and Video tags in HTML5, is updated and can accept new attributes.

  • Srcset attribute:

This attribute accepts the image’s source path. It also supports the pixel density descriptors, such as 1x, 1.5x, and 2x.

  • Media attribute:

This attribute is like the @media selector in CSS. It accepts all valid media queries.

  • Sizes attribute:

This attribute accepts the width descriptors (e.g. 80vw). It denotes the proportion of an image to fill the view port.

  • Type attribute:

This attribute accepts the different types of image file formats.

  • Img tag:

Our traditional ‘image’ tag is included to provide support for old browsers.

When the browser loads the Picture element, it checks for the conditions given in the attributes to load the appropriate image. The order of the source tag is very important here, since the browser checks in the ordermentioned. If the first source tag matches the given criteria, then the browser will ignore the remaining tags following the matched source tag inside the Picture element.

Final Thoughts

The ‘Picture’ element is still under development and is not implemented fully. So in future, some features might get added, or existing features may change. Currently, this tag has support only for updated browsers. Whatever may be the finalized version of ‘Picture’ tag, this in-built HTML tag will be a good solution to meet all the requirements for dealing with images.

References

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

http://www.html5rocks.com/en/tutorials/responsive/picture-element/