Picture element and srcset attribute

Last update : July 5, 2014

Jason Grigsby outlined two years ago that there are two separate, but related requirements that need to be addressed regarding the use of the <img> element in responsive designs :

  1. enable authors to provide different resolutions of images based on different environmental conditions
  2. enable authors to display different images under different conditions based on art direction

Resolution Switching

When we handle an image for Retina displays, it makes sense to deliver a crispy, high resolution picture to the browser. When we send the same image to a mobile with a small screen or to a tablet connected with low speed, it’s efficient to save bandwidth and to reduce the loading and processing time by providing a small size picture.

In HTML, a browser’s environmental conditions are primarily expressed as CSS media features (orientation, max-width, pixel-density, …) and CSS media types (screen, print, …). Most media features are dynamic (a browser window is resized, a device is rotated, …). Thus a browser constantly responds to events that change the properties of the media features. Swapping images provides a mean to continue communication effectively as the media features change dynamically.

Art Direction

When we display an image about a subject (i.e. the brain structure) at a large size, it makes sense to show the context. When we display the same image on a small screen, it’s useful to crop it and to focus on a detail. This differentiation is ruled by art direction.

art

for small screens a detail looks better than the resized original (Wikipedia) picture

Breakpoints

The @media query inside CSS or the media tag inside the link element are the key ingredients for responsive design. There are several tactics for deciding where to put breakpoints (tweak points, optimization points). As there are no common screen sizes, it doesn’t make sense to base the breakpoints on a particular screen size. A better idea is to look at the classic readability theory and to break the layout if the width of a column exceeds 75 characters or 10 words. These are the breakpoints. Vasilis van Gemert created a simple sliding tool to show the impact of language and font family on the text width.

Lucky responsive techniques

In the recent past, web developers relied on various techniques (CSS background images, Javascript libraries, semantically neutral elements, <base> tag switching, …) to use responsive images in their applications.  All of these techniques have significant limits and disadvantages (bypassing the browser’s preload scan, redundant HTTP requests, complexity, high processing time, …).  For all these reasons a standardized solution was wanted.

Possible responsive image solutions

The proposed solutions to deal with one or with both of the requirements for responsive images (“resolution switching” and “art-direction“) are the following :

  • <picture> element : addresses requirement #2 (the author selects the image series and specifies the display rules for the browser)
  • srcset and sizes attributes : addresses requirement #1 (the browser selects the image resolution based on informations provided by the author)
  • CSS4 image-set : addresses requirement #1 (the browser selects the images based on informations provided by the author)
  • HTTP2 client hints : addresses requirements #1 and #2 (the server select the images based on rules specified by the author)
  • new image format : addresses requirement #1 (there is only one image)

Responsive image standardization

On June 20, 2014, Anselm Hannemann, a freelance front-end developer from Germany, announced on his blog that the <picture> element and the attributes srcset and sizes are now web standards. The discussions and debates about the specification of a native responsive images solution in HTML lasted more than 3 years inside WHATWG, RICG and W3C.

The Responsive Images Community Group (RICG) is a group of developers working towards a client-side solution for delivering alternate image data based on device capabilities to prevent wasted bandwidth and optimize display for both screen and print. RICG is a community group of the World Wide Web Consortium (W3C). The group is chaired by Mathew Marquis of the Filament Group and has 362 participants, among them the Responsive Web Design pioneers Nicolas Gallagher, Bruce Lawson, Jason Grigsby, Scott Jehl, Matt Wilcox and Anselm Hannemann.

The RICG drafted a picture specification (editors draft July 1, 2014) with the new HTML5 <picture> element and the srcset and sizes attributes that extends the img and source elements to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.

Bruce Lawson was the first to propose the <picture> element and he has a degree of attachment to it. The srcset attribute was presented on the WHATWG mailing list by someone from Apple. At first, the majority of developers favored the <picture> element and the majority of implementors favored the srcset attribute. The W3C states how the priority should be given when determining standards:

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity.

Both WHATWG and W3C included now the <picture> element and the srcset and sizes attributes to the HTML5 specification. The links are given below :

The <picture> element

The use of the <picture> element is shown in the following code examples :

<picture>
 <source srcset="brain-mobile.jpg, brain-mobile-x.jpg 2x">
 <source media="(min-width: 480px)" srcset="brain-tablet.jpg, 
    brain-tablet-hd.jpg 2x">
 <source media="(min-width: 1024px)" srcset="brain-desktop.jpg, 
    brain-desktop-hd.jpg 2x">
 <img src="brain.jpg" alt="Brain Structure">
</picture>

With a mobile-first approach, the image “brain-mobile.jpg” is rendered by default, the image “brain-tablet.jpg” is rendered if the user screen is at least 480px wide, and “brain-desktop.jpg” is rendered if the user screen is at least 1024px wide. The image “brain.jpg” is destinated to those browsers who don’t understand the <picture> element. The second URL in the srcset attribute is paired with the string 2x, separated by a space, that targets users with a high-resolution display (like the Retina with a pixel density 2x).

<picture>
<source sizes="100%" srcset="brain-mobile.jpg 480w, 
brain-tablet.jpg 768w, brain-desktop.png 1024w">
<img src="brain.jpg" alt="Brain Structure">
</picture>

In the second example the sizes attribute is used to let the image cover all the width of the device (100%), regardless of its actual size and pixel density. The browser will automatically calculate the effective pixel density of the image and choose which one to download accordingly.

The four images brain-mobile.jpg, brain.jpg, brain-tablet.jpg and brain-desktop.jpg not only have different dimensions, but may  also have different content. This way authors are enabled to display different images under different conditions, based on art direction.

The <picture> element should not be confused with the HTML5 <figure> element which represents some flow content. The <figure> element is able to have a caption, typically the <figcaption> element.

<figure>
   <figcaption>Brain Structure</figcaption> 
   <img src="brain.jpg" alt="Brain Structure" width="320"/>
</figure>

The sizes syntax is used to define the size of the image across a number of breakpoints. srcset then defines an array of images and their inherent sizes.

The srcset attribute

The srcset is a new attribute for use in the <img> elements. Its value is a comma separated list of images for the browser to choose from. An simple example is shown below :

<img srcset="brain-low-res.jpg 1x, brain-hi-res 2x, width="320"
alt="Brain Structure">

We tell the browser that there is an image to be rendered at 320 CSS pixels wide. If the device has a normal 1x screen, a low resolution image 320 x 240 pixels is loaded. I the device has a pixel ratio of 2 or more, a higher resolution image 640 x 480 pixels is requested from the server by the browser.

Here comes a second example :

<img src="brain.jpg" sizes="75vw" 
srcset="brain-small.jpg 320w, brain-medium.jpg 640w, 
brain-large.jpg 1024w,brain-xlarge.jpg 2000w" 
alt="Brain Structure">

The srcset attribute tells the browser which images are available with their respective pixel widths. It’s up to the browser to figure out which image to load, depending on the viewport width, the pixel ratio, the network speed or anything else the browser feels is relevant.

The sizes attribute tells the browser that the image should be displayed at 75% of the viewport width. The sizes attribute is however more powerful than indicating default length values. The format is :

sizes="[media query] [length], [media query] [length] ... etc"

Media queries are paired with lengths. Lengths can be absolute (pixel, em) or relative (vw). The next exampe shows a use-case:

<img src="brain.jpg" 
sizes="(min-width:20em) 240px,(min-width:48em) 80vw, 65vw"
srcset="brain-small.jpg 320w, brain-medium.jpg 640w, 
brain-large.jpg 1024w,brain-xlarge.jpg 2000w" 
alt="Brain Structure">

We tell the browser that in viewports between 0 and 20 em wide the image should be displayed  240 pixels wide, in viewports between 20 em and 48 em wide the image should take up 80% of the viewport and in larger viewports the image should be 65% wide.

Can I use responsive images ?

The support of the <picture> element and the srcset and sizes attributes in the various browsers can be checked at the “Can I Use” website. This site was built and is managed by Alexis Deveria, it provides up-to-date support tables of front-end web technologies on desktop and mobile browsers.

Support of the picture element in browsers

Support of the picture element in browsers (Can I Use Website)

Support of the srcset attribute in browsers

Support of the srcset attribute in browsers (Can I User Website)

Actually the <picture> element is only supported by Firefox version 33. The srcset attribute is only supported by Firefox versions >32, Chrome versions > 34, Safari version 8 and Opera versions > 22.

PictureFill

The poor support of the <picture> element and the srcset attribute in actual browsers does not mean that you have to wait before implementing responsive images in your website. Scott Jehl from Filament Group developped a great polyfill called PictureFill supporting the <picture> element and the srcset and sizes attributes.

Initialization code :

<script>
// Picture element HTML5 shiv
document.createElement( "picture" );
</script>
<script src="picturefill.js" async></script>

<picture> code :

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="brain-xx.jpg" media="(min-width: 1000px)">
<source srcset="brain-x.jpg" media="(min-width: 800px)">
<source srcset="brain.jpg">
<!--[if IE 9]></video><![endif]-->
<img srcset="brain.jpg" alt="Brain Structure">
</picture>

If JavaScript is disabled, PictureFill only offers alt text as a fallback. PictureFill supports SVG and WebP types on any source element, and will disregard a source if its type is not supported. To support IE9, a video element is wrapped around the source elements using conditional comments.scrset code :

<img sizes="(min-width: 40em) 80vw, 100vw"
srcset="brain-s.jpg 375w,brain.jpg 480w,brain-x.jpg 768w" 
alt="Brain Structure">

The PictureFill syntax is not quite the same as the specification. The fallback src attribute was intentionally removed to prevent images from being downloaded twice.

CSS4 image-set

By using the CSS4 image-set function, we can insert multiple images which will be set for normal and high-resolution displays. The image-set function is declared within the background-image property, while the background URL is added within the function followed by the resolution parameter (1x for normal display and 2x is for high-res display), like so :

.selector { 
 background-image: image-set(url('image-1x.jpg') 1x, 
 url('image-2x.jpg') 2x); 
} 

The CSS4 image-set function is also trying to deliver the most appropriate image resolution based on the connection speed. So, regardless of the screen resolution, if the user accesses the image through a slow Internet connection, the smaller-sized image will be delivered.

CSS4 image-set is still experimental. It is only supported in Safari 6 and Google Chrome 21 where it is prefixed with -webkit.

HTTP2 client hints

The responsive image standards leave the burden to create images at appropriate sizes, resolutions and formats to the web developer. Client hints are a way to offload this work to the server. Client hints are HTTP headers that give the server some information about the device and the requested resource. Ilya Grigorik, web performance engineer and developer advocate at Google, submitted in December 2013 an Internet Draft “HTTP client hints” to the Internet Network Working Group of the Internet Engineering Task Force (IETF). The draft specifies two new headers for the HTTP 2.0 version : CH-DPR for device pixel ratio and CH-RW for resource width. A server-side script will generate the best image for the requesting device and deliver it.

New image formats

There are some new image formats like JPEG2000, JPEG XR and WebP that generate higher quality images with smaller file sizes, but they aren’t widely supported. JPEG 2000 is scalable in nature, meaning that it can be decoded in a number of ways. By truncating the codestream at any point, one may obtain a representation of the image at a lower resolution. But the web already has this type of responsive image format, which is progressive JPEG, if we get the browsers to download only the neccesary bytes of the picture (i.e. with the byte range HTTP header). The main problem is that the new image formats will take long to implement and deploy, and will have no fallback for older browsers.

Links

The following list provides links to websites with additional informations about <picture>, srcset, PictureFill and related topics :

Responsive iFrames and Image Maps

Last update : June 27, 2014

Some HTML elements don’t work with responsive layouts. Among these are iFrames, which you may need to use when embedding content from external sources. Other elements are Image Maps which are lists of coordinates relating to a specific image, created in order to hyperlink areas of the image to different destinations.

Responsive iFrames

When you embed content from an external source with an iFrame, you must include width and height attributes. Wihtout these parameters, the iframe will disappear because it would have no dimensions. Unfortunaltely you can’t fix this in your css style sheet.

To make embedded content responsive, you need to add a containing wrapper around the iframe :
<div class="iframe_container">
<iframe src="http://www.yoursite.com/yourpage.html" width="640" height="480">
</iframe>
</div>

The containing wrapper is styled with the .iframe_container class in the style sheet :
.iframe_container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}

Setting the position to relative lets us use absolute positioning for the iframe itself. The padding-bottom value is calculated out of the aspect ratio of the iFrame, which in this case is 480 / 640 = 75%. The height is set to 0 because padding-bottom gives the element the height it needs. The width will automatically resize with the responsive element included in the wrapping div. Setting overflow to hidden ensures that any content flowing outside of this element will be hidden from view.

The iFrame itself is styled with the following CSS code :
.iframe_container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}

Absolute positioning must be used because the containing element has a height of 0. The top and left properties position the iFrame correctly in the containing element. The width and height properties ensure that the iFrame takes up 100% of the space used by the containing element set with padding.

Responsive Image Maps

Image maps are a co-ordinate representations of images in sections mostly in rectangular, poly and circle format. According to the specs percent values can be used for coordinates, but no major browsers understand them correctly and all interpret coordinates as pixel coordinates. The result is that image maps applied to responsive images don’t work as expected when images are resized. It’s necessary to recalculate the area coordinates to match the actual image size.

There are different solutions available to make Image Maps responsive :

The following demo shows a responsive Image Map embedded in a responsive iFrame :

Links

The list below shows links to websites sharing additional informations about responsive iFrames and Image Maps :

 

Responsive video

Last update : June 27, 2014

Responsive webdesign needs not only adaptive images, but also fluid videos. The pioneers in emdedding responsive videos in webpages are Chris Coyier and Dave Rupert. They created in 2011 FitVids, a lightweight, easy-to-use jQuery plugin for reactive width video embeds. FitVids automates the Intrinsic Ratio Method by Thierry Koblentz to achieve fluid width videos in your responsive web design. The source code is available at Github.

Here is a list of more useful links to contributions about responsive video :

Building a faster and stronger web

Recently Google started a new beta service to optimize the performance of websites, called PageSpeed Service. PageSpeed Service is an online service to automatically speed up loading of your web pages. PageSpeed Service fetches content from your servers, rewrites your pages by applying web performance best practices and serves them to end users via Google’s servers across the globe.

Google also offers best practice rules and analysis and optimization tools and SDK’s to make the web faster.

O’Reilly organizes conferences to change the world by bringing you face-to-face with the knowledge of innovators and practitioners. Velocity, about web performance and operations, is much more than a conference; it’s become the essential training event and source of information for web professionals from companies of all sizes. Fluent, javascript and beyond, presents the tools and technologies driving the web.

Steve Sounders started in 2010 the HTTP archive to track how the Web is built. Trends in web technology load times, download sizes, performance scores and much more can be downloaded to present statistics.

Responsive Web Design (RWD) and Lazy Loading are two ways to build a better web.

Responsive javascript slideshows

Last update : July 5, 2014

Early 2006, Lokesh Dhakar introduced Lightbox, a unobtrusive script used to display large images using modal dialogs over a black faded background. Six years later, there were hundred of scripts available to create slideshows, carousels, sliders and image galleries on the web. I evaluated the following responsive javascript slideshows for different projects:

Today, some of these scripts are outdated and I included them only for historical reasons. Some scripts are standalone, but most are based on jQuery, a fast, small and feature-rich JavaScript library. Most of them are also available as WordPress plugin.

My favorite script is the …

I use the following code :

...

See the demo

The following list provides links to websites with additional informations about slideshows and related topics :

RESS: Responsive Design + Server Side Components

Last update : June 26, 2014

In Responsive Web Design implementations, Web URLs are consistent across devices and adapt their content based on the capabilities of the browser in which they are displayed.

Server side solutions, on the other hand, only send what a client needs. But server-side solutions generally rely on user agent redirects to device-specific code templates. Each device class that warrants adaptation needs its own set of templates and these templates may ultimately contain duplicative code that actually applies to every class of device.

Adaptive and context-aware images

Last update : July 1, 2014

Each image has an innate, original height and width that can be derived from the image data. This derived height and width information is content, not layout, and should therefore be rendered as HTML <img> element attributes. To override height and width for adaptive images, CSS is the best approach.

Context-aware images in responsive web design are created by declaring a 100% width in CSS :

img {width : 100%}

Modern browsers keep the image’s proportions intact. To render a context-aware image at its native dimensions and to resize it only if it exceeds the width of its container, the classic solution is the CSS code :

img {max-width :100%}

But scaling down images is not sufficient. Sending huge image files to low-performance devices with narrow screens is not very clever. The early HTML image tags had a lowscr attribute which is no longer supported by modern browsers.

Sending the right-sized image to devices without wasting bandwith is one of the challenges in responsive web design. The main problem is that the HTML img tag has only one source attribute today.

The different techniques proposed in the recent past by the pioneers of context-aware images, listed at the end of this post, can be grouped as follows :

  1. client-side current technology solutions
  2. server-side current technology solutions
  3. standardized future-technology solutions

Client-side current technology solutions :

  • CSS with background-images controlled by media-queries : Harry Roberts
  • dirty script to load temporary images and altering the image source path before handing it to the DOM parsing (1×1 pixel transparent GIF and <noscript> tag) : Jake Archibald, (Mairead Buchan, Antti Peisa, Vasilis van Gemert)
  • dynamic modification of the base tag : Scott Jehl
  • CCS3 content & attr() : Nicolas Gallagher

Server-side current technology solutions :

  • php-script dealing with AJAX requests : James Fairhurst
  • php-script dealing with image arrays : Craig Russel
  • php-script dealing with cookies : Matt Wilcox, Keith Clark, Scott Jehl, (Mark Perkins, Andy Hume)
  • service to resize images – tinySCR, now Sencha.io.SCR : James Pearce, (Graham Bird, Andrea Trasatti)
  • service to adapt mobile content to cell-phones with Opera Mini pre-installed : Opera Software ASA

Standardized future-technology solutions :

  • new html attribute pointing to a list of sources : Dominique Hazael-Massieux, Anselm Hannemann
  • new picture tag : Bruce Lawson, Jake Archibald, Nicolas Gallagher
  • progressive resolution-enhanced streaming images
  • new HTTP headers for content negotiation

Problems :

“Starting with small images for mobiles and upgrade to large images for desktops, without loading both and working with all browsers” is the goal of responsive design with context-aware images. Until now there is no solution that meets this objectif.

The common problems are listed below :

  • dynamic image tags : double downloads with external scripts ; race problems with internal scripts in some browsers ; inconsistencies when diffrent scripts change the base tag
  • temporary image : without javascript the image never loads
  • noscript tag : some browsers cannot manipulate the noscript tag
  • CSS generated content : only supported in Opera10+
  • cookies : no effect when cookies are disabled
  • same URL :  caching fails
  • php scripts : CDN routing not possible
  • device detection : not reliable for all browsers

Some pioneers in the field of “adaptive images” are presented hereafter :

Scripts, programs and tools :

Contributions to W3C and drafts by W3C :

Blogs :

more contributors :

Polyfills and Hacks for older browsers

Last update : June 25, 2014

Polyfills, or polyfillers, are pieces of code that provides the technology that a developer expects a browser to provide natively. Paul Irish has given the following definition: A shim that mimics a future API providing fallback functionality to older browsers.

Alexander Farkas (author of Webshims Lib, a modular capability-based polyfill-loading library) says : Every polyfill is a hack! innovative frontend development is hacky and always will be hacky!

Polyfills are especially relevant in the context of responsive web design.

A list of HTML5 Cross Browser Polyfills is available at the Modernizr GitHub website. The HTML5Please website provides look up tables for HTML5, CSS3, etc features to know if they are ready for use, and if so, to find out how you should use them : with polyfills, fallbacks or as they are.

Links to more useful informations about polyfill’s are listed hereafter :

CSS Mediaqueries

Last update : June 26, 2014

The CSS3 module that defines mediaqueries reached the W3C Recommendation status in June 2012 and offers introspection into the browsing environment based on the following factors:

  • browser dimensions (width, height and aspect-ratio)
  • device dimensions (device-width, device-height and device-aspect-ratio)
  • browser orientation
  • colour information (color, color-index and monochrome)
  • device-specific details such as its resolution, whether its display is grid or bitmap-based, and the scan type (progressive or interlaced … applicable to televisions)

Not all of these properties are currently supported, but many are. Additionally, most of them support min and max prefixes like the one used below, enabling you to tailor your queries very specifically.

@media screen and (max-width:480px) {
background-color:red;
font-size:1.5em;
}

This set of styles is only applied to a screen which is 480 pixels wide or less.

A mediaquery test capabilities, not individual devices or browsers, so it’s future proof. There is no redirection to a different page, it’s one page for all. The mediaquery is tested before any assets are downloaded, saving bandwith and speeding up the display.

Some useful tutorials about mediaqueries are listed hereafter :

Responsive, adaptive and reactive web design

Last update : June 25, 2014

Responsive web design is creating web layouts that can adapt to a multitude of displays and devices. Using this technique, you can eliminate the need to create device-centric designs and allow your content to be displayed from a single source, on an unlimited number of mediums.

Web designers often transform their desktop layouts into something optimized for devices with smaller screens by adding additional javascript and additional css code. That’s not the right solution for mobile devices with less powerful CPU’s and slower network connections where speed and low roaming charges matters more than on desktop PC’s. Simply resizing the same application to fit on multiple devices doesn’t necessarily ensure the best experience for users.

The main objective of responsive web design is to load only those files to the device which are really displayed and to minimize the file size of the downloaded elements, including images. Responsive web design is the practice suggesting that design and development should respond to the user’s behavior and environment based on screen size, platform and orientation. Adjusting images to make them context-aware, according to the different screen widths or devices is another important aspect of responsive web design.

The pioneer of responsive web design is Ethan Marcotte, a web designer, developer, speaker and author, living in in Boston, Massachusetts. His blog is called Unstoppable Robot Ninja.

The technical ingredients for responsive web design are :

  • fluid grids
  • media queries
  • adaptive images
  • viewport settings

Some web designers prefer the term adaptive instead of responsive for these technologies, other call it reactive.

A recommended approach to start with responsive web design is to start with a mobile first layout. You have to keep in mind that most internet users do not keep a browser open full screen.

Links to some useful documentation and scripts about responsive web design are shown in the following list :

Books :

Scripts :

Blogs :