Redesigning the Knight Foundation Website with imgix

imgix logo
Sean Washington, Octopus Creative
December 14, 2016
3 minute read
Redesigning the Knight Foundation Website with imgix

Recently, Octopus had the opportunity to re-design and re-architect the website for Knight Foundation, a national foundation that invests in journalism, arts, and in the success of cities where the Knight brothers once published newspapers. One of Knight’s biggest priorities—and perhaps one of our biggest challenges—was to make the site as performant as possible across all mobile devices while at the same time displaying their imagery in a big way. That’s no easy feat, but imgix came through for us big time.

Out of the box, imgix provides efficient ways to fulfill the baseline of performance enhancement needs for a site’s images. CDN? Check! Optimized and compressed images on the fly? No problem! Retina-ready photos served to retina devices so users don’t waste data? Yup! Images cropped to predefined aspect ratios, colors auto-enhanced, and the whole thing served at the right size and format for the current device? Surprisingly easy!

Seriously, imgix provides all these tools, and its as simple as adjusting a few parameters on the image’s URL. Having imgix to draw on let us do a surprising amount of optimization with very little fuss. I’d like to talk about a couple of tools in particular that saved us a lot of time—imgix’s auto adjustments API and the imgix.js library.

Better Performance Without Build Changes

The first step to performant mobile images was to utilize imgix’s Auto Adjustments parameter. The Auto Adjustments parameter allows you to do things like automatically compress images and change the format they’re served in on the fly. This is huge. It meant never having to worry that the things Knight Foundation uploaded wouldn’t be saved for web and run though an image optimizer—imgix handled that for us!

Let's take a look at how this plays out on a single image.

Picture of a mountain

To look at some actual numbers, we'll use the handy imgix Sandbox. The image we’re looking at here has a file size of over 6MB. By simply turning on auto compression and auto format, we can knock that file size down to 830.05kB.

We’re not done yet! In most cases you’re not going to want to display an a full-size image, especially not one sized at 3600×2025 pixels. Let's say that this image is going to be shown in a 1200×675-pixel container. When we apply the crop the file size now drops to 114.51kB.

So in a matter of seconds we’ve gone from an image weighing 6MB to 114.51kB, with zero changes to any build tools or crop settings in an app or CMS. That’s pretty impressive!

Responsive Design Made Easy

The second step to obtaining great-looking yet performant imagery for Knight Foundation was to use the wonderful imgix.js library. In a nutshell, this tool looks for images on the page with the ix-src attribute and modifies them to include both the size and srcset attributes. Then, depending on the viewport size and screen density, it displays the image that best matches the environment.

If you’ve ever had to do this by hand before, you know how much of a pain it can be, between deciding what image widths should be supported, making those crops available for display, and setting up the JavaScript needed to make this happen. imgix.js makes it almost effortless. The only thing I need to do is enter some widths, and we’re off to the races! Need to make some changes after this has all been set up? No worries, just change those size values and imgix.js will utilize the crop parameter to automatically make all of these crop adjustments for us.

The Knight Foundation rebuild was a tall order, but imgix made it easy for me to lock down one of their biggest priorities with very little effort on my part. I’ve always heard that great tools are transparent because they do their job so well that they enable the developer to focus on other areas. By that definition, imgix is a great tool in my book.