CHAPTER 5 Robust, Responsible, Responsive Web Design
We developed a similar means of delivering screen-appropriate images
while we were working on the Globe site, beginning with the philosophy
that the technique should err on the side of mobile: start with a mobile-
sized and -formatted image, then swap that for a larger version depending
on the user’s screen size.
The key to this was getting the screen’s width in JavaScript and
relaying that information to the server in time to defer the request for the
source specified in the image’s src — otherwise, we’re making two requests
per image on larger screens. We could have prevented this by avoiding the
use of img src altogether and injecting images as needed, but we wouldn’t
want to introduce a dependency on JavaScript in order for users to view
the site’s content. Instead, we ended up putting together a clever little hack
that relied on JavaScript to set the screen’s width in a cookie that would
be sent along with the requests for the image’s original src, allowing us
to choose the most appropriate image source on the server. If any aspect
of the script should fail, the original source specified in the src would be
requested as usual. It worked well — at least, for a while.
Unfortunately, this approach didn’t prove viable for long. Thanks to
increasingly aggressive prefetching in newer versions of several major
desktop browsers, an image’s src would be requested before any of our
custom scripting was applied — resulting in two requests for a single user-
facing image.
What followed was a sordid tale of noscript elements and
dynamically-injected base tags, document.write and eval — the Web
developer equivalent of scary campfire stories. It was not pretty and, more
importantly, none of it worked.
It was around this time that we formed the Responsive Images
Community Group^18 , and got even more people involved. Despite dragging
dozens of developers into our brainstorming, it quickly became obvious
that responsive images weren’t something that could be solved once and18 http://responsiveimages.org/