Responsive design has become tremendously popular in only the three years after its birth. And with every right, in my opinion. Now making your website responsive is not just a matter of modifying your stylesheets, you want your images to be responsive too. Serving megabytes of images to mobile devices will cause unnecessary long load times. Without the right tools, making your images responsive can be tougher to tackle than you'd think. In this post, I'll show you how you can leverage some of Hippo’s features to easily get those snappy responsive images on your website.

Choosing a solution

The jury is still out on how responsive images should be implemented, whether it’s through JavaScript, a new HTML tag or completely server-side code. Either way, you can leverage Hippo’s imagesets and image variants to support responsive images while using the technology of your choice. For this blogpost we’ll use one the more popular solutions, Picturefill, by Scott Jehl.

Create an Imageset

The first thing that you’ll need to do is create variants of your images for all the different media types that you want to support. One for mobile, one for tablets, and maybe even more. Luckily, you can let Hippo do most of the work for you, by creating a custom imageset as described in detail on our .org community website. Hippo supported this feature long before the ‘responsiveness hype’ started, since release 7.5 in the beginning of 2011. For this example we’ll use an imageset that has three variants:

  • Original image
  • Tablet
  • Mobile

Image variants in Hippo

Now that you’ve setup your imagesets, we’ll include the Picturefull library using the headContribution tag.

<hst:link path="/js/picturefill.js" var="picturefillJsSrc"/>
<hst:element var="picturefillJs" name="script">
  <hst:attribute name="src" value="${picturefillJsSrc}"/>
</hst:element>
<hst:headContribution category="scripts" element="${picturefillJs}"/>

After this, we can create the links to the image variants and insert them according to the Picturefill syntax.

<hst:link var="img" hippobean="${document.image.original}"/>
<hst:link var="imgTablet" hippobean="${document.image.tablet}"/>
<hst:link var="imgMobile" hippobean="${document.image.mobile}"/>
<figure>
  <span data-picture data-alt="${fn:escapeXml(document.image.fileName)}">
    <span data-src="${imgMobile}"></span>
    <span data-src="${imgTablet}" data-media="(min-width: 640px)"></span>
    <span data-src="${img}"       data-media="(min-width: 800px)"></span>
    <!-- Fallback content for non-JS browsers. Same img src as the initial, unqualified source element. -->
    <noscript>
      <img src="${img}" alt="${fn:escapeXml(document.image.fileName)}">
    </noscript>
  </span>
  <figcaption>${fn:escapeXml(document.image.description)}</figcaption>
</figure>

That’s all! Fully responsive images in just a few steps. You can do the same for images stored in rich text fields.

When your website is looking all bright and shiny with the added responsive images, you might notice in time that some of the resized versions don’t always work on small devices. This is where the problem of art direction comes into play.

Art Direction

Scaling down images to multiple smaller variants should work in most situations, however this sometimes fails when you have a large image that contains a lot of detail. This detail will be lost when scaling down. For these images you want to manage the art direction, e.g. zoom in on a specific detail, so the image will still convey its meaning. Take for example the image below on the left and compare it to the mobile version in the middle. It’s hard to see what’s going on in the mobile version of the image. By cropping the image you can still create a meaningful mobile image variant.

Art direction for smaller images 

Using Hippo’s image crop tool

Again, we turn to the CMS. By using the built-in crop tool you can create specific variants for the problematic images. Just open up your image in Hippo and click on the ‘Crop Image’ button for the image variant that you’d like to change. A dotted rectangle will appear on the image, which indicates the to-be-cropped area. You can resize this rectangle and move it around. When you’re happy with the preview, click on the ‘Ok’ button and your image will be cropped and saved. If this somehow doesn’t do the job for you, then you can also use a professional image-editing tool and upload the image directly.

Crop tool in action

On the bottom left you can see how the new cropped variant of the image looks. You're all set now!

Scalability

The solution I've laid out here is a scalable one. This is important if you want to keep up with the increasing number of devices, and increasing variability of the screens. Supporting tablets or smartphones with a high DPI (e.g. iPad 3), is as easy as adding an additional variant and adding it to the template. Finally, you can even go beyond that, and aim for delivering a true mobile customer experience, by going further than responsive design. I'll leave it up to you how far you want to go.

Thanks for reading!