Using imgix: easy responsive images.
A few months ago I built a little website to house my autism related content. It was built while I was off work recovering from my operation and the focus was on the content not the website.
To build the site i used Twitter bootstrap for the front end and the wonderful Perch CMS for the backend.
The site has done well. It’s certainly done well enough to warrant a proper custom design in the future.
However for now I am just looking to make little improvements as and when I have the time.
The main flaw with the site is that it is slow. I never setup anything to handle responsive images so the site was serving ~1mb of images on the index pages. This was only getting worse as every new content item added an image to the page.
It was starting to be a problem, so this seemed like a great place to start.
Why use imgix
Imgix is a hosted image processing service and CDN. You show it where your ‘master images’ are stored and it produces variations of those images and hosts them for you.
They charge for master images and bandwidth. There’s no costs to have thousands of variations ready for use. The minimum charge is $10 a month.
This sounded ideal for a responsive image solution to me. I heard them advertised on ATP.fm and saw them on Daring Fireball and thought it would be worth a go.
I was looking at their site too see how I would go about hacking up a responsive image solution and then saw they had already done it for me. Awesome
I had it up and running in 30 minutes.
Here’s why I like it:
- More suitable images for my users
- Much improved performance
- Super flexible – future redesign won’t be an issue, imagines will resize automatically as demanded.
- Really easy for me to integrate
- Cheap and scalable (cheaper than hosting the images myself!)
- The company sponsors my favourite podcast
Another reason I like it is that all the image transforms are done on Mac Pros. As a Mac geek, that makes me smile.
Perch only resizes files at upload. This means that if I change the sizes I need for my website I have to reupload all the images. Imgix is much simpler.
Code.
Installation was easy. I downloaded the latest library and put it on my server. Then I added it to the global head.
I then swapped around my img tags to set the data-src to be the path.
This didn’t work quite as I expected. Perch always returns the root path, yet my source folder is the end of the path. So I added a couple lines of JS to fix the paths before the library calls them. A bit ugly. But it works.
In all I changed about 15 lines of code within the side.
Outcome.
The largest page I had was 1.2mb on all device.. It’s now ~340kb on my phone and about ~600kb on my retina MacBook Pro.
On my home wifi, the page load time is around 500ms and on the 3G network in my flat it’s about 800ms. Before imgix the pages took upwards of 2 seconds to load on wifi and anything up to 5 on 3G.
The major downside is that some images no longer load for users without JavaScript. This is not ideal. So I will probably add a link to the original image into each page.
The images I have optimised are all decoration images with empty alt attribute so I am comfortable with them being added by progressive enhancement.
Final words.
My next planned improvement is a new homepage. Which will be quite image heavy so this work is a good foundation.
During the my development I did spot an interesting bug in the library. I found a work around, and also emailed the support. They got back to me quickly with a helpful response and were very polite. Always a good sign.
I have other projects in mind which are very image based. So having something flexible is a great start. There plenty of headroom for growth within my account. I’m able to think a little more creatively knowing that images of ‘the right size’ will be easy to generate as required.
Imgix is not for everyone. I could achieve something ‘close enough’ with some time. But having a nice well maintained solution is a better use of my time.