WebP Image Format- OpenCart Performance Optimization

An Insight

Well, let me start off by laying the idea and the benefits of image compression.

We must have come across the websites that are dull and some websites that are extremely fascinating in terms of UI and the images/ videos.

It's obvious that websites that do not consist of images and videos are more likely to load faster than websites that include more images and videos.

Therefore, business entrepreneurs must strive to develop websites, mostly for the reason that their customers do not have to sit there and wait for the website to load.

This definitely doesn't mean that there shouldn't be any images or videos in there!

The Solution: WebP Image Format

Indeed! WebP is the solution!

WebP, which is introduced by Google, integrates the Lossy and Lossless Compression technique. One can implement this on multiple types of images which are graphical, photographic, and translucent.

If one compares WebP's image compression ability to JPEG and JPEG 2000, it compresses the images 30% more efficiently; keeping the image quality intact.

Also, WebP images are likely to be 26% smaller to those PNG images.

Owing to this one can surely enhance their website's performance by incorporating the WebP images within their websites.

WebP Container

A WebP container (RIFF container for WebP) Image Format supports features that have resemblance with other image formats.

These include-

Lossless Compression: Image Compression scenario that uses the Webp format.
Lossy Compression: Lossy compression implements the VP8 key frame encoding.
Transparency: Image transparency, using the 8-bit alpha channel, especially for graphical images.
Animation: Use multiple frames with pauses, to deliver image animation.
Metadata: A metadata for an image in EXIF or XMP formats.
Color Profile: Embedding an ICC profile in an image.

Website Performance Optimising Techniques

Let me explain a very common scenario that we face in our day to day lives.

For instance, you wish to purchase bluetooth earphones online. For that, you will open up your browser and access a website, suppose xyz.com.

As a website visitor, you would expect that the website is speedy and does not make you wait and hinder your purchase.

What if you have to wait for the website to load and page navigation is extremely slow? Would you continue to purchase or switch to another option?

The answer is No!

As a website owner we should know that visitors are extremely impatient and don't like it if the website doesn't load instantly.

One way out for a better performing website is the integration of image compression techniques, i.e. the Lossy and the Lossless Compression.

Lossless Compression:

The lossless compression simply reduces the size of the image files without any data loss.
The size compression is comparatively less or almost that of the original size of the image file.

Lossy Compression:

In the case of Lossy compression, only a part of the data is lost during the encoding process.
This in turn generates an image file size that is comparatively lesser and the quality of the image file may not be as better.

lossless-lossy-comparison-2

Action Principle: WebP

WebP uses lossless or lossy techniques for image compression. Let us see what role each plays in detail.

Lossy Compression

WebP lossy compression implements the "pixel-prediction" scenario. This procedure evaluates a pixel's adjacent pixel and counts the differences and predicts the initial pixel. This is known a predictive coding.

Further, the compression takes place through a process known as DCT or Discrete Cosine Transform, which actually transforms data to residual zeros. Thereafter, these it eliminates these zeros. The VT8 video codec (or WebM), also implements this predictive technology for images.

It will be beneficial to mention the additional constituents of WebP lossy compression like prediction modes, macro blocking.

Lossless Compression

WebP lossless compression compresses images using a various methods. Some of them are given below-

Color Transformation: De-correlates the R, G, and B values of each pixel.
Spatial Transformation: Correlates the neighboring pixels and minimizes the entropy.
Color Indexing Transformation: Identifies the number of ARGB values to check if these values under a certain threshold. This creates an array for those ARGB values and replaces the pixel with a relevant index.
Color Cache Coding: It redevelops the new pixels from the previously seen image parts.
Green Subtraction Transformation: This process deducts the green values from the R and B values of each separate pixel.

When the image transformation through the above techniques is achieved, WebP achieves the entropy coding that integrates the variation of LZ77 Huffman Coding known as LZ77 Backward Reference.

Browsers Supporting WebP

Meanwhile, for a better site performance, one can use optimized WebP images and use a WebP alternative to optimize the current images; and use them on browsers that aid WebP.

WebP: Lossy Support

Google Chrome for Android 25+
Google Chrome (desktop) 17+
Firefox 65+
Opera 11.10+
Microsoft Edge 18+
Native Web Browser, Android 4.0+ (ICS)

For WebP: Animation

Microsoft Edge 18+
Google Chrome (desktop & Android) 32+
Opera 19+
Firefox 65+

For WebP: Lossy, & Alpha Support

Google Chrome for Android version 25+
Google Chrome (desktop) 23+
Microsoft Edge 18+
Opera 12.10+
Native web browser, Android 4.2+ (JB-MR1)
Pale Moon 26+
Firefox 65+

Image Optimization in OpenCart

WebP is being used as one of the eminent part of the e-commerce platforms such as OpenCart.

OpenCart, by default, integrates the image compression feature. It delivers compressed images on saving the product and these images are saved in the cache.

Also, one can convert images by allowing the WebP image format conversions.

Opencart-Cache-image-optimization

This converts the images to the .webp format and one can display these images on the Opencart frontend.

opencart-webp-example

Fallback Images

Not all the browsers support WebP format. Therefore to avoid image loss, one can use the Fallback images.

Fallback images are back up images of the main image. In such a scenario, the site manager can employ JPG or PNG images for back up purposes.

Moving on, there are a variety of methods that help you find out the WebP images. This includes usage of Javascript and server-side techniques such as the htaccess.

The most appropriate way is to implement the <picture> tag for your website images and for best browser support.

An example of a picture tag markup is given below-

In the above given piece of code-

Web browsers that support WebP (Chrome, Edge, Firefox, Safari, etc.) displays the "image.webp" <source> element.
Browsers with older versions and that do not support WebP will Fallback to "image.jpg" <source> element.
The <picture> tag (Internet Explorer) will fallback to the <img> tag for browsers that do not support it (<picture> tag).

Accelerating the Website's Performance: WebP Images

As per the ongoing online trends, customers tend to visit websites that have an attractive UI. For this reason, online websites focus on integrating images and videos to drive more customer traffic.

Adding more images and videos may hinder the websites performance and so it is essential to optimize the images being used in a website.

The WebP image format, is thus the need of the hour, as most browsers support it and these images occupy a comparatively smaller size on a webpage while maintaining the image quality.

Can I Use..

Hence, WebP is what you need next if you want your website to load real quick without degrading the integrity of the images!

Real-Time Examples of Websites using WebP Image Format

WebP has become an integral part of the E-Commerce industry to improvise performance and for speed optimization. One such example we have for you is of eBay.com.

Not only eBay, but even YouTube also implements the WebP thumbnail images. This way it saves more space, thus decreasing the page buffer time span.

ebay_webp

That’s all for the WebP Image Format-OpenCart Performance Optimization. If you still face any issue, feel free to add a ticket and let us know your views to make the module better at webkul.uvdesk.com.