With the recent and constant technological advances and new mobiles that do not stop surprising us every day, it is essential to offer one that allows us to navigate our website quickly, this makes us think that we need to offer content of better quality and efficiency on our website every day. website.
Hosting Mautic QuickStart -50% with support in Spanish
24 hours and free training
Send up to 1,000,000 emails/year. Mautic support in Spanish 24 hours, 365 days
And one of the fundamental parts is that when the user accesses your page, the images load very quickly.
In this article we will show you another method to make your website load like lightning.
What is WebP?
Nowadays, websites are adapted to better offer their content, and due to this need, WebPa file format developed by Google in 2010 that allows you to provide a higher compression rate for images achieving that the size of these is reduced, but maintaining their quality.
What are the advantages of WebP?
One of the main advantages is that a smaller image size is obtained, achieving that your website load much faster.
However, one of the main challenges we face when we want to serve images in this type of format on our WordPress website is that this CMS currently does not support it.
This means that we can’t start uploading images in this format in our media library, but we have a super hero coming to help us so we can use them 😀
We currently have different plugins that allow us to convert our images into WebP format and serve this format on our website, one of the most used and that I recommend is the plugin .
This plugin uses the WebP Convert library to convert images to WebP format, thus ensuring that images from your media library are served in this format.
How to install and configure the WebP Express plugin?
Installing the plugin is very simple, we just have to go to the section Plugins -> Add New
Once in this section, you only need to search within the search engine WebP Express and press Install Now.
Once installed we access the plugin administration and see the configuration options.
- Scope: Allows you to select which folder or content will be converted by the plugin.
- Images type to work on: Select which images the plugin will work with.
- destination folder:
- mingledNote: When “Mingled” is selected, Webp images will be placed in the same folder as the original, but only for images in the uploads folder. Other images, such as theme images, are stored separately.
If you are using WebP Express in conjunction with Cache Enabler or Shortpixel, choose this option.
- in separate folder: Images are stored in a separate folder (wp-content / webp-express / webp-images / doc-root).
Note: Changing this option will cause existing webp images to move.
- Destination structure: This setting determines how converted files are structured within the folder used by WebP Express to store webp images (hereinafter called “cache root”)
- .htaccess rules for WebP generation
Typically, in this mode of operation, you would enable the first two options, which effectively enables mixed image responses (so that a request for a jpeg/png will result in a webp in browsers that support webp).
The first option makes this happen for images that are already converted.
The second option makes it possible even for images that haven’t been converted yet, by redirecting the request to the converter, which converts, saves, and delivers.
The third option is only relevant if you are using Alter HTML in addition to offering mixed image responses.
- Conversion
- JPEG options: The “jpeg” setting applies when the image being converted is a jpeg.
- PNG options: The “png” setting applies when the image being converted is a png.
Note that this setting is not compatible with the “Gd” conversion method, since it is not possible to copy metadata with the Gd extension. Imagickbinary is also currently unsupported.
It’s recommended to enable this even when redirection is also enabled, so mixed image responses are only used for those images that cannot be replaced in HTML.
Mixed responses usually lead to poorer caching on proxies and CDNs. And if users download those images, they will have the jpg/png extension, even though they are WebP.
How can we identify that the plugin is working?
If we already have files added to our media library, from the plugin settings we can click on the Mass conversion option.
When doing so, a message will appear indicating to search for the files to be converted, showing the result of all the images that are added.
You just have to press start conversion and the plugin will start doing its job.
As the plugin processes and converts the images you will be able to see the result with the new converted image.
You should keep in mind that this process usually takes a while depending on the number of images added to your website as well as each of the thumbnails that are generated within WordPress.
Once the files have been converted we can verify within our website if it is working, if we inspect the code of our website we will see that now the images are served in WebP format.
What happens if we upload a new image?
In this case the system handles the conversion automatically and serve the image in WebP format.
Plugin settings with Nginx
It is possible that when we have configured our plugin we still do not see the images served in the new format.
How can we fix this error and serve the images properly?
For this we can see that within the FQAs options of the developer they send us indications such as:
WebP Express works fine on NGINX, however the user interface is not yet optimized for NGINX. And of course NGINX does not process the .htaccess files that WebP Express generates.
WebP Express can be used without redirection, since you can alter HTML to use image tags that link to the webp alternative.
The simple option to fix this is to enable the option “CDN Friendly” in the Plugin Operation Mode options “Operation mode”.
After that, click on the “Bulk convert” option, keep in mind to have the “Convert on upload” option active
Finally activate the “Alter HTML” option which takes care of delivering webp to webp-enabled browsers while still delivering the original jpeg / png to browsers that do not support webp.
Conclusions:
As we can see, activate the option of the WebP format on our website will allow us to help you have smaller and better quality images, thus helping our website load faster and offer a much more rewarding user experience.
But remember that there are other elements that will help optimize your images, that’s why we leave you this guide that can help you.
And if none of this convinces you, you will always have to replace some of your images by adding .
Help us improve our content by sharing your opinion
WordPress and Woocommerce support team at .
Facebook Comments
Disqus