As of August 2014, the size of the average page on the top 1,000 internet sites was 1.7MB according to analysts at ARS Technica, with images accounting for more than half that size, weighing in at nearly 1MB of that 1.7MB total. Now the new HTML Picture element is solving the size problem, speeding up data delivery and reducing the weight of most pages, which is essential in an era where many consumers are visiting sites from mobile devices that utilize pay per packet limited data plans.
Any time a server sends a page to a browser, the browser downloads all the HTML on the page first and then parses it to display each element of the page. Modern browsers like Chrome speed up load times by downloading images first and then parsing the page body. That means your browser is already downloading images before it knows where or how to display them.
It was Bruce Lawson of Opera who first suggested creation of a new HTML element might be necessary to fully solve the problem. The developers soon took the idea of a Picture element to WHATWG, one of two standards groups that oversees the development of HTML. WHATWG is primarily a consortium of browser vendors. Meanwhile the W3C (the other group that oversees HTML) launched “community groups” to encourage outsiders to become more involved in the standards process. After the Picture element was rejected by WHATWG, the developers started a community group and The Responsive Images Community Group (RICG) was born. In that group Marquis and hundreds of other developers worked toward a responsive image solution that solved the problem.
Opera’s Simon Pieters and Google’s Tab Atkins backed an idea to make Picture a wrapper for the Img element rather than a second separate element for images on the Web. Now, any time a browser encounters a Picture element, it evaluates rules the developer specifies first and then picks the best image based on its own criteria. As one example of its use in practice, browsers may allow a site owner to stop high-resolution images from being loaded over 3G access – seamlessly reducing load times and page sizes in the background while maintaining an excellent user experience.
Firefox and Chrome have already committed to supporting the Picture element and the impact of this open source collaboration may be felt across consumer connections online for millions of web users on a daily basis in the weeks, months and years to come.