Simple Responsive Images: Picturefill with one Line of Code

Michael Ruescher

Responsive Image MascotAll the good responsive image solutions perform a similar function: they let you specify which image urls should be served for various sreen sizes and pixel densities. That means they also create extra markup to maintain! But since your sites responsive images often share a common ratio of image resizing at various CSS breakpoints, there is an opportunity to DRY things up with a bit of abstraction.

Webpops extension engine makes it easy to abstract your favorite responsive images soluttion. This post covers a little responsive image extension for Webpop that lets you author Scott Jehls Picturefill ( a robust little responsive image solution ) in a single line of markup.

We'll use it to make a responsive Raptor gallery. Note that this same technique could be used with any number of other responsive image solutions as the underlying principles are the same.

Here's the actual server side javascript extension:

Fork it on Github.

It takes the resizing options passed to it in the template and populates the image source attributes to generate the picture fill markup with eight different breakpoints: from regular resolution mobile all the way up to large retina displays.

Now you can replace any image tag or image gallery tag in your Webpop templates with:

<pop:picture:responsive field="image" resize="fit" width="150"/>

It would render the complete Picturefill markup with all the images served via CDN:

Picturefill.js then generates the corresponding img tag for the active breakpoint in Picturefill.

That's a lot of markup being generated there. But you never need to touch it. Just configure the ratios and breakpoints in and start authoring complex responsive images with just a single line of markup. Much more maintanable!

The holy grail is to eventually trim away this markup as standards evolve. In the meantime, I've been thinking it should be possible to use a cookie or something to detect the breakpoint for the session and then let the server side know what to send for the rest of the session, but I'm sure there's all sorts of wierd edges cases with that.

The beauty of this extension is you can start using this in your projects today and easily swap it out for something else later without needing to touch your templates. <pop:picture:responsive/>  can just stay the same, you would use those same image resizing options as a starting point for any kind of responsive images extension.

Check out this demo and open your network tab in your web inspector to watch the image requests as you resize the window.

Responsive Image Gallery

I definately breezed over some parts of this, so let me know if you'd like me to elaborate on any of this. Would love to hear your thoughts! Got a particular responsive image solution abstraction you'd like to see an extension for?

« Back to Blog Index

Sign up now

30 days free trial. Sign up in 60 seconds. Upgrade, downgrade, cancel at any time.
blog comments powered by Disqus