On a recent project, I was faced with the situation of re-evaluating our typical approach to high-resolution images. In the past, we’ve used the Picturefill v1 JavaScript library to serve resolution-specific images to the correct devices. Things have changed since Chrome implemented the picture element and Picturefill v2 was released.
If we wanted to support scenarios without JavaScript (which we do) and IE 8 (I guess) and be in a good place for the future, we couldn’t jump on Picturefill v2 without some serious thought. In fairness to Scott and the Filament Group, all these issues are present in the Picturefill docs. So I started thinking about this project’s specific requirements and what options I had at my disposal.
Project Requirements
This particular project didn’t require any art direction (e.g. providing alternate croppings at different viewports), which is a big component of Picturefill and the picture element. Our only goal was to reliably provide high-resolution images to devices that had a high-resolution screen. Srcset provides a simple, straightforward way to serve up the proper assets to high-resolution devices. The best part of srcset is that it falls back to a normal image if the browser doesn’t support the syntax, and support is only going to get better. For a deeper dive on srcset and Picturefill, check out Jason Grigsby’s post over on the Cloud Four blog.
The Responsible Compromise
So, without using any JavaScript (yay!), we were able to serve a high-resolution image to the appropriate devices and also leverage the browser’s cache and potentially other implementation advantages (e.g. only load 2x on WiFi, 1x on 3G) in the future. Now browser support of srcset still has a ways to go (looking at you, IE and Android). However, iOS 8 brings support for srcset, and Chrome and Safari already support it on the desktop.
Srcset was the perfect fit given the project’s requirements because it provided a competent fallback (worst case is that 2x devices get a 1x image) for when it wasn’t supported and entirely removed a JavaScript dependency (always a good thing). The web is all about responsible compromises, and srcset embodies that mentality completely.
