A Client-side Responsive Image Solution, Finally
Finally.
“The hardest problem in Computer Science is Responsive Images.”
-Rudolph Guiliani
The issue of responsive images dates back to over a decade ago, even before smartphones and tablets entered the market. After the dot com bubble burst of the early 2000's, resilient web developers picked themselves back up with the Web 2.0 movement, making images the most important part of web sites and applications. This rang especially true with the advent of hit counter graphics and Ajax — the use of spinner gifs to let a user know that something is happening behind the scenes.
With so many devices of different sizes and resolutions today, we developers are in dire need of a solution for loading responsive images without negatively affecting page load and speed. Fortunately, after much debate and deliberation between the W3C, Kodak, and popular browser vendors like Internet Explorer’s Steve Ballmer, there is finally an adoptable solution to the responsive image problem. Ballmer unofficially called it the Ask-A-Cop concept.
“If you ask someone if they’re a cop, they have to tell you,” said Ballmer during a press conference announcing the new responsive image spec, “the same thing should apply to site images. Ask the site what size it wants, and it has to tell you.”
I’ve done the hard work for you by implementing this concept. When you go to the page, you have to tell the site if you are on a mobile or desktop device. Depending on your response — and it’s imperative and the law to give the right one — the correct image will show.
Here is the source code [view source on Glitch], which uses two popular Web 2.0 concepts called “switch statements” and “jQuery” to make sure the user tells the truth about the device form factor *and* that the browser holds its end of the bargain by returning the correct image.
var mobileOrDesktop = prompt("Is this a mobile device (y) or desktop (n)? y/n");
var $responsiveImage = $('img#responsive'); switch ( mobileOrDesktop ) {
case 'y':
$responsiveImage.attr({
'src' : 'mobile.jpg',
'alt' : 'mobile image'
});
break;
case 'n':
$responsiveImage.attr({
'src' : 'desktop.jpg',
'alt' : 'desktop image'
});
break;
default:
$responsiveImage.attr({
'src' : 'trojanhorse.jpg',
'alt' : 'hack the planet'
});
$responsiveImage.after('<h1>TOLD YA TO CHOOSE Y OR NO BUT YOU DIDN\'T SO<br />~ * V I R U S * ~');
break;
}
The responsive image solution is something we developers have been craving for a long time, and it’s nice to see that all the parties involved were able to come up with a solution that’s both easy to develop and easy to understand from the user’s perspective. We are finally coming close to the moment where we no longer need the W3C, as all the standards to standard will have been standarded.
Jenn Schiffer, recently named one of the Top 9 People who Were Once Age 9 in Technology by Forbes, is a full-stack web developer and writer.
