Load times are important, no way around that fact. People are surfing on their phones, on computers, on WiFi hotspots, so in the unbelievably fast-paced world of online browsing, even an extra second spent waiting for something to load can be enough to bounce a prospective customer. Images are usually the main contributor to page load times and since Shopify stores, especially things like collection pages, often use a lot of them on pages, it is vital to make sure you follow a number of best practices to ensure your images are optimized correctly, for better user experience and better SEO.

One useful feature that you may not be aware of is the format parameter when outputting shopify images. It allows you to output your images as either a JPG or a progressive JPG. Generally speaking, I highly recommend progressive JPG as much as possible, since this provides an additional performance boost by loading the image in several stages of progressively higher detail. So the initial page load shows a fairly small and highly compressed version of the image, to reduce the initial data usage on initial load, and from there it renders the image in higher detail with successive passes.

It may seem obvious, but one thing that can be easily missed or not fully considered is the size at which your images are rendered. Rather than going through and having to adjust the size of all of your images directly, the simplest way to output an image in Shopify is using the img_url filter like this:

{{ product | img_url }}

Which renders a product's featured image at 100x100 pixels. That can often be too small for certain situations, so often a developer will use one of the standard larger sizes such as grande or master. While this will ensure that the page shows a larger image, the problem is that sometimes it can be larger than the theme needs it to be, and when this happens on a number of images on the page it results in wasted data and an unnecessary increase in page load time. Which, of course, is bad for user experience and SEO. The best way to avoid this is to ensure that your image sizes are optimized for your use case.

To demonstrate this, let's say we've got a product image that has an original size of 1920x1080px. We want to place it inside an element that is 700px wide. We could do this:

<div class="product">{{ product | img_url | size: 'grande' }}</div>

However the large size outputs the image at 600x600px, which is slightly too small for our 700px wide div. We could then use the next default size up, which is master, but this would then output that image at 1920px wide, which is way too big for this use case. The CSS would scale it down to fit inside the 700px div, but that would still result in a lot of wasted data and time loading that overly large image. 

Instead, the best solution, is to actually load the image at the size it is needed by specifying the width in pixels like this:

<div class="product">{{ product | img_url | size: '700x' }}</div>

This tells Shopify to render the image with a width of 700px (and auto height), which means we can ensure that our images are the exact size they are needed at. A further consideration on this point is that depending on your page and exact use case, it is perhaps likely that you will need to serve different image sizes at different resolutions. The best way to approach this while maintaining high performance standards is to use responsive images. Shopify wrote a great article on this exact topic, explaining how that is done.

Shopify applies compression to the JPG images served on your store via its CDN, but it has some specific rules on how it does so depending on the level of compression on the original image. For this reason, it is recommended to always ensure that you compress your images before uploading them to your store using a tool such as TinyJPG or Compresser.io. However, if you need to do the compression on a large number of images that are already added to your store, then there are apps such as TinyIMG SEO Image Optimizer that will take care of that.

A further best practice that reduces page load time is to lazyload assets such as images, videos and iframes using a good lazyloading plugin such as lazysizes. Since these are javascript based plugins, they can be used on Shopify stores easily by including the file and calling them from your working javascript file.

Another trick that some developers may not be aware of is that Shopify provides a scale parameter to automatically serve images at higher pixel densities so that they look sharp on retina devices. While this won’t cut down on page load times per se, it will ensure that your pages look good across all devices and it is something that is worth factoring into your workflow.

Recently, on July 2019, to try and address some of these issues,  Shopify started serving WebP images (https://changelog.shopify.com/posts/online-stores-automatically-serve-webp-images). WebP is a modern image format that provides superior compression compared to PNG and JPG files, which of course means that your pages load faster and consume less data in the process. The good news is that no code changes are required to leverage WebP. Shopify's CDN automatically serves WebP files to the browsers that support them.

The images on your website are incredibly important in establishing your brand, so don’t let them ruin your user experience and SEO ranking while they’re at it. By factoring in some of these image optimization techniques, you can help your website load faster, more precisely, and keep your customers flowing through without any unnecessary wait or speed bumps!