Thanks to constant improvements of the HTML Living Standard and the work of the Responsive Images Community Group, web developers are more than ever invited to actually make images responsive. With a little Grunt magic this task can be realized in a snap.
This post is not an introduction to native responsive images. Yoav Weiss already did an amazing job there. Also, when I talk about responsive images I refer to the enhanced
<img> tag with
sizes attributes. The celebrated
<picture> is not the best solution in most cases and should only be used for art direction. Read here why.
Let’s get our hands dirty. Responsive images require that your web site’s image files exist in several resolutions. Enter the grunt-responsive-images task that produces images in different sizes. That’s half the battle already. Let’s assume we created the following image files with the plugin’s default settings:
photo.jpg photo-small.jpg photo-medium.jpg photo-large.jpg
What we need now is another Grunt plugin that can incorporate those image files into our HTML code and produce something like:
<img src="photo.jpg" srcset="photo-small.jpg 320w photo-medium.jpg 640w photo-large.jpg 1024w" alt="An awesome photo">
This already enables the browser to choose one of the files with respect to the viewport size. Without a
sizes attribute it assumes an image size of
100vw, though. This will hardly be the case for all your images, especially in very elaborate layouts. Therefore it would be even better if we could provide the browser more information:
<img src="photo.jpg" srcset="photo-small.jpg 320w photo-medium.jpg 640w photo-large.jpg 1024w" sizes="(max-width: 20em) 100vw, (max-width: 30em) 50vw, 90vw" alt="An awesome photo">
Unfortunately, my research for a Grunt plugin that could do all this was not successful. All I have found is the grunt-responsive-images-converter task. It scans your sources for markdown files and replaces image tags with the
<picture> element. This is not helpful since I was looking for a plugin than can handle HTML files and would use the
Time to write my own Grunt plugin. This is what I came up with: The grunt-responsive-images-extender.
It is also available via the npm, so this simple line in your project’s root folder
$ npm install grunt-responsive-images-extender --save-dev
makes you all set. Take a look at this blog’s Gruntfile to see the plugin in action.
srcset part works pretty well already. The
sizes chunk on the other hand needs some major improvements. So far you can only configure one
sizes array for your whole web site. That means the same sizes are used for each and every image, regardless whether it is a hero image, an article photo or a tiny icon. This renders the feature pretty much useless, but I’m on it and will extend the plugin to match certain image selectors with different sizes.
Until then feel free to experiment with the Grunt task. The browser support for responsive images is far from perfect, but the
src attribute is a safe fallback option. So you can start implementing responsive images today without drawbacks! Let me know what you think and drop me a line on Twitter.