It's happened to all of us—you’ve created an awesome website that looks fantastic on your hi-res display, and each one of your giant images looks as sharp as a tack. But, you know deep down this is all too easy. After inspecting the site with dev tools you find out the page weight is massive because of those bitter sweet images, and you just know mobile devices will never withstand it on 3G. So, you start looking into Responsive Image solutions, and find there are a ton of approaches to research. Doesn’t it feel like there are too many options? Doesn’t each option seem to have some annoying limitation? Doesn’t each one just feel…hacky? Sure, you can run with one for a while, but is the one you chose really a viable long term solution? Will it scale up in a massive production environment? It doesn’t need to be this difficult. You’re about to learn that there is something you can do about this, and there are others with the same hardships that want to make your life easier.
What's being done about this?
Right now, responsive image solutions are all over the board, often with limitations attached to them such as redundant HTTP requests causing wasted bandwidth, lack of declarative hooks for image sizes, server side configuration woes, etc. This brings a real need to standardize the workflow and solve this problem at the browser level.
The Responsive Images Community Group (RICG) is running an Indiegogo campaign for developer support to get the picture element into Blink — the rendering engine for Chrome and Opera. Mat Marquis, the chair of RICG, and developer Yoav Weiss lead the campaign, and they’re willing to solve our responsive image problems with a little help.
Until now, Yoav has been working for free in his spare time contributing to the srcset attribute and on the picture element for Blink. With him as a full-time dedicated developer on this task, we have a pretty good chance of having this feature get implemented in most modern browsers in a timely fashion.
What are srcset and <picture>?
The srcset attribute, already implemented in Blink and Webkit, provides a method of delivering different images based on criteria such as display density, connection type or user preferences. The picture element, not yet implemented, builds on the srcset attribute, allowing the grouping of multiple sources of images and serving them based on format, resolution, orientation, etc.
Here's an example:
<picture>
<source media="(min-width: 46.8em)" srcset="large-1.jpg, large-2.jpg 2x">
<source media="(min-width: 24em)" srcset="med-1.jpg, med-2.jpg 2x">
<source srcset="small-1.jpg, small-2.jpg 2x">
<img src="small-1.jpg" alt="James Sansbury pleading with a plastic chicken.">
</picture>
What can we do?
Two years ago this might have seemed like a pipe dream, but thanks to the work of the RICG, it's now a reality and browser vendors are considering viable solutions. As developers, we have the responsibility to do everything we can to move the responsive web forward. The end goal here serves all users of the web.
As an individual I have contributed to this effort because I know what it’s like to work for free on something you’re passionate about, it’s time consuming and it's a noble task. Plus, how can you pass up that sweet t-shirt? As a company, Lullabot feels strongly about the future of the responsive web; as a duty to our clients, the front-end community and our developers, we’re donating $500 to the Indiegogo campaign.
We encourage others in the community to do what they can to show their support; we will all benefit from having this sooner than later, and this campaign is how we achieve that goal.