Responsive web design in 2015-2016 is more than just a buzzword. However, it was not so in 2010, when Ethan Marcotte took the web design world by storm with this unique technique. One of the primary reasons that added to its popularity and success is its advent at a time when the world was adapting to the burgeoning impact of smartphones and tablets.
Responsive images and web design technique empowered web designers to create websites that adapt themselves for viewing on multiple devices like smartphones, tablets or desktop computers. This is enabled in large part by CSS3’s Media Queries module that allows you to apply different CSS properties based on screen size or other display characteristics.
The problem area….
Many a times CSS properties is found to scale an image to various screen sizes, although the browser still downloads the full-sized version. This is a problem area on smartphones and other mobile devices with limited bandwidth or processing power, and designers are still awaiting an elegant way to manage images in responsive layouts.
How to make responsive images Adapt to Your Design Situation
The emergence of high-density displays such as Apple’s Retina display has made things complicated, as this calls for images to be preferably closer to print-quality resolution - leading to the demand and urgency for responsive or adaptive images.
So, what actually are Responsive images? They actually are bitmapped artwork that’s downloaded at a size or pixel density appropriate for the user’s display. Device-Pixel-Ratio-based selection serves images based on the display’s pixel density. This is one of the many reasons why images that appear clear and crisp on desktop do not look good on a tablet or smartphone.
Using responsive image technique you can deliver a high-resolution image to a high-density display and a standard-resolution image to others. At the same time, viewport-based selection serves images based on the size of the “viewport”—this is the window through which the user actually sees the webpage. So this might mean sending a 1024-pixel wide image to a desktop browser and a 320-pixel version to a smartphone.
On combining with Device-Pixel-Ratio selection, you can actually deliver 3 variations of the same image:
- Smaller version for smartphones
- High-density version for tablets
- Standard-density version for desktops
Best Proposals for Responsive Images
Even though the World Wide Web Consortium (W3C) is known to maintain web standards officially, it’s ultimately the browser makers who determine which HTML features to support. Of the many proposals for responsive images developers are presently negotiating over, it’s srcset that’s emerged as the favorite and got the maximum support for.
Given below is the proposed attribute for the <img> element that allows you to specify alternate versions of a file to download. Here’s how it might possibly look:
In this case, while “2x” means “use this version if the device has a high-density display”; “100w” means “use this version if the maximum viewport width is 100 pixels.” Thereby, “100w 2x” means “use this version if the maximum viewport width is 100 pixels and the device has a high-density display.”
While Google’s Chrome has already implemented srcset, WebKit, the browser engine that inspires Apple’s Safari has added a fractional enactment last year - making it unclear when (or whether) Safari and other browsers will follow.
This proposal allow users to add a new <picture> element for specifying alternate versions of an image. This would complement srcset by supporting more-complex use cases such as art direction. You can read more about <picture> here.
HTTP Client-Hints the third proposal, works by using the HTTP header to communicate information about the device’s display characteristics. Similarly, a fourth proposal srcN, is an attribute for the <img> element that would replace srcset and <picture>. Its advocates offering better support for all three use cases. You can read more about HTTP Client-Hints here.
At the same time, some are using server-side technologies where a script on the server chooses an image or scales it to the appropriate size. It works wonderfully well if you can combine these approaches – taking care of the limitations if any.
Another foolproof way of creating robust responsive images is to use extreme compression ratios on images, making the file size small enough to minimize bandwidth issues, while still looking good on a desktop display. Nonetheless, there always is the option to developing separate versions of your sites for mobile users.
What makes responsive web design the need of the hour?
The rising impetus of mobile devices, easy accessibility of websites on them, and optimization of user experience makes it all the more important to build responsive images for websites that adjusts itself to the size of the user’s screen. In fact, many businesses have confided on having lost business post the mobile revolution, as not offering a good experience on the mobile devices can lead to losing great number of visitors and potential customers – putting your business ROI to risk.
Click Here to Get in Touch!