Technology's news, People, and Advances

Responsive Web Design completely revolutionized the way we develop websites by making websites equally accessible by all devices but just like everything else, it isn’t perfect.

*The Picture element is a proposal, thus all the features are currently not supported by any browsers and can’t be tested. This article is informative on how it could be helpful with making images on websites truly responsive. You can follow the discussion on the proposed element here.

Current State of Images in Responsive design

Responsive Web Design completely revolutionized the way we develop websites by making websites equally accessible by all devices but just like everything else, it isn’t perfect. One of the major issues is displaying images across a wide range of screen sizes.  Currently to make our images responsive we use the following CSS:

                             img {

                                     max-width: 100%;

                                     height: auto;

                                     }

This code fits the image into the size of the container it resides in with the height adjusting accordingly. While it might seem like an alright solution, it certainly comes with its limitations.

  The most prominent ones being:

1: Art Direction

Not all images look equally good when shrunk down to considerably smaller size. Sometimes the loss of detail can affect the purpose of the image. In cases as such, we need an option to display a different image that might be smaller and showing some different details that might be of importance instead of a 200MB image that does nothing but hog bandwidth and slow down the website.

 

2: Bandwidth Consumption

No matter the dimensions of the image, the same size is being loaded across all devices which is a whole different hurdle when it comes to loading speeds in mobile devices. Considering the data according to HTTPArchive, images consist of over 60% of a website’s weight and thus this a primary issue when it comes to making websites as accessible through different connections. Hi-res images take up a lot of data which needs to be resolved for metered internet connections. If we were able to substitute our Retina-ready images with smaller images it would save a considerable amount of data and increase website loading speed and performance.

Though we do have some ways of addressing these issues using server side Scripting like Adaptive Images by Matt WIlcox that uses an .htaccess file to detect the user’s connection and display appropriate image. Similarly, foresight.js by Adam Bradley does exactly the same using Javascript. While these services are great for responsive images and addressing both of the major problems, they can be unreliable and might end support or cease to provide services. Also, they are not the industry standard.

How the <picture> element could be a game changer

Enter the proposed <picture> element that removes the need of any extra scripts or third party services. Now, the element isn’t going to replace the <img> tags, it will serve as a container for multiple images with specifications on which screen size to display which image. The syntax is as follows:

 

                                       <picture width="500" height="500">
                                               <source media="(min-width: 45em)" src="/large.jpg">
                                               <source media="(min-width: 18em)" src="/med.jpg">
                                               <source src="/small.jpg">
                                              <img src="/small.jpg" alt="">
                                              <p>Accessible text</p>
                                       </picture>

The Picture element uses the folllowing 3 attributes:

1: srcset : To specify the URL for the images that we want to display. It allows for multiple URLs separated by a comma which might allow us to specify the resolution at which each image is to be shown all in one tag instead of using multiple for each breakpoint.

Example using srcset :

 

                          <picture width="500" height="500">
                                  <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">
                                  <source srcset="small-1.jpg 1x, small-2.jpg 2x">
                                  <img src="/small-1.jpg" alt="">
                                  <p>Accessible text</p>
                          </picture>

2: Media : Allows us to specify the breakpoints for each image to be shown.

3: Size: Attribute to specify intrinsic sizes for the images

A clean, standard solution to answer all our woes regarding Non-Responsive images in the world of Responsive websites. It has different images displaying on different devices, also has a nice little fallback for browsers that don’t support the element and it gives us complete control over images.

Except for one little thing; the fallback. Since the nature of browsers will always make them load the fallback image, it brings us back to excessive usage of bandwidth in mobile devices.

Cool! I’m ready to update my website. What  about Browser Compatibility?

There is none. It’s still a proposal remember? But you can keep a close eye on the development of the element! Here’s How:

Join the Responsive Images Community Group

GitHub

Given that images take up such a huge chunk of a website’s weight, responsive images that avoid any excessive data could vastly improve the performance and loading times of website. Even with alternatives available, it’s going to be exciting to see how a dedicated element for HTML5 unfolds and completes the picture of Responsive Web Design.

 

 

 

 

Leave your comments

Post comment as a guest

0
Your comments are subjected to administrator's moderation.

People in this conversation