Read now

Webkul has been rewarded with Top Selling Extension 2017 award at Magento Imagine 2018

Read more

WebP Image Format – Magento 2 Speed Performance

Webp is a modern image format for websites, Google developed it on 30 September 2010. WebP provides lossless and lossy compression of images for the websites. Using the WebP format the web designer/developer can create the small size of images that makes the website faster and smooth.

WebP image size is 26% smaller than PNG images. WebP lossy images are 25 to 34% smaller in size than JPEG images.

This image format supports Google Chrome, Firefox, Edge, and Opera browser. This file format is also supported by graphic editors such as Adobe Photoshop, Gimp, Image Magick, and IrfanView.

There are mainly two types of image compression techniques to optimize the images namely:

  • Lossless Compression – This format restores the large size files to its original form without the loss of any data.
  • Lossy Compression – In this format, the large size files are restored to its original form with the loss of some data that is not noticeable.

Lossless compression does not compromise with the quality of the images whereas in lossy compression some data of the image get lost which is an irreversible process.

webp-format

WebP supports both the file formats along with transparency and animation for the better optimization of images.

Lossy WebP Compression uses a predictive coding method for image compression while Lossless WebP uses already seen image fragments to recreate new images of smaller size.

WebP consider certain pixel adjacent pixel and then counts the difference as it predicts what the first pixel looks like (known as predictive coding).

WebP

WebP uses a mixture of Lossy and Lossless compression formats to optimize the images in a better form. It reduces the size of the images to increase the speed of the website and make it faster.

WebP includes the lightweight encoding and decoding library libwebp and the command line tools cwebp and dwebp for converting images to from the WebP format. This image format also allows the image to load faster on the webpages similar to the content on that page.

Lossless images take less storage space and bandwidth to load. This will increase your website performance and make it fast. Using this technique one can recover the exact original data from the compressed files.

This compression technique is very useful for the application that cannot tolerate any difference between original and reconstructed data. Using Lossless compression you can save between 5 to 20% of the original file save.

high-performance

So, in this format, the image quality is not compromised for reducing the size of it. The image formats that use Lossless compress are PNG, GIF, and BMP.

The images which are compressed by using lossy format may experience a minor reduction in quality. A major reduction in the size of the images. The less size of images makes reduces the loading time of the web pages.

This makes the website smooth and faster. The reduction of quality is negligible. This means it is minor enough that it is not noticeable by customers. The most common use of file format for lossy compression is.JPG.

For higher quality results of compression select image of JPG quality 8 or above. This means, the higher the number on compression quality the better image you will get.

Images play a very major for the online stores as they make your e-commerce store eye-catching and attractive. According to research human minds interpret images much easier than text. Images give depth and context to any description, story, or content.

Hence, the major part of the websites consists of these images that make image optimization an important part of any website to increase performance and speed.

test

A good product image leaves a good impression on the customer and the chances for the sales of that product also increases by it. Blurry image, inconsistent, and small image can lose the sales potential of the product.

Choose a simple background for the images so that images get highlighted to the customers. The image should be bigger and clear that helps the customer for better visualization of the products.

Use more and more images to show every aspect of the product to the customers. Hence, this helps the site owner to sell more products by using images.

To test the use of images on any website you can visit the link – https://www.webpagetest.org/

Image compression is a very important part of every online store. As it minimizes the size of the image files without reducing much of its quality. This will speed up the backups.

The compressed files transfer much faster over the internet and take less bandwidth. These compressed images reduce the weight of the websites and provide a better user experience.

loading

The lesser the weight of the website the faster it will load. WebP is the best image format for converting a large image size into a less size with a quality compression.

Use the following commands to convert any image to WebP.

Windows:

> for /R . %I in (*.jpg) do ( cwebp.exe %I -o %~fnI.webp )

Linux / Mac:

$ for F in *.jpg; do cwebp $F -o `basename ${F%.jpg}`.webp; done

There are so many ways for optimizing the image as :

  • Name the images in plain language
  • Use of alt attributes.
  • Image dimension
  • Size of image
  • Use of correct file type.
  • Optimize thumbnail
  • Image sitemaps.

This shows that the use of the right file type and size of the image plays a major role in image optimization. Hence, WebP is suitable for both of the features that make it the best image format for image optimization.

webp

One of the simplest ways to optimize the image is to compress them before uploading them to the platform. You can also optimize the image and increase the performance of your Magento based website by using the Store Optimization Extension for Magento 2.

Magento provides product cache images as its default feature. Magento creates cache images basically at the category and product pages that loads at the frontend. Generally, product images are cached while saving the product.

cache images

However, the Magento resize command enables you to resize all images for display on your storefront. After resizing an image, its resized copy is stored in the cache (/pub/media/catalog/product/cache directory). Magento serves storefront images from the cache.

The command for image resize – php <magento install dir>/bin/magento catalog:images:resize

Fallback images are images that can be used as a backup for the main image. These images are very important for the website as there are some browsers that do not support WebP format.

In this case, the webmaster can use the original JPG, PNG images for the backup. There are so many ways to detect WebP image support using Javascript and server-side techniques.

But the best way is to use <picture> tag for your website images. It is the best tag to use that provides the best browser support.

<picture>
<source srcset=”image.webp” type=”image/webp”>
<source srcset=”image.jpg” type=”image/jpeg”>
<img src=”image.jpg”>
</picture>

Using WebP in HTML code is the easiest way to make this image format compatible with every single browser.

The reason for this is that the browser that does not support the <picture> tag will display whatever source is specified in <img> tag.

Note – WebP is not compatible with iOS as Firefox for iOS works on Safari’s WebKit engine.

WebP is widely accepted by the e-commerce industry. Also, most of the famous e-commerce stores are using WebP images to make their websites smooth and faster (performance-wise).

Amazon and eBay are some of those marketplace web stores that are using WebP format. As WebP uses a more aggressive and better compression algorithm than PNG and JPEG.

WebP on eBay

Another advance of using WebP is that it supports 24-bit RGB color and 8-bit alpha channel as compared to GIF (8-bit color and 1-bit alpha channel).

Animated GIFs converted to lossy WebP is64% smaller, while lossless is 19% smaller. This is especially important on mobile networks.

YouTube found that switching to WebP thumbnail images saves space and decrease the page loading time to make it faster.

Disclaimer – Please note all the images and content belong to their respective copyright owners. The Magento and Webkul module’s features are subject to change without any prior notice. For details, please mail support@webkul.com

Comment

Add Your Comment

Be the first to comment.

Need Any Help?

Got Stuck with something serious or you wish to hire us for a while. We are here to hear from you, feel free to reach us and we'll get back to you as soon as possible.

Contact Us
css.php
Hire Us!
Brief us about your requirements and we'll get back to you.
Woo! Hooy!
We have just recieved your project brief and our expert will contact you shortly.
Send Again
Close