CONTACT

How to convert WebP images to speed up your website

WebP is an open image format developed by Google in 2010 based on the VP8 video format. Since then, the number of websites and mobile applications using the WebP format has increased dramatically.

Google Chrome and Opera both support the WebP format in a native way, and since these browsers account for about 74% of web traffic, users can access websites more quickly if these sites use WebP images. Recently version 65 of Firefox finally supports the WebP format.

The WebP format supports image compression with and without loss, including animation. Its main advantage over other image formats used on the web is its much smaller file size, which speeds up web page loading and reduces bandwidth usage. The use of WebP images can result in a significant increase in page speed. If your app or website is experiencing performance issues or increased traffic, converting your images can help optimize page performance.

In this tuto, you will use the cwebp command line tool to convert images to WebP format, creating scripts that will convert images into a specific directory.

Finally, you'll also explore two ways to deliver WebP images to your visitors.

Note a rather important point nowadays (Greta Inside), which says saving space and speed to serve says an ecological gesture. Indeed, there is no point in serving crazy images except in specific cases such as photographers for example. And again with this webP image format it remains totally convincing. It's up to you!

Prerequisite

Working with WebP images does not require any special distribution, but we will show you how to work with the appropriate software on Ubuntu 16.04 and CentOS 7. To follow this tuto, you're going to need to:

  • A server configured with a sudo non-root user.
  • Apache installed on your server.
  • mod_rewrite installed on your server.

Installation of cwebp and preparation of the image directory

In this section, we will install software to convert images and create a directory with test images.

On Ubuntu 16.04, you can install cwebp, a utility that compresses images in .webp format, typing:

sudo apt-get update
sudo apt-get install webp

On CentOS 7, type:

sudo yum install libwebp-tools

To create a new directory of images called webp in the Apache web root (located by default in / var / www / html), type:

sudo mkdir / var / www / html / webp

Change the ownership of this directory by your non-root username: "jul" here:

sudo chown jul: / var / www / html / webp

To test the commands, you can download free JPEG and PNG images using wget. This tool is installed by default on Ubuntu 16.04; If you use CentOS 7, you can install it by typing:

sudo yum install wget

Then download the test images using the following commands:

wget -c "https://upload.wikimedia.org/wikipedia/commons/2/24/Junonia_orithya-Thekkady-2016-12-03-001.jpg?download" -O /var/www/html/webp/image1.jpg

wget -c "https://upload.wikimedia.org/wikipedia/commons/5/54/Mycalesis_junonia-Thekkady.jpg" -O /var/www/html/webp/image2.jpg

wget -c "https://cdn.pixabay.com/photo/2017/07/18/15/39/dental-care-2516133_640.png" -O /var/www/html/webp/logo.png

Note: These images are available for use and redistribution under the Creative Commons Attribution-ShareAlike license.

Most of your work in the next step will be found in the directory/var/www/html/webp, in which you can move by typing:

cd/var/www/html/webp

With the test images in place and the Apache web server, mod_rewrite and cwebp installed, you're ready to move on to image conversion.

Testing compression and conversion of images to WebP with CwebP

The dissemination of .webp images to visitors to the site necessarily requires .webp versions of the image files. In this step, you will convert the JPEG and PNG images to .webp format using cwebp. The syntax of the command looks like this:

cwebp image.jpg -o image.webp

Option -o specifies the path to the WebP file.

Since you are still in the directory / var / www / html / webp, you can run the following command to convert image1.jpg into image1.webp and image2.jpg in image2.webp:

cwebp -q 100 image1.jpg -o image1.webp
cwebp -q 100 image2.jpg -o image2.webp

The definition of the quality factor -q to 100 retains 100% of the quality of the image; If it is not specified, the default is 75.

Then inspect the size of the JPEG and WebP images using the ls command- . The option -l will display the long list format, which includes file size, and the -h option will ensure that they print man-readable sizes:

ls -lh image1.jpg image1.webp image2.jpg image2.webp


Output
-rw-r--r-- 1 jul jul 7.4M Jan 18 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 16:46 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 16:59 image2.webp

The ls command shows that the image size1.jpg is 7.4M, while the imagesize1.webp is 3.9M. The same goes for image2.jpg (16M) and image2.webp (7M). These files are almost half their original size!

To record the complete and original data of the images during compression, you can use the -lossless option instead of -q. This is the best option to maintain the quality of PNG images. To convert the uploaded PNG image from Step 1, type:

 cwebp -lossless logo.png -o logo.webp

The following command shows that the loss-free WebP image size (60KB) is about half the size of the original PNG image (116KB):

 ls -lh logo.png logo.webp
Output
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 16:42 logo.webp

The converted WebP images in the directory/var/www/html/webp are about 50% smaller than their JPEG and PNG counterparts. In practice, compression rates may differ depending on factors such as the compression rate of the original image, the file format, the type of conversion (with or without loss), the percentage of quality and your operating system. When you convert more images, you may see changes in conversion rates related to these factors.

Converting JPEG and PNG images into a directory

Simply write a script to simplify the process of converting images to WebP format. We start with the idea of converting a batch of JPG image to 90% quality, while also converting PNG files into WebP images without loss.

So use your favorite editor, for my part it will be VI (the old school) to create a script webp-convert.sh in your home.

 Cd

 viwebp-convert.sh

The first line of your script will be:

find $1 -type f-and-and-( (-iname "-.jpg" -o -iname ".jpeg")

The line includes:

find: This command will search for files in a specified directory.
$1: This positional setting specifies the path of the image directory, extracted from the command line. In the end, this makes the location of the directory less dependent on the location of the script.
-type f: This option tells find to search only for normal files.
-iname: this test compares file names to a specified model. The case-insensitive -iname test tells find to search for any file name ending with .jpg or .jpeg.
-o: this logical operator asks the find command to list the files that correspond to the first test -iname (-iname ".jpg") or the second (-iname ".jpeg").
(): Parentheses around these tests, as well as the operator-and, ensure that the first test (i.e. -type f) is always run.

The second line of the script will convert the images to WebP using the -exec setting. The general syntax of this setting is the command -exec." The string is replaced by each file the command has visited, while the; tells find where the order ends:

find $1 -type f-and-and-( (-iname "-.jpg" -o -iname ".jpeg")

-exec bash -c 'commands'

In this case, the -exec setting will require multiple commands to search for and convert images:

bash: This command will run a small script that will create the .webp version of the file if it doesn't exist. This script will be transmitted to bash as a chain using the -c option.
'commands': This reserved space is the script that will make .webp versions of your files.
The script inside the "commands" will do the following:

Create a webp_path variable.
Test whether the .webp version of the file exists or not.
Create the file if it doesn't exist.
The little script looks like this:

webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>

 If[ ! -f "$webp_path" ]; Then 

cwebp -quiet -q 90 "$0" -o "$webp-path";

 fi;

Elements of this little script include:

webp_path: This variable will be generated using sed and the corresponding file name of the bash command, indicated by the $0 positional setting. A channel here (<) passera ce nom à sed. passera="" ce="" nom="" à=""></) passera ce nom à sed.>
if:[ ! -f "$ webp_path"] This test will determine if a file named "$ webp_path" already exists, using the logical operator not (!).
cwebp: This command will create the file if it doesn't exist, using the -q option to not print the output.

With this little script instead of the reserved space "commands," the full script to convert JPEG images will now look like this:

converting JPEG images
find $1 -type f-and-" (-iname ".jpg" -o -iname ".jpeg"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -q 90 "$0" -o "$webp-path";
fi;' {} ;

To convert PNG images into WebP, we will adopt the same approach, with two differences: First, the iname pattern in the find command will be ".png". Second, the conversion command will use the -lossless option instead of the quality -q option.

The finished script looks like this:

'!/bin/bash'

converting JPEG images
find $1 -type f-and-" (-iname ".jpg" -o -iname ".jpeg"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -q 90 "$0" -o "$webp-path";
fi;' {} ;

Converting PNG images
find $1 -type f-and-iname ".png"
-exec bash -c'
webp_path-$(sed 's/.$/.w[^.]ebp/'< "$0");></ "$0");>
If[ ! -f "$webp_path" ]; Then 
cwebp -quiet -lossless "$0" -o "$webp-path";
fi;' {} ;

Save the file and leave the editor.

Then let's put the script webp-convert.sh into practice using the directory files/var/www/html/webp. Make sure the script file is executable by running the following command:

chmod a-x/webp-convert.sh

Run the script on the images directory:

./webp-convert.sh/var/www/html/webp

Nothing happened! This is because we have already converted these images to step 2. In the future, the webp-convert script will convert images when we add new files or delete .webp versions. To see how this works, delete the .webp files we created in step 2:

rm /var/www/html/webp/.webp

After removing all .webp images, rerun the script to make sure it works:

./webp-convert.sh/var/www/html/webp

The ls command will confirm that the script has correctly converted the images:

ls-lh /var/www/html/webp
Output
-rw-r--r-- 1 jul jul 7.4M Jan 28 09:08 image1.jpg
-rw-r--r-- 1 jul jul 3.9M Jan 18 17:13 image1.webp
-rw-r--r-- 1 jul jul 16M Jan 18 13:21 image2.jpg
-rw-r--r-- 1 jul jul 7.0M Jan 18 17:13 image2.webp
-rw-r--r-- 1 jul jul 116K Jan 18 16:11 logo.png
-rw-r--r-- 1 jul jul 60K Jan 18 17:13 logo.webp

Here's this script will allow you at first such an excalibur level 1 reel to transform/convert your images to WebP format in an automated way.

It is possible to deepen this function, and convert to automatic mode by regularly checking the directory. I wouldn't deal with the subject today but maybe in a time soon.

VOUS SOUHAITEZ ÊTRE ACCOMPAGNÉ DANS VOTRE démarche marketing digital ?
N'hésitez pas à nous contacter dès à présent !
Julien GAUTHIER
Créateur de solution sur-mesure sur La Baule. J'accompagne les entreprises de toutes tailles dans leur stratégie d'acquisition et de visibilité sur le web.

A PARTAGER

Diversifier vos contenus pour votre site internet, et si vous pensiez au podcast ?

Lire la suite de l'article ?

Etat des lieux du marketing digital

Lire la suite de l'article ?

WordPress 5.7 : Les changements techniques à venir en mars

Lire la suite de l'article ?

Top 5 des meilleures solutions d'emailing du marché

Lire la suite de l'article ?

Pourquoi refaire son site internet ?

Lire la suite de l'article ?

Gagnez en visibilité grâce à la rédaction de contenus pour le web

Lire la suite de l'article ?

Comment optimiser son site Internet ?

Lire la suite de l'article ?

Référencement naturel ou référencement payant : lequel choisir ?

Lire la suite de l'article ?

Aides financières pour le numérique pour votre entreprise ?

Lire la suite de l'article ?

Tous les smileys, emoji, émoticône pour vos articles "à copier coller"

Lire la suite de l'article ?

Expert SEO : Compétences et techniques de référencement

Lire la suite de l'article ?

Ranker sur Google : Astuces d’Experts

Lire la suite de l'article ?

Les meilleures applications pour gérer ses réseaux sociaux en 2021

Lire la suite de l'article ?

L’Impact du Nom de Domaine d’un Site Web sur le Référencement

Lire la suite de l'article ?

5 étapes pour bien référencer son site sur Internet

Lire la suite de l'article ?

Botnet KashmirBlack cible les CMS WordPress, Joomla, Drupal, etc.

Lire la suite de l'article ?

Quel tarif pour un site web ecommerce ?

Lire la suite de l'article ?

Comment être mieux référencé sur sa boutique ecommerce ?

Lire la suite de l'article ?

Bien rédiger un article de blog

Lire la suite de l'article ?

Créer un lien facilement pour permettre aux clients de rédiger des avis

Lire la suite de l'article ?

Changer nom de domaine WordPress les requêtes SQL

Lire la suite de l'article ?

Créer un logo gratuit : Les 3 meilleurs générateurs de logo

Lire la suite de l'article ?

Créer un persona gratuitement

Lire la suite de l'article ?

Comment fonctionne Google AdWords ?

Lire la suite de l'article ?

Cache WordPress - Les secrets d'un site rapide

Lire la suite de l'article ?

Comment créer une page web ?

Lire la suite de l'article ?

Chèque numérique pour un commerce connecté

Lire la suite de l'article ?

20 Styles of animated borders in CSS for a modern site

Lire la suite de l'article ?

How to convert WebP images to speed up your website

Lire la suite de l'article ?

Comment convertir des images WebP pour accélérer votre site Web

Lire la suite de l'article ?

CSS animated button and checkbox for a modern design

Lire la suite de l'article ?

Bouton animé CSS et checkbox pour un design moderne

Lire la suite de l'article ?

Prestashop : Faille de sécurité critique dans les modules

Lire la suite de l'article ?

8 CSS HTML5 JS carousels for modern website

Lire la suite de l'article ?

8 carrousels en CSS HTML5 JS pour site web moderne

Lire la suite de l'article ?

Zoom sur la version WordPress 5.3 "Kirk"

Lire la suite de l'article ?

Pourquoi la vitesse de votre site web est importante ?

Lire la suite de l'article ?

Les questions les plus fréquentes sur WordPress

Lire la suite de l'article ?

Top 5 outils SVG gratuit pour le graphisme et le design

Lire la suite de l'article ?

Les questions les plus fréquentes sur Prestashop

Lire la suite de l'article ?

Tout savoir sur PrestaShop

Lire la suite de l'article ?

Comment rendre son site Web éco-responsable ?

Lire la suite de l'article ?

Zoom sur la version 5.2 de WordPress

Lire la suite de l'article ?

Combien coûte la création d’un site internet ? Prix d'un site internet

Lire la suite de l'article ?

Entreprise : pourquoi créer un site web ?

Lire la suite de l'article ?

20 Styles de bordures animées en CSS pour un site moderne

Lire la suite de l'article ?

Qu'est-ce que le développement informatique ?

Lire la suite de l'article ?

.dev, un nouveau TLD pour les développeurs

Lire la suite de l'article ?

C'est quoi l'autorité de domaine ?

Lire la suite de l'article ?

Comment évaluer l'efficacité d'un site web ?

Lire la suite de l'article ?

Inbound Marketing, Boostez votre chiffre d'affaires

Lire la suite de l'article ?

Pages Jaunes Solocal VS agence de référencement

Lire la suite de l'article ?

Quelle est la recette d'un bon site Internet ?

Lire la suite de l'article ?

Quelles sont les méthodes de travail d'un développeur web ?

Lire la suite de l'article ?

Quel CMS choisir en fonction de mon site ?

Lire la suite de l'article ?

Les tendances du développement web

Lire la suite de l'article ?

La planification : une maitrise à ne pas négliger

Lire la suite de l'article ?

Les 15 termes du développement web à connaître

Lire la suite de l'article ?

Quelles sont les étapes d'une refonte d'un site web ?

Lire la suite de l'article ?

Le coût d'un retour en arrière.

Lire la suite de l'article ?

Comment définir une stratégie digitale efficace ?

Lire la suite de l'article ?

Qu'est-ce que la stratégie digitale ?

Lire la suite de l'article ?

Pourquoi avoir un site responsive web design et mobile compliant ?

Lire la suite de l'article ?

Pourquoi avoir un site sécurisé HTTPS SSL ?

Lire la suite de l'article ?

Quelles sont les étapes de création d'un site internet ?

Lire la suite de l'article ?

Les avantages de faire appel à une agence Web Marketing

Lire la suite de l'article ?

Indexation ! Optimiser son site e-commerce mobile first?

Lire la suite de l'article ?

Les nouvelles tendances du SEO en 2018

Lire la suite de l'article ?

Mais pourquoi mes emails arrivent en SPAM ?

Lire la suite de l'article ?

Pourquoi intégrer la vidéo à sa stratégie marketing ?

Lire la suite de l'article ?

8 raisons d'incorporer INSTAGRAM à sa stratégie

Lire la suite de l'article ?

Pub Digital Media : Forte croissance du search et des réseaux sociaux

Lire la suite de l'article ?
Newsletter
Chaque mois, 
1 email, 3 articles. 
Gratuit pour toujours.
Prêt pour parler de votre projet ? Contactez-nous
menuchevron-down