Episode 57 - WebP Images in your Shopify Store

The Podcast

Show Links

Table of Results

Results on Image Size Test in Shopify Store

Help the Podcast

Transcript

Hey, Scott Austin here.

About two years ago, I did a podcast episode titled all about images in your Shopify store. And in that episode, I gave a bunch of best practices for how to pre-process photos to upload into your Shopify store.

After I created that episode, Shopify rolled out support for WebP in July 2019. So in this episode, I'm going to dig into WebP and see if I can update my recommended best practices for pre-processing photos.

So let's start by talking about the WebP format.

WebP is an image format employing both lossy, like JPGs, and lossless, like PNGs, compression. It supports animation, like GIFs, and transparency, like PNGs. So its really flexible. The WebP standard is developed by Google. It acquired the format as part of an acquisition in 2010.

WebP is designed to create files that are smaller for the same quality, or of higher quality for the same size, than JPEG, PNG, and GIF image formats. A good rule of thumb is that a WebP file is about 30% smaller than a similar quality JPG.

Support for the format has increased over the years and it is becoming a standard on the internet. As of May 2021, WebP was supported by 94% of the web browsers in use worldwide.

As I mentioned earlier, Shopify started supporting WebP in July 2019. Images still need to be uploaded to Shopify as JPGs or PNGs. Shopify does not support the uploading of WebP. What the Shopify servers do is to determine if a visitor to your store is using a browser that supports WebP. If they are, then Shopify delivers your images as WebP. If the browser doesn't support WebP, then Shopify delivers the images as either a JPG or PNG, depending on which format you uploaded the image in.

And browser support is one of the downsides of WebP. Not all browsers support WebP, but that is slowly changing. In fact, Apple added partial WebP support to Safari in 2020. And I do wonder if that slow support was a function of a Apple / Google rivalry. Additionally, Internet Explorer does not support WebP and never will as Microsoft is no longer supporting that browser. I'll include a link in the show notes to a site that will provide you with up-to-date information on browser support of the WebP format.

Now because Safari has partial support, Shopify is delivering JPGs and PNGs to those browsers. And this is my guess as to why we can't upload images in WebP. This way, Shopify servers only have to change the format in one direction from PNG and JPG to WebP, but not in both directions, thereby reducing some complexity.

Now, I'm a fan of data. So for this episode, I put together a Shopify site that I could use to measure the impact of different image formats and compression levels. You can also use the site I made to measure things for yourself, if you'd like. I'll include a link to it in the show notes.

What I did, is created 16 different products, or more accurately, 16 instances of a product in a Shopify store. And each product used the same set of 10 stock images for the product photos. The difference was, the pre-processing I did on the photos before uploading them. I varied three things.

First, I varied the file format between PNG and JPG.
Second, I varied the compression on the JPG. In a JPG you increase the amount of lossy compression by decreasing the Quality setting when saving the file. I used three quality settings of 95, 75 and 55.
Third, I varied the size of the image I uploaded. I used these 4 image widths, 5,000 pixels, 2,048 pixels, 1,200 pixels, and 600 pixels. The 2048 is the max size that the Shopify servers will render even though you can upload larger images.

If you go to the homepage of the test store, you'll see each of the 16 image variations listed out. For example, one product is titled '2048px - 75 Quality'. So that product has the 10 stock photos uploaded where they were all pre-processed to be 2048 pixels wide and saved as JPGs with a 75% quality setting.

And just for fun, I added two more variables to the mix of 16 products. The first variable was which Shopify theme was used. I tested on Debut - a free theme provided by Shopify. And I also tested on Flex - my favorite premium theme. And the second variable was browser. I tested on Chrome on PC and on Safari on Mac.

So that ends up being 64 tests. Each test was a measurement of the total file size of the images downloaded on the product page on page load. That's before the customer does any clicking on the page which could load more images on the page. For the test, I had magnify on hover turned off within the theme settings as that feature adds the download of a large version of the first product image to the initial page payload. And I wanted my test to simulate a store that it optimizing for page speed.

So let me explain a bit about how I did the testing as this method is something you can use when evaluating your store. The common browsers come with a feature called Developer Tools. This is an extensive set of tools that help developers troubleshoot issues with websites. Some of the features are complex and have quite a learning curve behind them. But we're going to focus on one of the easier to master features.

To open up Dev Tools, just go to your browser and open a web page you want to look at. Then right click on the page and select 'Inspect' or 'Inspect Element' depending on which browser you are using. The Dev Tools window will open up. For my testing, I was look for the file size of the images being downloaded for a given product page. To find that, I went to the Network tab in DevTools. And then selected Img or Image in the sub-menu. This will show a list of all of the images on the page. If the list is currently empty, you can refresh the page and then you'll see the images. You'll also see an image count and the total file size of the images.

So with this testing method, I measured the file size of the images in my 64 different scenarios. I'll include a link in the show notes to the table with the results as there quite fun for those listeners that are a bit more geeky.

Here are my findings from looking at the test results:

The file format used makes a big difference. Actually, on Chrome, the file format used in the upload to Shopify made almost no difference. And that's because the images were being served as WebP by the Shopify servers. Here's some data to illustrate what I mean. On Chrome and using the flex theme and an image size of 2048 pixels. The upload of PNGs was 36 MB. But the images in the browser only took 200 kB, which is 0.2 MB. The upload of 55 quality JPGs was 2 MB, so 6% of the PNG upload size. But the images in the browser were still only 200kB. But that's Chrome and WebP. Safari is a different story as Shopify is not delivering WebP images to Safari but instead delivers the same format, PNG or JPG, that you uploaded the image in to Shopify. So in Safari, the 36MB upload of PNGs was a massive 6.5MB payload to the browser. The JPGs however are much lighter and similar, or actually a little bit smaller, than on Chrome.
The theme makes a difference. I only compared two themes. But in each of the tests there was a difference between the two of about 3X. The payload of the images for the Debut theme was three times the size of the payload for the Flex theme. One reason for that is that Flex is loading less images on the initial page load than Debut is. It waits for the user to interact with the product carousel before downloading more images. Flex was downloading 11 images for a product when Debut was downloading 30 images for the same product. Seeing this difference really makes me want to run this test across many themes. But that will have to wait for another day.
Themes (at least those tested) are doing a good job calling for smaller assets. I was surprised by the small payload size for a product with 10 images. These themes are accomplishing this by asking for the right sized asset, not the full sized asset. Both themes were using a 300px image for thumbnails. Debut used a 540px image for the product image, while Flex was asking for a slightly larger 600px image. Once again, I'd love to test this across many themes to see how well each of them is doing.
The image size in pixels makes no difference. The uploaded pixel size varied from 600px all the way up to 5000px. And it made virtually no difference in the payload size to the customer. And that's because the themes are calling for smaller assets, 300 to 600 pixels for the product page.
The compression level in JPGs makes no noticeable difference. Whether it's in Chrome where images are getting delivered as WebP or in Safari, where images are getting delivered in JPG, the quality setting on the uploaded files made no difference to the page payload.
It's really hard to make out the visual difference of JPGs uploaded at different qualities. The stock photos that I used for the test were lifestyle photos. I could not really make out any difference in the look between the different quality settings in the uploaded photos. Now there is an exception to this and that's when the image has a gradient, which none of the test photos did. But a common gradient in product photos is a solid background or a blue sky. To see the quality difference, I added a 17th product to the test store. This product's photos have a gradient. So if you follow the link in the show notes, you'll be able to see the difference for yourself.

So that's what I've learned by doing this test. Now with those findings in mind, here's my recommendation for the pre-processing of photos. All photos should be turned into JPGs. This is because Shopify is not delivering WebP to Safari. The minimum image size should be 2048 if you have originals that are that size or larger. This is because 2048 is the max size that Shopify will deliver to the browser. And lastly, there's no need to apply compression or quality to your images as the Shopify servers will take care of it.

That's it for WebP and images. Thanks for listening.