As part of its ongoing efforts to make Shopify stores load faster, Shopify announced support for the “modern image format” WebP in July 2019 — but what is WebP, how do you use it in your Shopify theme and what are some of its shortcomings?
WebP is an image format that has been developed by Google to create a more flexible and efficient image format for use on websites.
In simpler terms, it’s designed to make it easier for website owners to use a variety of images in high-quality format while still keeping file sizes relatively small.
The advantages of WebP
As mentioned, WebP typically results in significantly lower file sizes — Shopify says it can display images in nearly identical quality at 30% smaller file sizes.
That ultimately means that your images will load faster when shoppers come to your Shopify store using compatible devices and browsers.
Since the high-quality images needed to engage users and show details of products tend to be, by their very nature, larger file sizes, they often contribute significantly to the total time it takes to load a page.
As of this writing, Shopify supports WebP for images uploaded as JPG or PNGs, including PNGs with transparency (also known as an alpha channel).
GIF files will not load via WebP and, although WebP does include a provision for animation functionality, they are not supported by Shopify as of this time.
Shopify and WebP
In July 2019, Shopify’s image serving technology, known as a content delivery network or CDN, automatically began providing images in the WebP format on supported browsers for JPG and PNG image files.
This change doesn’t require any updates by store owners as long as images are loaded from Shopify’s “cdn.shopify.com” subdomain.
If you use an alternative server to load image files, Shopify’s WebP support won’t automatically kick in, but the provider may have WebP support of its own.
Don’t see .webp files in your Shopify theme code?
Here’s one of the potentially confusing aspects of Shopify and WebP: If you look at your online store’s HTML code (such as through the “view page source” option), you’ll still see references to .jpg and .png files in the <img> tags.
There won’t be, as of this writing, any direct references to the .webp file extension. In fact, Shopify doesn’t even let you upload images in this format.
However, assuming you’ve uploaded compatible images and a user is on a compatible browser, the files are actually being provided and loaded in the WebP format — with all of the associated file size savings.
To make a long story short, Shopify’s image servers are set up in a way that the file extension shown doesn’t necessarily correspond to the format it is actually transmitted in. In other words, the .png or .jpg extension is, in the case of .webp, simply an arbitrary label added to the end of a URL and doesn’t mean it’s being served in that format.
You can verify that your store is loading images in WebP format by enabling “developer mode” in Chrome or “debugger mode" in Firefox.
Under the “network” tab, you should see your image files listed with .jpg and .png extensions but with “webp” in the “format” column. This confirms that the file is loading in WebP format no matter what the file URL says.
The downsides
That all sounds great — but there’s also a big catch.
As of this writing, the newer versions of Google Chrome and Firefox are the only major browsers that fully support WebP natively (Opera and a handful of lesser known ones do as well).
Microsoft Edge can support WebP with a provided “platform extension” that’s typically enabled by default, but not available if users have the “application guard” mode active.
You’ll also notice that Safari and Internet Explorer are all missing from that list.
Unfortunately, that means that visitors to your site using Safari, Internet Explorer or some versions of Edge (or other less common browsers) won’t be able to take advantage of the WebP file format and the associated file size savings.
The lack of Safari support does present challenges if you have a large percentage of visitors using the iOS or iPadOS operating system since Safari is the default browser on these devices.
It also, unfortunately, means that you can’t leverage the advantages of WebP and use Apple’s integration with Apple Pay, including the dynamic checkout button version.
The one piece of good news with all these limitations is that Shopify will automatically detect if a visitor is using a browser or device that doesn’t support WebP and send them the image file in JPG or PNG format.
Finally, it’s worth noting that there are ways to enable WebP support on some unsupported browsers, but these require adding additional code that isn’t supported by Shopify or most Shopify theme developers, including Out of the Sandbox.
Overcoming that shortcoming
So, WebP sounds great but doesn’t work reliably in Safari and potentially Microsoft Edge — which is a huge bummer, especially if you take advantage of the integrated Apple Pay dynamic payment button and checkout.
As of now, there aren’t any interim solutions other than adding “workarounds” — but these typically have downsides as well.
All that said, this issue actually is a good overall reminder about the importance of uploading optimized images.
Most Shopify theme developers and experts recommend uploading an image file in the largest size you have, up to 4472 by 4472 pixels and 20 MB.
Obviously an image that large is most likely going to have a pretty hefty file size — but it’s a common misconception that the end user ultimately has to download the image in that size.
In reality, that image is likely never actually provided to a user in that big of a size — instead Shopify’s CDN, combined with your Shopify theme code (assuming you’re using a compatible theme and version), work together to determine the smallest image file that can be sent without sacrificing quality.
This typically means that users on smartphones don’t have to download image files as large as, say, a user with a large Mac computer screen. This can be particularly helpful since Internet connections on mobile devices tend to be slower than on other networks.
However, you can often still improve your image loading time by using a compression tool before you upload the image to begin with. There are numerous compression tools out there that can be found by searching the file type you’re working with and the word “compressor.”
Most of these services let you upload your image and, after a bit of “work” behind the scenes, let you download an optimized version. They will typically also show you the before and after file sizes and sometimes let you compare the quality of the two.
Ultimately, leveraging image compression from the beginning is great for visitors on both WebP compatible and non-WebP compatible devices because, either way, you’re still starting with an image file that’s smaller to begin with.
Like with any tools, however, it’s always a good idea to check that you’re happy with how the “before” and “after” images compare in terms of legibility, color and overall quality.
As WebP continues to evolve and become more popular, it will hopefully be added to more browsers — but it’s also not a bad idea to optimize your images even before letting Shopify’s WebP take over as well as a “fallback” for non-supported browsers.
Author’s note: Because of the constantly changing nature of the web, please note that all information is this article is correct as of Sept. 17, 2019 and it will be updated as new information comes along with a revised “accurate as of” date in this paragraph. However, keep in mind that any very recent changes to WebP may not be immediately reflected here.
){kind=link}