Explaining the WebP format for images and using them to improve the performance of your WordPress site

Images are one of the basic elements used by all websites, and therefore improving them is a priority for website owners in order to speed up the website and make the user experience better. This is because the optimized image is almost of the same quality as the original image, but in a much smaller size, and therefore it does not require as much time to load as it takes to upload an unoptimized image. One of the steps that you must take to improve your site's images is to become familiar with the formats that enable you to do this, and to know how to use them. For this reason, we will explain to you here the relatively new WebP image format, which was created specifically to help reduce the size of images while maintaining their quality. We will also tell you when you should rely on this format, and how to use it in WordPress. WebP image format WebP is an image format developed and released by Google in 2010 in order to allow website owners to speed up their site pages by compressing images while maintaining their quality, as images constitute about 60%-65% of the size of a web page, and compressing them will reduce page loading time, save bandwidth, and preserve battery life, especially on smartphones.

The WebP format has been improved over time, and is now capable of providing images that are approximately 30% smaller on average than PNG and JPEG with the same visual quality. That is, if you have a PNG image with a size of 100 KB, you can reduce its size to 70 KB on average - while maintaining its high quality - by converting it to the WebP format. Although this format is not supported in all web browsers, most popular browsers now support it, including Google Chrome, Firefox, Opera, and Microsoft Edge, which means that you do not have to worry about your site images not appearing to visitors if you use it, because the vast majority of visits come through these browsers, and WebP is supported in Android as well.

How are images compressed?

The phrase (compressing images) refers to reducing their size, and there are two basic techniques that provide the ability to do this, which are lossy compression and lossless compression. There are many differences between these two compression methods, the most important of which are explained in the following table: Table showing the most important differences between the two compression methods. We will not explain here the mechanism that is used for compression in either of the two techniques, nor will we explain how the WebP format works, because that is complex and there is no need to know it, but we will suffice with pointing out that WebP supports both types of compression, and WebP images compressed with lossless compression are about 26% smaller than PNG images of the same quality, while images compressed with lossy compression are about 34% smaller than JPEG images (the proportions here are average). Note: PNG uses lossless compression, while JPEG usually uses lossy compression, although images can be losslessly compressed in JPEG.

Features and benefits of the WebP format, in addition to supporting the

WebP, both types of compression used in PNG and JPEG, has many other features that make it able to provide many important benefits when used on a website. For example, this format also supports multi-level transparency and animation, two features that you do not usually find in the image format itself. PNG supports multi-level transparency but does not support animation, and GIF supports animation but does not support multi-level transparency. Note: The GIF format supports transparency and animation, but it does not support multi-level transparency, which means that you cannot gradually make the edges of shapes transparent so that you determine the transparency of each pixel. In short, part of the image in PNG and WebP formats can be transparent, opaque, or something in between (semi-transparent for example), while part of the image in GIF format is either transparent or colored, and it cannot be semi-transparent. These and other features of the WebP format make it able to provide many benefits when used on a website, the most important of which are: increasing the site’s performance, as the relatively small size of WebP images will reduce the time required to load web pages, and increase the speed of the website in general.

Saving bandwidth. This is another benefit that comes thanks to the small size of WebP image files, and is noticeable on sites that include a lot of images. Increase the ranking of site pages in search results, as low loading times will make search engines prefer your pages over slow site pages when displaying search results. It allows you to dispense with other image formats, as with WebP you can display animated images with the same capabilities as GIF, with transparent backgrounds like PNG, and with better compression than JPEG.

Disadvantages of the WebP format: Although the WebP format is powerful and has many advantages and many benefits, it suffers from some disadvantages, the most important of which are: Not all web browsers support the WebP format, and therefore if you use this format, the images of your site pages may not appear to some visitors, especially those who use old versions of browsers. Viewing animated WebP images requires more central processing power than animated GIFs. Decrypting a lossy WebP image takes about 2.2 times as long as decoding a lossy GIF with the same information, and decoding a lossless WebP image takes about 1.5 times as long as decoding a GIF with the same information. Not many image editors support WebP image modifications, while other older formats like PNG are well supported in almost all image editors.

It should be noted that there was an important drawback for WebP related to WordPress, as the format was not fully supported in the system, but this defect was recently erased when version 5.8 of WordPress was released in July of 2021, as this format became supported in WordPress without the need to install additional components or insert additional code into the system. When should I use WebP images in WordPress? Given the advantages of the WebP format and the benefits it offers to site owners and visitors, and taking into account the disadvantages that it suffers from, we can say that you should adopt this format in WordPress by default now that it is supported in the system as well as JPG and PNG formats, unless there is a logical and strong reason that prevents you from adopting the format on your site.

There are two main reasons that could prevent you from using the WebP format on your WordPress site: A large number of visitors to your website use browsers that do not support this format. In this case, you must either refrain from using it or provide copies of images in another format that appear to these visitors instead of WebP images. That is, you must make copies of WebP images appear to visitors who visit your site from browsers that support the format, and copies of JPG or PNG images appear to visitors who visit your site from browsers that do not support it. We will explain how to do this later in this article through the ShortPixel add-on. Your website does not support the format. In fact, although WordPress supports this format, there are reasons related to the web hosting, libraries used on the server, or other elements of the site, that can make the WebP format not supported in whole or in part (some features are supported and some are not).

If your site does not support this format, you will see an error message while uploading the image to it. It is worth noting that you must contact the customer service team of the hosting company that hosts your site to ensure that it supports the WebP format or in order to activate formatting support on the site.

How to convert image format to WebP now you can

Today, converting images from other formats to WebP format is easy, as there are many tools that provide the ability to do this on the Internet without the need to use programs, or using programs that run on computer operating systems, or even using a plugin that is installed on WordPress and used to compress images and convert them to WebP. Below we explain in practical terms the most important methods by which you can convert images to WebP format. The squoosh.app web application The open source web application squoosh.app provides you with the ability to compress images for free by converting them to many formats that are characterized by high quality and low size. You can also make some modifications to the image while compressing it using it. To use squoosh.app through the browser to convert an image to WebP format, go directly to the application's website by clicking on this link ( squoosh.app ).

The web application page will appear where you can directly upload an image in order to compress it. An image showing the main page of squoosh.app from which an image can be uploaded. After going to the link, upload the image to the site by dragging its icon on your computer and dropping it onto the web page, or by copying it to the clipboard (as an image, not as a file) and pasting it on the page by clicking the (Paste) button or the (Ctrl + v) keys on the keyboard. You can also upload an image to the site by clicking on the plus sign in front of the image icon and choosing the image file through the file selection box that appears to you.

An image explaining the methods of inserting an image into the squoosh.app website in order to compress it. After dragging and dropping the image file onto the squoosh.app page, or after entering the image into the site by any of the three previously described methods, the application will take you directly to the image editing and compression page. The page will consist of two sections, one of which will display the original image, and the other will display the image after applying the properties and modifications that you select from the section at the bottom right of the screen to it. You will also be able to drag a slider to compare the original and modified versions of the image. An image showing the sections of the image compression and modification page in squoosh.app squoosh.app provides the ability to convert the image to WebP format with lossy or lossless compression. To convert the image to WebP, choose the format from the drop-down menu located in the Select Image Properties section directly under the word (Compress).

The site will show you new options compatible with the format you chose, as several options will appear to you when choosing the WebP format, the most important of which is my option: Lossless: It is a check box, where next to the word (Lossless) there is a box in which you can put a check mark, and this option is dedicated to specifying the compression method (with or without data loss). If you do not put a check mark in the box, the compression method will be with data loss, and if you do, it will be the compression method without data loss. Quality: It is in the form of a bar through which you can specify a number between 0 and 100. This option appears only if you do not place a check mark next to the word (Lossless), that is, if you choose to perform lossy compression. It determines the quality of the image after modification. If you choose a number close to 100, the image quality will be very close to the quality of the original image, and if you choose a low number close to zero, the image quality will be very low compared to the original image. Important options in the Select image compression options section. After selecting the properties you want from the available options, you can click the download button in order to save the modified (compressed) image to your device.

Then, after the image is downloaded to the device, you can notice that its size is less than the original image. In our example, the size of the original image was equal to 893 KB and was in PNG format, while its size after it was compressed using lossy compression with Quality set to 100 was approximately 271 KB, and this means that the size of the image has decreased by approximately 69%. An image showing the location of the download button for the image after compressing it and converting it to WebP format. When we downloaded the same previous image with a size of 893 KB to WebP format using the lossless compression method, the size of the compressed image was equal to 534 KB, meaning that the size of the image was approximately 40% smaller, which means that you can use either method to compress the image by converting it to WebP format, but the lossy compression method reduces the size more than the other method, so it may be better to use it for the images that you want to place On your website. It should be noted that the squoosh.app application provides the ability to make many modifications to the image while compressing it, such as changing its size and some other properties, but reducing image sizes is the main function for which it was built.

WordPress plugins for converting images to WebP There are many plugins that allow users of the WordPress content management system to convert images to WebP format directly when uploading them to the site through the control panel. Some plugins also provide other features related to images, such as displaying the image in the visitor’s original format and not in WebP format if his browser does not support the format. We will not explain the WordPress plugins that provide the ability to convert images directly to WebP when uploading them to the site in practice in this paragraph. Rather, we will explain one of the plugins that are recommended to be used in the subsequent paragraph (how to use WebP images on a WordPress site), but we will shed light on some of those plugins here. ShortPixel: This plugin can be used to improve WordPress website images by reducing their size and changing their dimensions. It also helps convert images to WebP format automatically.

The ShortPixel plugin is paid, but there is a limited free version of it that can be installed on the site through the plugin installation page in the WordPress control panel, or by downloading its file from its page on the official WordPress website, and then installing it on the site. Imagify: This add-on allows you to enhance images in ways similar to the previous add-on methods, and has many features similar to it, as it helps you compress images and change their dimensions automatically. It also allows you to convert images to WebP and display them to visitors when their browsers support the format. There is a free version and paid versions of this plugin as well, and the free version can be installed by downloading the plugin file from its page on the WordPress website, and installing it on your site, or directly through the plugin installation page in the WordPress control panel.

Optimole: This add-on also compresses images and changes their dimensions automatically, and provides them in WebP format to the visitor if he uses a browser that supports this format. It also presents the image in the optimal size and resolution to the visitor depending on the screen size of the device he is using. There is a free plan of the plugin that optimizes images for approximately 5,000 visitors per month, and there are paid plans suitable for sites with high traffic. You can install the plugin on a website in the same ways as installing the previous two plugins, either through the plugin installation page in WordPress directly, or by downloading its file from its page, and then uploading and installing it on WordPress.

There are also many other plugins that work on WordPress and improve images by converting them to WebP, but the plugins we mentioned here are the best for performing this task. How to Use WebP Images in a WordPress Site There are currently two primary ways you can use the WebP image format in WordPress. The first method relies on converting images to WebP format using a website or an external program that can do this task, and then uploading them to the site through the WordPress control panel, whether from the article editing page or from the media library. That is, you can convert the image using the squoosh.app web application, which we explained how to use above, and then use the converted WebP image on your site as you use other formats.

While the first method seems a little tiring and takes a long time if you need to convert many images, especially since squoosh.app does not currently support converting more than one image at a time, the second method is easier, faster, and better, because it provides many benefits that the first method does not provide. It relies on using an add-on that converts and compresses the images that you upload to your site automatically, and presents the images in WebP format when the visitor’s browser supports the format, and in the original format when the page is visited through a browser that does not support WebP. The second method of using WebP images in WordPress ensures that the web page is displayed to the visitor in the fastest possible way, in addition to using this format not affecting the experience of some users, because it displays images to all visitors, not just visitors whose browsers support WebP, unlike the first method. You can use any of the plugins that we mentioned in the paragraph (WordPress plugins to convert images to WebP) to improve your site’s images and convert them to WebP, but we will not explain here the ways to use all of these plugins. Rather, we will explain how to use the ShortPixel plugin only.

To use the WebP format for images on your WordPress site based on the ShortPixel plugin, install and activate the plugin on your site by following one of the methods that we explained in the comprehensive article that explains the correct methods for installing WordPress plugins on the system (How to install WordPress plugins and activate them on the site correctly). After installing and activating the add-on, a special item for it called (ShortPixel) will appear under the (Settings) tab in the side menu in the WordPress control panel. When you click on this item, you will go to the add-on’s settings page. However, the first time you install and activate the add-on on the site, a page will appear asking you to enter the API key, and you must enter a correct key to be able to start using the add-on for free. The ShortPixel extension requires entering an API key to start using it to convert images to WebP. If you already have an API key, you can enter it and click the (Validate) button to start using the extension. If you do not have a key, you will need to obtain one by registering a free account with ShortPixel.

To register and obtain a key, enter your email in the field above the section that requests the key next to (E-mail address), then put a check mark in the small box below the field, then click on the (Request Key) button to request the API key. How to request an API key to set up the ShortPixel plugin and start using it. The page to complete the registration process will appear for you. To do that, you must put a check mark in the box to confirm reading and agreeing to the terms of service and privacy policy. Then you must click on the (SIGN UP) button to register a free account and obtain the API key to enter it within the plugin settings in your WordPress. Completing the registration process in ShortPixel After clicking on the (SIGN UP) button, a page will appear informing you of the success of the registration, and that page will include your API key that you can enter on the site in order to set up the add-on and start using it.

A page that confirms the success of the registration process and shows the API key. Copy the API key for your account from the page that confirms the success of the registration process, then paste it on the add-on setup page (the page that requests it) in your site’s WordPress control panel, then click on the (Validate) button. Enter the API key in the designated field in order to set up the add-on and prepare it for use. Important note: When you click on the (Request Key) button, if you are not taken from the add-on setup page to the page for completing the registration process, and then to the registration process confirmation page that includes the API key, you will find the key in an email message within the inbox of the email that you entered in the field next to (E-mail address). Copy the key from that message, then paste it into the designated field on the setup page, then click the (Validate) button.

Once you enter the correct API key and click (Validate), you will finish the setup process, and the plugin will be ready to use to improve images, convert them to WebP format, and speed up the site. You will be taken directly to the settings page for ShortPixel, and the page will include many tabs that contain a lot of options that allow you to improve your website images. ShortPixel add-on settings page You can explore all the add-on options and adjust them as you see fit by navigating between the tabs, entering the required information, etc., and you can use Google Translate to know what the options do if you are not fluent in the English language. We will not explain here all the add-on options, but we will explain how to activate the automatic conversion of images to WebP format when uploading them to the site, so that the image is delivered in this format to browsers that support it, and in the original format to browsers that do not support it. We will also explain how to convert images uploaded to your site before installing the add-on to WebP format.

How to activate optimization and automatic conversion of images to WebP ShortPixel will automatically optimize all images that you upload to the site after installing and activating the extension, but the default optimization process does not include converting the image to WebP format, and you only have to activate the options that include the process of converting images to WebP format in the optimization process. To do this, go to the (Advanced) tab on the extension’s settings page, then scroll down a little and find the options for the (Next Generation Images) section, then put a checkmark in the box next to the option to convert images to WebP, which is represented by the text that begins with (Also create WebP versions of the images) or something similar. After that, put a check mark in the box next to the phrase (Deliver the next generation versions…), then choose the option (Using the tag syntax) from the two options that appear, then the option (Only via WordPress hooks) from the other two options that appear, exactly as the following image shows.

How to include the process of converting images to WebP format into the optimization process After that, scroll to the bottom of the page, and save the changes you made by clicking on the (Save Changes) button, or on the (Save and Go To Bulk Process) button if you want to go to the image optimization page that you already have on the site. In both cases, the changes you made will be applied to new images that you upload to your site, that is, they will be converted to WebP format, and delivered to visitors in this format when their browser supports it.

How to convert images on the site to WebP

The ShortPixel add-on provides you with the ability to optimize and convert images previously uploaded to your site (before installing the ShortPixel add-on) to WebP format easily through the (Bulk Image Optimization by ShortPixel) page, which your browser takes you to after clicking on the (Save and Go To Bulk Process) button located in the various settings pages of the add-on, which saves the changes you make. You can also go to the (Bulk Image Optimization by ShortPixel) page by placing the mouse cursor on (Media) in the side menu of WordPress, then clicking on (Bulk ShortPixel) from the drop-down menu that appears. To convert images already on the site to WebP, perform the steps in the previous paragraph (How to activate optimization and automatic conversion of images to WebP), then go to the (Bulk Image Optimization by ShortPixel) page in one of the two ways we just explained, then make sure to put a check mark in the box next to (Also create WebP versions of the images) on the page, then click the (Start Optimizing) button to start the optimization and conversion process to WebP.

How to start the process of optimizing and converting images uploaded to the site before installing ShortPixel After clicking on the (Start Optimizing) button, the process of optimization and conversion to WebP format will begin, and it will take a length of time that depends on the number of images on your site, and you will be able to know the progress of the process during its implementation, and you will also be able to stop the process temporarily or completely through the (Pause) and (Stop) buttons, respectively. The process of optimization and conversion to WebP format is in progress. Note: You must keep the page where the image optimization process takes place open until the process is finished. If you close it, the process will pause, and will resume when you open the Bulk Image Optimization by ShortPixel page or media library on the site again. However, during the process you can use your site’s WordPress control panel as usual in another tab. After the ShortPixel add-on has finished optimizing the images, you will be notified of this, as you will notice that a notification appears on the (Bulk Image Optimization by ShortPixel) page congratulating you on the success of the process.

A notice informing you of the success of the process of improving images and converting them to WebP. Thus, we finish introducing you in detail to the WebP format, when you should use it, and how to use it on WordPress sites in the best ways. In conclusion, we would like to draw your attention to the fact that the process of improving website speed is not only based on improving images by converting them to WebP, but there are many other methods and steps that must be implemented correctly in order to speed up the site and ensure that its pages are displayed quickly to visitors.