Images are one of the basic elements that all websites use, so improving them is a priority for website owners in order to speed up the website and make the user experience better, because the improved image is almost the same quality as the original image, but in a much smaller size, and therefore it does not require as much time to load. Required to upload the 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 depend on this formula, and how you use it in WordPress.
WebP image format
WebP is an image format that was 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 the loading time. page, saving bandwidth, and conserving battery life, especially on smartphones.
The WebP format has been improved over time, and is now able to provide 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 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 traffic comes through these browsers, and WebP is supported in Android as well.
How are images compressed?
The phrase ( image compression ) 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 shown in the following table:
| Lossy compression | Lossless compression |
|---|---|
| Also called irreversible compression. | Also called reversible compression. |
| After decompression, the data does not return to its original form that it was in before it was compressed. | The data returns to its original form after being decompressed. |
| Some data is removed during the compression process. | No data is removed during the compression process. |
| It is used to compress video, images and audio. | It is used to compress text, images and audio. |
| The quality of the image compressed in this way is affected, but this is not always noticeable. | The quality of the image compressed in this way is not affected. |
We will not explain here the mechanism that is used for compression in either technology, 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 technology are smaller. About 26% of PNG images of the same quality, while lossy compressed images are about 34% smaller than JPEG images (the percentages 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 WebP format
In addition to supporting both the types of compression used in PNG and JPEG, the WebP format 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. (Animation), and these are two features that you do not usually find in the image format itself, as the PNG format supports multi-level transparency but does not support animation, and the GIF format 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 (Different levels of Transparency), which means that you cannot gradually make the edges of shapes transparent so that you determine the transparency of each pixel, that is, in short, part of the image can be in PNG format. WebP is transparent, opaque, or somewhere in between (semi-transparent, for example), while the image portion of a GIF is either transparent or color, and 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 site 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 WebP format
Although the WebP format is powerful and has many advantages and benefits, it suffers from some disadvantages, the most important of which are:
- Not all web browsers support the WebP format, so if you use this format, your site’s page images may not appear to some visitors, especially those using older versions of browsers.
- Displaying animated WebP images requires more central processing power than animated GIFs. Decrypting a WebP image compressed with lossy compression takes about 2.2 times as long as decoding a GIF image carrying the same information, and decoding a WebP image compressed with lossy compression takes Losslessly about 1.5 times the time it takes to decode a GIF image 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 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 why you should not adopt 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. Those who visit your site from browsers that do not support it, and we will explain how to do that later in this article by adding ShortPixel.
- 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 Some of them are not supported.) 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 an image format to WebP
Today, you can easily convert images from other formats to WebP format, 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 converting them to WebP. Below we explain in practical terms the most important methods by which you can convert images to WebP format.
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.
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. ) from 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.
After dragging and dropping the image file onto the squoosh.app page, or after inserting the image into the site by any of the three methods described previously, the application will take you directly to the image editing and compression page. The page will be composed of two sections, one of which will display the original image, and the other will display the after image. Apply the properties and adjustments 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.
squoosh.app provides the ability to convert 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 that are compatible with the format you chose. You will see several options 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. This option is intended for 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 Lossless, and if you set it, it will be a lossless compression method.
- 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 compress with lossy compression, and 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 original image quality, and if you choose a low number close to zero, the image quality will be very low compared to the original image.
After selecting the features you want from the available options, you can click on 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 was after it was compressed using lossy compression with Quality specified. With 100 equaling approximately 271 KB, this means that the image size has been reduced by approximately 69%.
When we uploaded the same previous image with a size of 893 KB to WebP format using lossless compression, 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 of the two methods to compress the image by converting it to WebP, but lossy compression reduces the size more than the other method, so you may be better off using it for images you want to put 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 to convert 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 is not Supports formatting.
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 next 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 a high number of visitors.
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 on a WordPress website
There are currently two primary ways you can use the WebP image format in WordPress. The first method depends 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 web application. squoosh.app, which we explained how to use above, and then you use the converted WebP image on your site just like you use other formats.
While the first method seems a little tiring and takes a long time if many images need to be converted, 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 are not available at a time. Provided by the first method, it relies on using an add-on that automatically converts and compresses the images you upload to your site, 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 plugin, its own item 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 plugin’s settings page. However, the first time you install and activate the plugin on the site, A page will appear asking you to enter the API key. You must enter a valid key to be able to start using the extension for free.
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 one, 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 at the top of 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. .
The page to complete the registration process will appear for you. To do this, you must put a check mark in the box to confirm that you have read and agree 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. .
After clicking on the (SIGN UP) button, a page will appear informing you of the successful 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.
Copy the API key for your account from the page that confirms the success of the registration process, then paste it on the plugin setup page (the page that requests it) in your site’s WordPress control panel, then click the (Validate) button.
Important note : When you click on the (Request Key) button, if you are not taken from the add-on setup page to the page to complete the registration process, and then to the registration confirmation page that includes the API key, you will find the key in an email message within the inbox of the email you received. Enter it 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 extension will be ready to use to optimize 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 several tabs that It has a lot of options that allow you to improve your website images.
You can explore all the extension’s options and adjust them as you see fit by navigating between tabs, entering required information, etc. You can even use Google Translate to learn what the options do if you are not fluent in English.
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, and 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 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 check mark 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, as follows: The following picture explains it perfectly.
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 page for improving the images you previously had 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 that your browser takes you to after clicking the (Save and Go To Bulk Process) button. Located on various add-on settings pages, 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, follow 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, and then make sure to check Check the box next to (Also create WebP versions of the images) on the page, then click on the (Start Optimizing) button to start the optimization and conversion process to WebP.
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. 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) buttons ) and (Stop) respectively.
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 stop temporarily, and will resume when you open the (Bulk Image Optimization by ShortPixel) page or media library on the site again, but you can while performing the process Use your WordPress dashboard 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.
With this, 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 Among the 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.
