QloApps WebP Image Converter | Improve your Website Performance

QloApps WebP Image Converter is an add-on for QloApps that will convert your website images to WebP to increase your website load speed.

WebP is an image format that was rolled out by Google. It has a better size reduction while retaining the best quality than the JPG and PNG formats. Using WebP images makes your website attractive and boosts your website’s speed as well.

According to Google, WebP lossless images are 26% smaller than PNGs, and WebP lossy images are 25-34% smaller than JPEG images.
Lossless WebP compression applies already-seen image fragments to exactly reconstruct new pixels. It can also use a local palette if it finds no interesting match.

To know more about compression techniques, read WebP Compression Techniques in Detail.

  • Convert various types of image formats into WebP format.
  • It helps to reduce the size of an image.
  • View the conversion process of images on the configuration page.
  • A button to generate the remaining images becomes available on the configuration page in case the converter fails to convert some of the images.
  • Convert images of the product.
  • Select category images to convert WebP format.
  • Convert the images of the manufacturer.
  • Choose to convert the image of the supplier in WebP format.
  • Convert store images into WebP format.
  • It helps to reduce page size & thus loading time.

The installation of any module is very simple in QloApps.

  • Go to the Module and Services tab
  • Click on Add New Module

Screenshot of QloApps backoffice showing how to install QloApps Social Live Chat

  • Now upload the Zip file of the Module and click on Install

Now, You Have Installed The Module. So Let Us Check The Module Configuration.

For the functioning of the module, you have to download a  Cwebp binary for your operating system from the link given in the module and then upload the downloaded file in the field provided.

In this section, you can convert your images into WebP images and display them on the website.

In QloApps we have two types of images: Core Images and Module Images.

Images that belong to QloApps core files like room-type images, etc are called Core images.
Images that belong to the module of QloApps such as interior block module images etc are called module images.

You can convert the images of the Core and Modules into WebP images by below-mentioned steps:

  1. Configure the converter details.
  2. Select the images that you want to convert by checking the boxes.
  3. Select yes in each image that you want to display in the front.
generate image settings

In the ‘converter options’, there are multiple advanced options that can be used for better conversion of images.

Converters: Select the conversion methods to use. cwebp is already provided with the module. To use other converters, Install them on your server first.

Note: To eliminate the load of image conversion on your local server, choose one of the two cloud-based WebP conversion services (ewww converter or wpc converter).
ewww is a paid cloud-based webp conversion service provider and wpc converter is a free cloud converter.

Wpc converter will allow you to convert your images in WebP format for free on the cloud. There will be no possibility of license expiration, stolen, or abuse. This cloud converter service will be in your complete control.

Note: You have to set up your own Webp converter cloud server for using WPC.

You can set up your own WebP converter cloud server by installing the WebP converter cloud server library from here. To install this library, first call the following command :

composer require rosell-dk/webp-convert-cloud-service

Now, add the following script to call the library

<?php
require 'vendor/autoload.php';

use \WebPConvertCloudService\WebPConvertCloudService;

$options = [
    // Set dir for storing converted images temporarily
    // Make sure to create that dir, with permissions for web server to write.
    // You can __DIR__ to get same dir as this script, or "dirname(__DIR__)" to get parent dir of the script,
    'destination-dir' => dirname(__DIR__) . '/conversions',

    // Set acccess restrictions
    'access' => [
        'whitelist' => [
            [
                'ip' => '*',
                'api-key' => 'my dog is white',
                'require-api-key-to-be-crypted-in-transfer' => false
            ]
        ]
    ],

    // Optionally set webp-convert options
    'webp-convert' => [
        'converters' => ['cwebp', 'gd', 'imagick'],
        'converter-options' => [
            'cwebp' => [
                'try-common-system-paths' => true,
                'try-supplied-binary-for-os' => true,
                'use-nice' => true
            ]
        ]
    ]
];

$wpc = new WebPConvertCloudService();
$wpc->handleRequest($options);
?>

Once you have installed this library, now you have to enter the following details of WPC in QloApps:

  • WPC API Url: Enter the URL of your own WebP conversion cloud service setup.
  • WPC API version: The current version of this cloud service is two. Therefore, mention 2 in this option.
  • WPC API keys: enter API keys from the library script.
WPC details

Converter Shuffle: If this option is enabled, the conversion of the image is faster as the conversion takes place with whichever converter is found first on the server.

Encoding: There are 3 types of encoding available with the module.

  • Lossy: Lossy compression method removes the unnoticeable data.
  • Lossless: Lossless compression helps to keep the unnoticeable data.
  • Auto: It will automatically select one of the encoding type from lossy & lossless.

Other advanced converter options are

  • Automatic Filter: It enhances the quality of the image.
  • Methods: Select ‘6’ to get the best image quality & fast conversion.
Configure converter options

The module also allows you to configure the converter options specifically for JPEG & PNG images.

JPEG Converter Options

JPEG specific converter options

PNG Converter Options

PNG specific converter options

This was all from the QloApps WebP Image Converter. I hope I was able to clarify the functioning of the module to you.

If you want to learn about the functionality of QloApps then you can visit this link: QLO Reservation System – Free Open-Source Hotel Booking & Reservation System

In case of any query, issue, or requirement please feel free to raise it on QloApps Forum

Lastly, do not forget to drop your thoughts in the comments.

Category(s) QloApps Google WebP
. . .

Comment

Add Your Comment


Be the first to comment.

Start a Project




    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home
    Table of ContentHide Index