When optimising an ecommerce store for greater speed, images can provide a fun and interesting challenge. Merchants wanting image optimisations have to balance the management ease vs finer control. One option is to use a service dedicated to dynamically serving optimised images. No idea if it's something that will improve those site speed rankings, but we'll soon find out.
Before heading too far into this post do note that this is an article draft. I tend to just ramble out posts and add / adjust them later. This one is still in the early stages. With that now said, let's more on, or just skip to the Imgix & Shopify Demo page...
I've seen the mention of imgix pop up a few times on the Shopify ecommerce forums recently with users contemplating, or currently using it for image opimisation. Since there's interest in it let's take a look at how to hook these two services together. As usual, there'll be some handy Liquid snippets added into the post to get you started.
Using a service like imgix will require some hefty changes to the image path code in the Theme. These edits will be much like a previous post on using a Shopify proxy to use your own domain in the Shopify image path. If editing the Liquid in your Theme scares the pants off you, this post is not for you (sorry!). Also keep in mind that this can only be considered a hack at best. CDN paths can change (and have) so your code and processes must be ready to cope with that scenario.
If you use this for a store in China I'd love to hear what the speed results are with this vs Shopify. Shoot me an email or just leave a note in the comments below.
Setting up Imgix
I've not dug into the features of imgix that much but the setup process was quite painless. It was actually pretty neat just how simple it was to get started - nice work imgix team. Here are the basic steps that I used to get started so follow along as you please. Go forth and make an account or just log in.
Jump to the Sources section and click the Add a Source button (pic below for reference).
You'll want to pick a Web Folder as the Source Type along with choosing your subdomain and base url. The subdomain can be anything you like so doesn't need to match anything on Shopify side. The base url must be https://cdn.shopify.com. If you're using a proxy it will be whatever that proxy is. If you don't know what a proxy is, you're not using a proxy.
If everything looks kind of similar to the pic above you can click the Create Source button. There'll be a confirmation step so double check and Deploy when prompted. When you see the status jump from Queued to Deployed you'll know your imgix Source is ready to use. That's all you need to do on the imgix side for now. So far so good, all in 60 seconds.
Let's take a look at some code for Shopify
You'll see that the gist above has two parts. The first is some new Theme Settings that need to be added into your settings_schema.json file. Depending on where you paste this new json you'll either need to add a comma before or after it. Don't forget this comma, otherwise you'll see errors when trying to save it. Once done you should see this new section when viewing the Customise Theme area:
The second part is a snippet that you'll need to add into the theme. Just create a new snippet called imgix.liquid and paste the contents of that part in. Just to make it clear - the settings json should not be added into that snippet.
One of important imgix feature - since we're talking about theme optimisation - is the "q" (quality) filter. This will let you set a custom quality amount which can knock off some KB when compared to the Shopify image. You can also set a width as well should you be finding that the Shopify images either give you too large, or too small an image.
Even cooler is the auto=format parameter. It will automatically change the format of a jpg to a webp if the Chrome browser is detected. The webp format has 40% or so less weight than the jpg. I have to admit I didn't know about this one so a special thanks to Tom over at imgix for the heads up here.
Demo Time
Here's a screen capture of a few examples I tested (click for a bigger version). Each image was added like so: <img src="{% include 'imgix' src:foo q:5 exp:10 blur:5 %}" />
I made an imgix and Shopfy demo page with these images in place so you can poke around at the html source.
The usual warning
This is making some bold assumptions that the cdn path with never change. The path isn't documented as a static endpoint so this idea falls into hack territory. Whatever you build, make sure you add in some quick way to disable, switch or update the paths. This code here doesn't dig that deep but you want to.
Updates. Awwww, Yisss!
Imgix has also got their own post. Be sure to check that out too. (nice work guys!). They even went to the trouble of adding in some theme settings to make toggling usage nice and simple.