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.
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:
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.