Superia Commerce
Blog

Keep up to date with what's going on at Superia

We're always doing something new, we will try and keep the blog up to date so you can follow the journey with us..

Speed up your website with WebP

Everybody wants their website to be faster, but how can we do that without cutting down on your content, well one way is to use WebP!

By converting your image type to WebP, it could improve your site load speed by up to 34%.

What is WebP?

WebP is an image format that employs both lossless and lossy compression for images on the web. Developers use WebP as they can create smaller, richer images that can improve the speed of a web page. What are lossless and lossy images you may ask?

WebP lossless images are up to 26% smaller in size in comparison to PNGs.

WebP lossy images being between 25-34% smaller than comparable JPEG images at equivalent Structural Similarity (SSIM) quality.

Why should we use WebP?

The purpose of the WebP image format is to optimize web-page load speed in a way that PNG and JPEG images can’t. But, why should we use it?

Image files take up web space, no matter how they are saved. The more images that you add to your website, means you have a greater chance of a slow performance. Keeping the load speed of your page fast is important as slow speeds will drive visitors away before they’ve even seen what you have to offer.

Both lossless and lossy WebP image types support transparency, and we all know that these days great web design calls for transparent images, especially if they are stacked. JPEGs do not offer transparency as a feature, but lossy WebP images do.   

Sounds great right? Not everyone thinks so… Compressing image files makes them smaller and more efficient but it can sometimes come at a loss of image quality. The desire for a tiny file can make the image look so terrible that it would no longer be recognisable, the trick is to compress it enough to obtain a smaller file size without compromising on visual quality.

The following example is a screenshot of a JPG image alongside a WebP image, can you tell which is which?

JPG to WebP comparison

Well the WebP image is the one on the right, the JPG in question was 62kb and the WebP image was 33kb which is 53% smaller!

The 53% reduction is size is fantastic, and I personally can't tell the difference, you might not always be able to get this amount of reduction, but it's just an example of what could happen.

The reason the above example was just a screenshot is due to the fact that at this moment in time WebP is not support by all browsers. Although more and more browsers are being added to support the format.

The web browsers that don’t currently support WebP images are:

  • Safari – mobile and desktop
  • Internet Explorer – desktop
  • Firefox for Android – mobile
  • UC Browser for Android – mobile

The good news? you can simply include backup PNG and/or JPEG that will display to visitors using a browser that does not support WebP images, meaning everyone can still see your content.

Overall, WebP images are a useful and efficient way of speeding up your web page (providing you use a browser that supports it). It is also beneficial to the appearance of your site with the use of transparent lossy WebP images that JPEGs do not offer.

How to use WebP images in Superia  

Superia has built in the ability to create WebP copies of images in the file manager of the system, by default when you upload a JPG, PNG, GIF or BMP to the file manager it will create a WebP version of the image, however you can also create a WebP version manually or remove the WebP version if you really don’t want it.

To manually create (or remove) a WebP version of an image in the file manager, navigate to Content > File Manager and select the image you want, now click the resize icon next to the image . When the resize option window appears you will see a checkbox option to create a WebP copy of the image, if you tick this and then press resize it will create a WebP copy and place a flag next to the image to say that a WebP copy exists. If you no longer want it then just undo the process by unticking the WebP copy checkbox.

Resize Window

Main product images that are shown in thumbnails in places like the product categories pages and the product panels (Featured Products, Relates Products, etc) will use the WebP version of the image automatically (if you have chosen to have a WebP copy in the file manager for that image). At the moment other features on the site such as slideshows, or logos are not set up to use WebP by default and will need further development to the system to be able to use this image type in these places, but we are trying to update everything so that all of your images will be able to support the WebP version.

Currently if you want to use WebP images in your custom HTML you will manually have to do this by updating the source code, we know for most of you that this is an advanced process that you probably wouldn’t want to do, but if you want to do this yourself or if you’d like us to help you do it then contact us for more infomration.


0 Comments



Post a Comment


Login

Please log in to your account to post a comment
Or

Guest

Enter your name and email address to make a post
Username:
Email:
Your email address will not be publicly displayed
Comment:

Superia Commerce
Blog

Keep up to date with what's going on at Superia

We're always doing something new, we will try and keep the blog up to date so you can follow the journey with us..

Speed up your website with WebP

Everybody wants their website to be faster, but how can we do that without cutting down on your content, well one way is to use WebP!

By converting your image type to WebP, it could improve your site load speed by up to 34%.

What is WebP?

WebP is an image format that employs both lossless and lossy compression for images on the web. Developers use WebP as they can create smaller, richer images that can improve the speed of a web page. What are lossless and lossy images you may ask?

WebP lossless images are up to 26% smaller in size in comparison to PNGs.

WebP lossy images being between 25-34% smaller than comparable JPEG images at equivalent Structural Similarity (SSIM) quality.

Why should we use WebP?

The purpose of the WebP image format is to optimize web-page load speed in a way that PNG and JPEG images can’t. But, why should we use it?

Image files take up web space, no matter how they are saved. The more images that you add to your website, means you have a greater chance of a slow performance. Keeping the load speed of your page fast is important as slow speeds will drive visitors away before they’ve even seen what you have to offer.

Both lossless and lossy WebP image types support transparency, and we all know that these days great web design calls for transparent images, especially if they are stacked. JPEGs do not offer transparency as a feature, but lossy WebP images do.   

Sounds great right? Not everyone thinks so… Compressing image files makes them smaller and more efficient but it can sometimes come at a loss of image quality. The desire for a tiny file can make the image look so terrible that it would no longer be recognisable, the trick is to compress it enough to obtain a smaller file size without compromising on visual quality.

The following example is a screenshot of a JPG image alongside a WebP image, can you tell which is which?

JPG to WebP comparison

Well the WebP image is the one on the right, the JPG in question was 62kb and the WebP image was 33kb which is 53% smaller!

The 53% reduction is size is fantastic, and I personally can't tell the difference, you might not always be able to get this amount of reduction, but it's just an example of what could happen.

The reason the above example was just a screenshot is due to the fact that at this moment in time WebP is not support by all browsers. Although more and more browsers are being added to support the format.

The web browsers that don’t currently support WebP images are:

  • Safari – mobile and desktop
  • Internet Explorer – desktop
  • Firefox for Android – mobile
  • UC Browser for Android – mobile

The good news? you can simply include backup PNG and/or JPEG that will display to visitors using a browser that does not support WebP images, meaning everyone can still see your content.

Overall, WebP images are a useful and efficient way of speeding up your web page (providing you use a browser that supports it). It is also beneficial to the appearance of your site with the use of transparent lossy WebP images that JPEGs do not offer.

How to use WebP images in Superia  

Superia has built in the ability to create WebP copies of images in the file manager of the system, by default when you upload a JPG, PNG, GIF or BMP to the file manager it will create a WebP version of the image, however you can also create a WebP version manually or remove the WebP version if you really don’t want it.

To manually create (or remove) a WebP version of an image in the file manager, navigate to Content > File Manager and select the image you want, now click the resize icon next to the image . When the resize option window appears you will see a checkbox option to create a WebP copy of the image, if you tick this and then press resize it will create a WebP copy and place a flag next to the image to say that a WebP copy exists. If you no longer want it then just undo the process by unticking the WebP copy checkbox.

Resize Window

Main product images that are shown in thumbnails in places like the product categories pages and the product panels (Featured Products, Relates Products, etc) will use the WebP version of the image automatically (if you have chosen to have a WebP copy in the file manager for that image). At the moment other features on the site such as slideshows, or logos are not set up to use WebP by default and will need further development to the system to be able to use this image type in these places, but we are trying to update everything so that all of your images will be able to support the WebP version.

Currently if you want to use WebP images in your custom HTML you will manually have to do this by updating the source code, we know for most of you that this is an advanced process that you probably wouldn’t want to do, but if you want to do this yourself or if you’d like us to help you do it then contact us for more infomration.


0 Comments



Post a Comment


Login

Please log in to your account to post a comment
Or

Guest

Enter your name and email address to make a post
Username:
Email:
Your email address will not be publicly displayed
Comment: