Published on

Using WebP images improves your online shop


It’s impossible to imagine a website without images

Images are all over the place and there are plenty of reasons why. When it comes to a webpage, images have the role of supporting a brand’s personality or an artist’s signature. They help to create a mood, to tell a story and basically, to make a website far more attractive. If you are an e-commerce owner, the advantages of images become essential rather than a flashy plus: you need to show what you’re selling! But the truth is that images come at a price. Keep reading to know how to make your online shop faster and give your customers the best experience.

Images usually have large file size and each image you upload to your website will impact on the website’s load time. It's quite simple: if your website has more bytes, it’ll take longer to load. This could mean losing a bunch of possible clients or viewers. Hang in there, nothing is lost: there’s a solution! A few years ago, Google created a new image format, specially designed to help with page speed. Ladies and gentlemen, we introduce you to WebP!

What’s WebP?

WebP is a modern image format developed by Google. It’s both lossy and lossless. It achieves high quality without the extra bytes, which is essential for you. You can learn more about the importance of having a fast site here. Despite its lack of fame, WebP is truly an innovative and efficient image format. When compressing an image, you aim to keep the sharpness of the original image and WebP accomplishes that reducing the size file almost 40% in comparison to JPEG.

How does WebP work?

Without getting too technical, WebP compression can work in two different ways. As we mentioned before, this format is versatile so you can choose to compress an image with two modes, lossy or lossless. When you choose lossy, it uses predictive coding to encode that image. This means that during the process, it predicts a block of pixels according to the previous block. Meanwhile, lossless reconstructs new pixels exactly as they were in the original image, no information is lost and an expert-eye cannot detect if the image was compressed or not.

Print: How to use Resizeimages tool

With the Resize Images Tool, you can convert and compress a JPG into a WebP very quick and easily without lossing quality.

You must be sure to click Advanced Options --> "Turn on" convert to WebP. Now you need to download the file and click on the compressed blue button. READY! You can also write your email and we will send it to you as a zip file ;)

7 major advantages of using WebP!

👉🏽 You get the best of both worlds. WebP reduces image size while keeping the bright sides of JPEG and PNG. It allows transparency just as PNG! Even more, WebP can also support GIFs.

👉🏽A WebP image weighs 35% less than a JPEG image and almost 50% than a PNG one.

👉🏽Since it supports lossless compression, It accomplishes really high definition and sharpness.

👉🏽You can convert any image format into WebP! Here is a very good converter.

👉🏽And the best of it all, it helps you with the SEO. Not only because it’s specially developed by Google, but because of the perfect balance between quality and size.

👉🏽WebP format makes your website faster and improves your online shop experience.

Why should I use it if I’m an e-commerce owner?

Images occupy more than 60% of a website’s weight and nowadays it’s impossible to imagine a website that takes more than 2 seconds to load. E-commerces are mostly made of images, if they don’t work properly, it could have a negative impact on sales. Besides that, it’s common knowledge that Google really takes into account a page weight when it comes to SEO. You have better chances to be on top when you make sure that your site is as optimized as it can be!

WebP format makes your website faster and it is by far the best format for e-commerce!

illustration for a good quality image online shopping and bad quality

2 things to take into account while using WebP

⚠️While it’s not a brand new format, there are still some browsers that don’t support WebP --> Chrome, Edge, Firefox, and Opera are compatible but Safari and Internet Explorer (of course), aren’t.

⚠️Since WebP is not native in platforms such as Wordpress or Magento, you may need a plugin to use this format in your website. We’ll guide you through it!

How can I use WebP images on my website?

It’s not as tricky as it sounds! It just depends on which platform your are using. Let’s establish some general tips!

  • Wordpress: if your site is developed on Wordpress, you may need a plugin to make sure you can use your WebP images. The one you need is called after the format - WebP express - and it allows you to use your WebP images. Also, using JavaScript allows you to display images in this format only when the user is using a compatible browser. If not, it displays JPEG or  PNGimages.
  • Magento: you also need a Magento plugin to make it work properly. What it accomplishes is that If WebP is detected, the extension will analyze the HTML of the Magento root-block to check that links to images are replaced with WebP images.
  • Shopify: you can use image optimizer in order to integrate WebP images on your webpage!
  • If your site is made by HTML5 or CSS, it can get a little more complicated and you may need technical help…Or not!

By using Piio you can achieve everything at once! This technology reduces your image data transfer up to 95% and increases the delivery of your images more than 10x! Click here for a free trial for your website and test this awesome technology from Piio.

This service will optimize your site according to the device and browser. This means that Piio displays WebP images when supported but also displays PNG or JPEGS when not. Very smart, isn't it? Well, WebP format makes your Website faster and Piio make the job for you.

You save yourself from wasting your bandwidth and you make sure you rank much better on Google. Amazing, right? Feel free to check it out!

In conclusion, should I use WebP on my website?

YES, YES & YES. WebP is not a very famous image format but we must pay attention to it because is designed to create images that at a simple sight you can't distinguish from JPGs (or PNGs). That, in fact, makes your website faster and boost your sales and SEO!

Let us know if you have used the WebP format before, and the impact on your e-commerce ;)

Feel free to comment and contribute to this community!