4 Steps to Accelerate Image Delivery in Shopify

4 Steps to Accelerate Image Delivery in Shopify

Shopify is one of the more popular “webshops-in-a-box” solutions out there. It’s very easy to get started and it includes all the functionality users need to start a ready-to-use web shop. Managing product images is quite easy. Images are served from Shopify’s own CDN (Content Delivery Network). However, Shopify’s CDN lacks the crucial functionality to fully optimize images – especially for mobile. Mobile commerce will account for more than two billion transactions by the end of 2017 and will only increase in importance over time. Given this trend and the critical importance of mobile when researching and buying a product online, it’s a smart investment to ensure all your product images are optimized for mobile. This article will demonstrate how to implement ImageEngine in your Shopify theme.

Shopify makes most of its standard functionality easy to use. However, if a web shop owner wants to do something slightly more advanced, then he or she will need to do some manual work and file editing. Below are the steps you need to follow to enable image optimization in Shopify:

Step 1: Sign up for an ImageEngine account

If you haven’t done so already, go to scientiamobile.com and get setup for ImageEngine. Our team will guide you through the process. Once you have registered, our team will provide you with a unique hostname for ImageEngine. The token will follow this scheme: {token}.imgeng.in. For example,  “xxzz.imgeng.in.” We will need this later.

Step 2: Log into your Shopify account

Next, we need to change your website so that it serves images through the ImageEngine CDN, instead of the default Shopify CDN. Unfortunately, there is no magic button you can push. But if you follow the steps below, it’s pretty easy if you’re slightly familiar with HTML and file editing.

Step 3: Edit your Shopify theme

First, log in to your Shopify admin section, find your active theme and click “Edit code” from the Actions dropdown.

Then, you’ll be presented with file editor. You’ll need to enable Client Hints. You do this by editing the “theme.liquid” file in the “Layout” folder.

Just below the <head> tag, add this line:

<meta http-equiv=”Accept-CH” content=”DPR, Width, Viewport-Width, Save-Data”>

This will enable ImageEngine to optimize image even better.

Now we need to actually change the URLs of all your product images. Don’t worry, if you have 10,000 product images, we don’t have to change 10,000 URLs. Shopify has a template system with code fragments which are included elsewhere in the theme depending on the type of page or layout. How many files you need to edit depends on your theme. The most important templates are:

  • product listings template
  • search template
  • product details template
  • cart template
  • landing page templates

The files are usually located under the “Sections” folder in the file editor, depending on how your theme is configured.

Before we start editing, please make sure to backup the current theme. You do so by clicking “Download theme file” from the Actions menu.

Next, go into the template file and identify all image tags. You can search for “<img” by hitting Cmd+f or Ctrl+f and type “<img”.

In the src attribute of the image tag we need to add the ImageEngine token you received in Step 1. The src attribute looks something like this by default:

src=”{{ image | img_url: ‘300×300’ }}”

If your ImageEngine token is, for example, “xxzz.imgeng.in”, then we will change the value of the src attribute to:

src=”//xxzz.imgeng.in/http:{{ image | img_url: ‘300×300’ }}”

(Note the http: at the end. This is needed because Shopify use relative protocol references: “//”)

When an image is fed through this template, the above change will produce an image source looking like this:

src=”//xxzz.imgeng.in/http://cdn.shopify.com/s/files/1/2317/9343/products/car.jpg

Congratulations, the image is now served through ImageEngine

But we’re not quite done yet. In the image below, you see a data-src attribute too. It’s important to remember to prefix every point in the code which would reference an image. Where this is depends on your theme. For example, on the product details template there is an attribute called data-zoom. This must also be prefixed.

When you have edited all your template files, save them and head to your site to see the changes.

Step 4: Test

There are many ways to check that images are being served through ImageEngine CDN. You need to check the URL of the image. The original image URL should be prefixed with your ImageEngine hostname. For example: //xxzz.imgeng.in/http://cdn.shopify.com/s/files/1/2317/9343/products/car.jpg

One way to do this is to open Chrome developer tools and filter the requests under the Network tab. Search for “imgeng” and you’ll see the requests made.

Congratulations! Your images are now optimized and will load swiftly on any device or browser.