Optimizing for mobile with Craft image transforms and Foundation Interchange

Naomi Royall Naomi Royall

Reducing the weight of your website's images is generally the most profound improvement you can make for mobile performance.

Why is mobile performance important?

Mobile visitors are often in the “worst case scenario" of all our website users. They frequently have low bandwidth connections: pages will load slower. On top of this, mobile users often multitask or view on-the-go, giving only half-an-eye and less patience to your site. When a significant proportion of your visitors are on mobile devices, as are 12% of new visitors to our website (which is a relatively small percentage compared to most websites), this can lead to high bounce rates unless you optimize for mobile.

How can we impact mobile performance?

In the best case, mobile visitors receive a lighter and more streamlined website than their desktop counterparts. One way to go about this is decreasing page weight via images. Delivering an image of smaller dimensions more suited to mobile helps to reduce page weight drastically. Indeed, one of our heavier pages is 1.2MB lighter after we put this solution in place, improving page load times by 3s on a fast wifi connection.

A Responsive Image Solution

Foundation Interchange and Craft image transforms combined, make responsive images easier than they ever have been. Foundation provides the means to swap out images at various screen widths, and Craft does the image processing. There are no additional tasks for the CMS user when adding a new image.

This can only be applied where asset fields are used, not when images are added into the WYSIWYG editor, making the content block model we discussed previously even more poweful.

We chose a breakpoint of 400px, the largest screen width for the majority of mobile devices, below which we now deliver smaller images. Since most of our images occupy the full page width at this screen size, it was straightforward to apply one set of mobile dimensions: 370px width with variable height.

The first step is creating a new asset transform in Craft (the docs do a good job of explaining this). Craft lets you specify an image quality for the transform. We found a quality of 70 reduced filesize significantly whilst still preserving a high enough visual quality for mobile viewers. Here's what our transform looks like:

Next, add Foundation Interchange into the mix. All that's needed is a data-interchange attribute on your images with your mobile media query and Craft transform handle. Remember to supply a fallback image within a noscript tag for users with Javascript disabled.

Note: If you're curious about any of the terminology here, check out Craft's asset file model.

That's the solution in a nutshell. We added another two transforms for large images on our site that didn't conform to this generalized transform.

Issue with Orbit Slider

When it came to our image sliders, this approach needed some refinement. We use Foundation Orbit slider. In our experience so far, Interchange does not play nicely with this, the slider no longer detects the height of the images and they are cropped short. Our temporary solution is to load the first image in the slider without Interchange, meaning the first slider image is not optimized for mobile.

This is not an ideal solution, but the solution we found to work most effectively. We initially tried to solve this by triggering a resize event on the slider after the images and Orbit JS have loaded, however, this led to a notable lag rendering the slider and the layout of content around it. Thus it seemed best to opt for a slightly heavier but smoother experience.

Thinking small

Our approach is just one of many for creating a responsive and performant website. There is much more that could be done to help mobile viewers receive a great experience and enjoy visiting your website. We found this particular solution to be straightforward and have significant benefits. Do you use a similar approach on your website?