How to Effectively use WebP for Shopify Speed Optimization

Bhavesha | Dec 20, 2021 | 5 min reads

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.
  1. Add images from your store to a page.
  2. Go to the Chrome menu, go to more tools, and then click on Developer tools.
  3. When you refresh the page and click on network, you will see the rendered image format.
dentification-for-shopify-serving-WebP-images

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.

Tag’s

Leave A Comment