2016 25 Mar

Picture - The Saviour

Now a days, while developing any website we need to cater multi resolution screens such as wide monitors, tv, laptops of different screen sizes, mobiles i.e. ranging from 320px to 8000px. While creating designs, we need to make sure that website UX should be great and optimized as well i.e. we cannot afford a slow website on any device or screen size.

Problem

We need to create a media-rich website that has a lot of high-resolution creatives. Now as this site is media-rich, our major requirement is that images must not get distorted and at the same time do not take a lot of time on small screens i.e. render fast enough.

Solution

Simple enough? Can be done in multiple ways, right.

Let’s start the old traditional way.

Step 1: Make sure our images renders without distortion, so what will do

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

Looks great, right. Our image will now cover the screen maintaining the aspect ratio. All works and client is happy that images render based on the screen size and are adaptive.

Time to celebrate the success? Not yet, your client now calls you, and says that the site is very slow on mobile. Oh you did not anticipate this to be a problem and you put your head down in search of a solution for the same.

And as always google has an answer to your problem - “You need to optimize images for mobile”. There you go. The problem is that an image which was rendered on the desktop is the same as that on the mobile. So even though it renders as 300 x 200 but the original image size is that of 900 x 600. This is causing the page to render slow on the mobile. And yes, you are now back to Googling. As you cant change the original HTML, you want a solution that works both for desktop and mobile.

Well, don't worry. The new "picture" tag is your savior :-)

Picture is a new element which will be added to HTML5 soon. So what it is? How does it work? Don’t worry, we’ll see the magic.

Picture tag:
The HTML Picture element is a container used to specify multiple source elements for a specific img contained in it. The browser will choose the most suitable source according to the current layout of the page (the constraints of the box the image will appear in) and the device it will be displayed on (e.g. a normal or hiDPI device.)

How it works:

<picture>
<source media="(max-width: 768px)" srcset="mobile.jpg">
<source media="(max-width: 2768px)" srcset="mobile.jpg">
<source srcset="desktop.jpg">
<img alt="My desktop image" srcset="desktop.jpg">
</picture>

In source elements we can specify the srcset and media query. Your browser will then use the most appropriate source tag to display the image.
Syntax of media attribute is same as of css media query.

How to use it today:

https://www.drupal.org/project/picture
The Picture module uses the "<picture>" element, which was recently added to the HTML specification. While browser support for this new element is currently very limited, this module uses a polyfill library to provide backward compatibility with older browsers.

Demo: