Those keen on responsive web design will tell you that one of the biggest considerations when developing a responsive site is optimizing it to be as light and fast as possible without sacrificing functionality, design or effectiveness. One of the greatest factors in making a responsive site light and fast is optimizing images to have as small a file size as possible without making the reduction in quality noticeable to the user.
This can be a tricky task, especially when you are serving an image to the user that needs to big and beautiful on desktop and small and functional on mobile. You wouldn’t want to serve a massive image to a screen that is only 320 pixels wide, but you also wouldn't want that image to look fuzzy and low res on a 2880x1800 retina display. How do we satisfy both needs and all others in between?
Enter the
<picture> element. "The picture element is an image container whose source content is determined by one or more CSS media queries." This is a solution to the problem of the
<img> element only being able to have a single source, and not being able to serve a multitude of images with varying resolutions based on the screen size. It looks like this:
<picture width="500" height="500">
<!-- Image served for large screens like desktop -->
<source media="(min-width: 45em)" srcset="large.jpg">
<!-- Image served for medium screens like tablets -->
<source media="(min-width: 18em)" srcset="med.jpg">
<!-- Image served for small screens like mobile phones -->
<source srcset="small.jpg">
<!-- Fall back image served if the browser doesn't support the picture element -->
<img src="small.jpg" alt="">
<p>Accessible text</p>
</picture>
This new element is a solid solution to our problem. Finally, after three years of hard work perfecting the new element,
the W3C has made it official and browsers will begin supporting the picture element as early as the first quarter of 2014.
However, if you can’t wait for this new element to be fully browser compatible, you are in luck. A man named Scott Jehl came up with an immediately available, cross browser compatible solution, that is just as effective.
It's called PictureFill and it is a JavaScript polyfill that uses spans to do the same thing that the picture element was created for. It looks like this:
<span data-picture data-alt="Alternate image text">
<span data-src="small.jpg"></span>
<span data-src="small_x2.jpg" data-media="(min-device-pixel-ratio: 2.0)"></span>
<span data-src="medium.jpg" data-media="(min-width: 400px)"></span>
<span data-src="medium_x2.jpg" data-media="(min-width: 400px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="large.jpg" data-media="(min-width: 800px)"></span>
<span data-src="large_x2.jpg" data-media="(min-width: 800px) and (min-device-pixel-ratio: 2.0)"></span>
<span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
<span data-src="extralarge_x2.jpg" data-media="(min-width: 1000px) and (min-device-pixel-ratio: 2.0)"></span>
<!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
<noscript>
<img src="small.jpg" alt="Alternate image text">
</noscript>
</span>
Each span has a "data-src" attribute to define each image's source and a “data-media” attribute to define at what screen width the image should be served. It also has the ability to serve images based on screen width as well as pixel density so that it can serve separate images to retina displays that might have the same screen width as a lesser resolution display. Finally, it defines an image inside of a <noscript> element as a fallback in case the browser does not have JavaScript enabled.
You can view a demo of it here. PictureFill is the same concept as the picture element, just using spans as a safe, cross-browser compatible alternative. If you can’t wait until the picture element is fully supported by browsers, PictureFill is a light, easy to use solution that can be used right now and is compatible in all modern browsers.
This post was featured in our Code Update email. Sign up to receive news and articles like this on a regular basis here.