Skip to content
Overview
Following are some points related to WebP images for shopify speed optimization –
- How to upload WebP images in shopify
- How Does your Shopify Website Serve WebP Images?
- JPG Images instead of WebP images
- What are the different scenarios for image upload via admin?
- What image type do we upload for products, collections, and banners?
- When do we need to upload a direct webP image?
- What are the benefits of WebP image format for the shopify store?
- What are the disadvantages of WebP?
It will be helpful to understand WebP images for shopify speed optimization and to maintain it based on the content below. The content below derives from our experience executing over 50+ speed optimization projects on Shopify websites.
What is WebP?
It is a next-generation image file format that offers exceptional compression capabilities. This is a superior image format developed by Google. for web images, it supports lossless compression and lossy compression (as well as transparency). When you’re attempting to compress an image, you should use WebP.
Shopify internally converts images and delivers them in webP if coding is done properly. WebP is the encoding technique that needs almost 40% less file size to display a similar image compared to JPG.
How Does your Shopify Website Serve WebP Images?
You can easily check whether your shopify store is successfully serving WebP images.
On any browser, this will be described in a very similar manner. However, we will demonstrate it on Chrome in this example.
- Add images from your store to a page.
- Go to the Chrome menu, go to more tools, and then click on Developer tools.
- When you refresh the page and click on network, you will see the rendered image format.
Can I use WebP images in Shopify?
When you upload your files in JPG or PNG format, Shopify will serve them in WebP format for all supported browsers (Chrome, Safari, and Opera).
If your customer’s browser does not support WebP,shopify will display JPG format automatically. In all other cases, however, a webP file format will be loaded, there is no option to disable it manually.
WebP is simply superior to JPEG and will improve the performance of your store.
You will see that you are downloading a web file when you right-click an image of your Shopify Store. How do you convert that to a JPG?
You have two options:
- You can open your store with a browser that does not support WebP. (Internet Explorer).
- You can use Windows by renaming the file extension to .jpg.
For Example:
| Image Type | Original Size | WebP Size | Reduction |
| Product Image | 42.3kb | 23.4kb | 30% |
| Collection Banner | 200kb | 140kb | 30% |
| Banner | 276kb | 139kb | 30% |
Looking For Expert Shopify Speed Optimization And Other Services Get In Touch
What are the Different Scenarios for Image Upload via Admin?
1) We can upload an image through customization
2) Go to Online store > Content> Files
What image type do we upload for products, collections, and banners?
| Image Type | Image Formate |
| Product Image | JPG |
| Collections Image | JPG |
| Banner Image | JPG |
| Article Image | JPG |
| Logo Image | PNG |
| Icon Image | PNG |
When do we need to upload a direct webP image?
If we have an image with a high resolution, converting it to WebP format using a tool will result in a file with a lower payload, while maintaining the visual quality.
| Image Format | Typical File Size Reduction |
| JPEG to WebP (lossy) | 25-34% |
| PNG to WebP (lossless) | 26% |
Benefits of WebP Image Format For Shopify Store
- i) Faster loading of Shopify stores
- ii) Reducing the size of the image with no effort
- iii) Images of high quality
- iv) support animation and transparency
What are the Disadvantages of WebP?
Why do we still use other image formats if WebP is so amazing?
- There are some browsers that do not support webP.
- Finding an image editor software can be challenging (Visual Editor).
Some Facts about Shopify’s Support for WebP Images Since 2019.
- WebP lossless images are 26% smaller in size compared to PNGs.
- WebP lossy images are 25-34% smaller than comparable JPEG images.
- With WebP, you can compare images on the web with greater ease and save over 30% in file size compared with traditional image formats such as PNG and JPEG.
In conclusion, Using WebP for Shopify speed optimization is a powerful way to reduce the loading time of your website and improve the user experience. you can ensure that your website loads quickly and provides a positive user experience for your visitors. Additionally, using WebP will result in small file sizes and faster loading times.
