Facebook pixel

WebP Images and How They Work on Shopify Stores

WebP Images and How They Work on Shopify Stores

When it comes to products on Shopify, shoppers do judge the book by its cover. That’s why images are at the forefront of pretty much any successful Shopify store.

However, while you want a fair share of images on your Shopify store, you don’t want to sacrifice store speed. To keep the balance, you need to reduce image size as much as possible.

This is where WebP image format comes in. In this guide, we will explore what WebP is, how it works, what are some of its biggest perks as well as potential downfalls.

Let’s get straight to it.

What is WebP?

WebP is a next-generation image file format that provides exceptional image compression possibilities. It incorporates both lossy and lossless image compression methods to reduce image file size up to 34% more than JPG and 26% more than PNG files.

Crafted by Google back in 2010, WebP is about to become one of the leading formats for web images. And how can it not be when this image format is designed to provide rich images in small sizes to make your website faster.

Although it appeared over a decade ago, it started taking the web by storm only somewhat recently. All major browsers, such as Chrome, Safari and Opera, now support WebP, so more and more websites can enjoy its benefits without technical issues.

WebP advantages

What is it about WebP that makes it exceptional?

Let’s take a look at main advantages of WebP image format:

  • Improves website speed. If not optimized, visuals will slow down the website drastically. With image compression possibilities that surpass JPG and PNG, WebP is by far the most effective image format for fast load times.
  • Requires less space for media storage. Smaller images mean less media storage space. This is especially relevant for websites that rely on visuals and pay for unlimited storage web hosting plans as it allows to cut down on these costs.
  • Supports animation and transparency. WebP brings the best of all image formats together. Animated elements from GIF and transparent elements from PNG are both supported by it.
  • It’s an open source image format. Do you think WebP can be improved even more? Great, because it’s open source, meaning anyone can contribute and offer their input.

Do you want to test the power of WebP? Use our online converter tool!

TinyIMG WebP Converter

WebP disadvantages

If WebP is that amazing, why do we still bother with other image formats?

Well, as it turns out, it’s not entirely perfect. Take these WebP disadvantages into consideration before adopting WebP image format:

  • Not all browsers support WebP. At this point, every major browser with display WebP files. Yet there are still a couple, such as Internet Explorer, that don’t allow you to view WebP images.
  • Finding an image editor program can be a challenge. Not that many visual editor programs will allow you to make changes or save them as WebP files.

All things considered, these issues are a small price to pay for the benefits that WebP image format brings to the table. Let’s take a look at what they can do for your Shopify image optimization in particular.

Tip: Don’t forget that image optimization is not all about file size. For top-notch visuals, you have to take care of image alt text.

WebP images and Shopify

Shopify adopted WebP back in 2019 and solved all possible issues around it.

This is how Shopify handles WebP image format:

  • You cannot upload WebP files to Shopify (supported formats are JPG, progressive JPEG, PNG and GIF).
  • Shopify will automatically render uploaded images as WebP if your customer’s browser supports it.

How does this benefit you?

First, all of your customers using browsers that support WebP will enjoy a smooth shopping experience at maximum store speed. If, however, someone comes to your Shopify store using Internet Explorer or any other browser that does not support WebP format, they will be served the original file format and won’t receive broken images. It’s certainly a win-win situation for you.

Optimizing JPG and PNG still matters! Let TinyIMG take care of all image optimization on your store.

Optimize images now

How to know if your Shopify web is serving WebP images?

Checking whether your Shopify store is serving WebP images successfully is very simple.

We’ll quickly walk you through this on Chrome, but you can do this on any browser in a very similar manner.

1. Open a page of your store with images.

2. Open Chrome menu, go to More Tools and click on Developer Tools.

step 1 to check served image format is to go to developer tools

3. Refresh page, click on Network and you will see the rendered image format under Type.

step 2 reload the page and see what type of image is served in browser

Benefits of WebP image format for Shopify store

You might not even notice, but this image file format is doing a lot of good for your store.

Here is a rundown of the benefits that WebP image format provides for Shopify stores:

  • Faster Shopify store load time. And a faster store leads to better rankings, more conversions and happier shoppers.
  • Smaller image size with zero effort. WebP will compress your product photos without you having to lift a finger.
  • High-quality product images. WebP does not sacrifice quality for smaller file size. All of your products will be featured with top-quality visuals only.

Can you make Shopify show JPG images instead of WebP format?

Shopify will show JPG format automatically if the browser of your customer does not support WebP. However, in all other instances a WebP file format will be loaded, there is no option to manually disable it.

But you wouldn’t want to. WebP is simply superior to JPG and can be trusted to improve your store’s performance.

How to save Shopify web images as JPG or PNG instead of WebP?

If you right-click an image of your Shopify store, you will see that you’re downloading a WebP file. How do you switch that to JPG?

You have a couple of main options:

  • Open your store with a browser that does not support WebP, for instance, Internet Explorer. You will be served the original image file format.
  • If you’re using Windows, rename the file extension to .jpg

Tip: Alternatively, consider using WebP to JPG converter.

Curious to read more? Check out these articles:

Frequently asked questions

Does Shopify support WebP images?

Shopify serves WebP images automatically since 2019 for all files uploaded in JPG or PNG format.

Is WebP better than JPEG?

Yes, WebP image format offers smaller image size and better compression possibilities. However, be aware that not all browsers support WebP files.

How to upload WebP images in Shopify?

You can’t. You have to upload your files in JPG or PNG format and Shopify will serve them in WebP format for all browsers that support it.

How else can I optimize images on Shopify?

On top of file size and image quality, you need to take care of aspects such as ALT texts. Consider getting TinyIMG, a complete Shopify image and SEO optimization app to take care of all your image optimization needs. 

About the author
Vita Klimaite
Vita believes that every great product must be supported by an even better marketing strategy. Armed with SEO and Content Marketing experience, Vita is dedicated to helping website and eCommerce store owners unlock the power of search engines and scale their businesses. A big fan of remote work, she is always on the road, so you can also hear some exciting travel stories from her.