The Issue of Adaptive Images in Responsive Design
Problem: Having a single source attribute, IMGs can’t provide a user with one image optimized for different display resolutions and sizes.
Goal: Find a solution that will send the image of the most relevant size and resolution depending on the browser and screen resolution of your device.
Solution: Responsive IMGs that are delivered using the HTML IMG tag that come from different sources depending on the screen size.
- Background images are made adaptive by means of media queries and background image styles allowing only images that are needed to be downloaded from the server thus saving bandwidth, memory and HTTP requests.
- The picture element allows leveraging well-supported media queries to serve different images to different device giving developers control as to when and how images are presented to the user.
- The srcset Attribute being an extension to the <img> tag, the srcset attribute makes user agents to choose a respective resource, instead of fetching the entire set of images.
The code in the proposed specification looks like this :
<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>
If providing different sources is possible, then we could also imagine providing different crops of an image to focus on what’s important for smaller devices.
<img alt=“The Breakfast Combo”
src=“banner.jpeg”
srcset=“banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x”>
These are the first steps made towards solving the numerous challenges of responsive Web design that will eventually take us to a perfect responsive solution.
