HTML 5 Rocks
2016 25 Mar

Picture - The Saviour

By Gaurav Goyal

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:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

My desktop image

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Reference

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

And TA DA :) We solved the problem!

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Featured blog

web-personalization

Personalized Content is a Proven Entity !!

Irrespective of how big a business icon or brand you are, increasing the relevance of your website will always be critical to your success.

Read More

Git Hooks

Git hooks for better codes

We are programmers and we are always on the lookout for ways to improve our code. A good and structured way of coding defines the completeness of a programmer.

Read More

Drupal ,varnish cache

Hard time with Drupal, Varnish Cache and Cookies

Using a reverse proxy server in front of a web server is usually needed for every big site and it is a very good thing to do so as reverse proxy server will handle all the anonymous traff

Read More

Say no to captcha

Say no to captcha - Various Spam Protection Methods

Maintaining high traffic websites have their own merits and demerits, the most annoying thing about them is SPAM.

Read More