Responsive Images and Paving the Cowpaths with WordPress

Yesterday, the structure of the web changed. As millions of sites updated to WordPress 4.4 "Clifford", a line was drawn, then crossed, and the web as we know it moved forward in a fundamental way. As of December 8th, 2015, a significant portion of the images published on the web suddenly became responsive. And with this move, the theory of paving the cowpaths of the web to bring standards forward took on a whole new meaning.

Setting a Standard

The significance of this change lies as much in its subtlety as in its impact. And much of this is the result of the work of the Responsive Images Community Group, or RICG, who created the Responsive Images standard and helped build it into WordPress. For the average user, this evolution is seamless, barely noticeable. But for web hosts, web developers, and web users, it has an impact that cannot be overstated. 

In simple terms, the way we add images to our web pages has changed: Every website powered by WordPress 4.4 now serves the browser with a list of images of different sizes and allows the browser to pick the most appropriate size based on screen resolution and display width. This means we humans no longer have to think about "retina-ready" photos and how to stop a mobile browser from downloading a 1700px wide image to be displayed in 320px width. When we specify a display size for an image, we no longer talk about the actual image size; we simply talk about the container. The browser figures out what image it needs and uses it. In most cases, this means a significant savings in data transfer. In some cases it means higher resolution images on smaller screens, with the data hit that requires.

More importantly, it means the Responsive Images specification, that up until this point has been considered future technology to be implemented over many years, is suddenly a standard.

Using the WordPress Herd for Good

By some estimates, WordPress powers 25% of the web. This means when WordPress introduces a new technology like Responsive Images, a significant portion of the web suddenly starts using that technology over night. And because of the way Responsive Images have been implemented in WordPress, they are retroactive to images published in the past. The result is that the browser manufacturers are faced with a specific implementation of a technology before it is implemented on their end, and they have no choice but to follow the standard set by the application.

In the web community, we have long talked about "paving the cowpaths" for new technologies. Rather than waiting for the browser manufacturers to argue their way to an often unsatisfactory compromise over new technology, the theory is that if the whole web community got together and used that technology in a specific way, the manufacturers would have no choice but to follow. We carve out paths that are so entrenched the browsers have no choice but to pave them.

With WordPress 4.4, this is exactly what happened. And it was done with tremendous care and attention to detail, in close collaboration with the RICG and other stakeholders. As one of the lead developers of WordPress told me last week, "This was a very deliberate decision." With Responsive Images, WordPress is no longer a passive platform. It is an active participant in the shaping of the future web.

What it means for you

WordPress shipping with Responsive Images in core will have a significant impact on the web as we know it.

As a web user, you should see a notable difference in download volume, especially on mobile devices. At present, the average web page size is over 2MB, of which a full 1.3MB comprises images. Responsive Images are meant to solve this issue by allowing the browser to pick the smallest possible image to fit the current screen resolution and viewport width. Whether this is actually the case remains to be seen as many mobile devices now ship with 2x, 3x, and even 4x resolution.

As a WordPress developer it means you can now use the new functions and hooks to use and extend the functionality. This includes defining a max width for your displayed images, set up custom srcset and sizes attributes, and make your Featured Images responsive.

As a web developer working with other technologies, it means you now have a standard to follow. WordPress has defined how Responsive Images are implemented on 25% of the web, and it would behove you to follow suit. More importantly it means you are now safe to do so: You no longer have to worry about the implementation you choose not being backed by enough other developers.

Finally, browser developers now have a job to do to implement Responsive Images en masse. WordPress currently ships with the Picturefill JavaScript polyfill to help browsers use the new specification even though it is not yet implemented. As more browsers come online with Responsive Images support, this polyfill can be removed and the web will simply function better. It also means browsers can start working on the Hard Problem of figuring out how to throttle image sizes based on bandwidth constraints. The use case was just shipped to millions of sites. All they have to do is follow along and see what happens.

This is just the beginning

"This is the first time I've seen WordPress really throwing its weight around," a colleague remarked a few months ago. And he is right. This is not merely WordPress following a proposed standard; this is WordPress putting its full weight behind a standard and saying boldly "This is how it's done. This is the WordPress way." My hope is that we can continue down this road and use open platforms like WordPress to push our community forward. 

Imagine if the WordPress community stood together as one voice and said "Every theme, every plugin, and every site we build will meet web accessibility guidelines. Democratizing web publishing means making all web content accessible to all. This is the WordPress way." With this power, we can truly change the world. 

To learn more about Responsive Images and how to implement them on the web, check out my course Responsive Images at Lynda.com.