Currently, WordPress development and performance teams are in a deep discussion about implementing WebP support to WordPress. WebP is an image format by Google that shrinks the image sizes without any quality loss. Or, those images can be used for further optimizing the images with a little cost in quality.
While this sounds great, currently we need to keep both the source JPG and PNG files and the generated WebP files in the server because WebP images are not supported by older versions of the browsers. This means the server requires additional disk space for generated WebP images; this is why WordPress developers are still discussing it.
But if you have more than enough disk space in your server and you want to speed up your website, you can use WordPress plugins to start using WebP. In this guide, we will be telling about installing and configuring WebP Express.
WebP Express installation
Search for the WebP Express plugin in the Plugins section in the WordPress interface. Install and activate the plugin that can be seen below on your site. Then, go to the WebP Express settings you installed.
Operation mode settings
The first setting title is Operation Mode, where we select how WebP contents will be displayed. We choose the Varied image responses option. If the users’ browser has WebP support, this option creates a rule that converts JPG and PNG to WebP format upon request.
“General” settings
Let’s dive into the settings in the “General” area:
- Scope: It determines in which folders the WebP Express plugin will run. We only wanted it to affect the uploads file and theme files.
- Image types to work on: It asks what formats we want to convert images to WebP. If you are using JPG and PNG on your site, select “Both jpegs and pngs”.
- Destination folder: In this setting, you can specify in which folder you want the converted files to be placed. Options include Mingled and In separate folder. If you select “Mingled”, it adds the WebP image you uploaded to the same location as the original file. Images uploaded with the “In separate folder” option are moved to a different folder.
- File extension: This option activates if you select the Mingled option from the Destination folder selection. There are Append and Set options. In the “Append” option, your images are appended as “image.png.webp”. In the “Set” option, it changes the file to “image.webp”. You should be careful when choosing this option. Problems may arise if there are files named logo.png and logo.jpg in the same folder; they will both become image.webp.
- Destination structure: This is the option where you can set the path settings of the uploaded files. Both options are okay; we are choosing the “Image roots” option.
- Cache-Control header: With the Cache-Control header, you can set the cache times of the files. Select the Custom option and leave it at its default setting.
- Prevent using WebPs larger than original: Always leave this option enabled. If somehow a WebP file ends up being larger than the original, selecting this option will make the extension serve the visitor the original one.
“.htaccess rules for webp generation” settings
In most cases, there is no need to disable those options. Make all of them “enabled”.
Conversion settings
Jpeg options and PNG options are almost the same. Let’s have a look at their options together.
- WebP encoding: Using WebP format supports two encoding types: Lossy and Lossless. If you choose Auto from the options, it will try to use both options and choose the one with the smallest file size. The “Lossy” option will degrade the quality of the image. Leave it as “Auto”.
- Quality for lossy: If you select the “Same as the jpeg” option, it tries to detect the quality of the image and applies the same for the WebP. “Limit” is the highest quality limit and “Fallback” is the quality value for when it fails to detect the quality of the file.
- Quality for lossless: You can select “Apply preprocessing” here to set a maximum quality value for your WebP images, or select 100% lossless for direct conversion to WebP.
- Alpha quality (PNG only): You can set the quality for transparent sections in PNG images here. We recommend setting a high value here.
- Metadata: If you don’t need the metadata in images, use the “No metadata in webp” option.
- Conversion method: These are the conversion methods supported by the WebP Express plugin. We do not use any 3rt party applications. You can use Imagick, Gmagick, or Gd extension as PHP Extension.
- Convert on upload: As it says, you can force the plugin immediately convert the images as it is uploaded to the server. Otherwise, it will convert the image with the first request from a visitor. Leave this option enabled.
- Enable logging: If you are having problems with the extension, you can turn this on for debugging. Otherwise, leave it off.
- Bulk convert: Here you can force the plugin to convert all the images in the target folders immediately. It will take time depending on your hardware and the number of images. You can also use the “Delete converted files” button if somehow you need it.
Alter HTML settings
If this option is activated, it replaces the <img> tags with <picture>, making them HTML5 compatible, and configures the image accordingly if there is more than one display option (like automatically resized images).
Web service settings
It enables other websites to use your website to convert images. Leave it off.
