How to use webP files in WordPress to improve loading times • WordPress Help

Today we are going to know an image file format that will soon be a real standard, because not only is Google its benefactor, that influences, but it has enormous virtues that help optimize the load times of any web .

What is the webP format?

It is a image file format developed by Google that offers high compression of images with and without loss for use on websites.

An image in webP format can weigh up to 40% less than the same image in JPEG while maintaining a quality of perfect visualization.

This means that, without loss of quality, we can offer a great visual experience on our websites while achieving fantastic performance and loading times.

The webP format was developed by Google in 2010 and has not yet achieved a global implementation despite its advantages.

Advantages of webP

  • Lower sizes / weight of image files
  • Any format can be converted to webP
  • ] Higher quality than other formats, despite a lower weight
  • SEO improvements when achieving lower page load times
  • Compared to JPEG its weight is 35% smaller
  • Compared with PNG its weight is a 45% lower

Disadvantages of webP

  • WordPress is not compatible with webP by default, as it is not a MIME type natively included by default
  • Few browsers still compatible with webP. Only Chrome and Opera (in their versions of desktop and mobile) are currently compatible, and only in their latest versions. The other browsers will show a broken image placeholder. Well, Chrome is 70% of the browser market, but nobody wants their images not to be seen on the iPhone or Firefox, right?

Is WebP really that good?

Look the result of these tests, which greatly exceeds the average compression indicated above.

From JPG to webP

ARCHIVE ORIGINAL JPG COMPRESSED JPG WEBP FORMAT DIFFERENCE%
jpg -to-webp-1.jpg 758 KB 685 KB 109 KB 86%
jpg-to-webp-2.jpg 599 KB 529 KB 58.8 KB 90%
jpg-to-webp-3.jpg 960 KB 881 KB 200 KB 79%
jpg-to-webp -4.jpg 862 KB 791 KB 146 KB 83%
jpg-to-webp-5.jpg 960 KB 877 KB 71.7 KB 93%

WebP offered a average decrease of 85.87% in file size .

From PNG to web P

ARCHIVE PNG ORIGINAL COMPRESSED PNG WEBP FORMAT DIFFENCY%
png-to-webp-1.png 44 KB 34 KB 30 KB 32%
png-to-webp-2.png 46 KB 35 KB 33 KB 28%
png-to-webp-3. png 43 KB 31 KB 25 KB 42%
png-to-webp-4.png 30 KB 24 KB 18 KB ] 40%
png-to-webp-5.png 15 KB 11 KB 8 KB 47%
png-to-webp-6.png 34 KB 24 KB 18 KB 47%
png-to-webp-7.png 15 KB 13 KB 8 KB 47% [19659031] png-to-webp-8.png 63 KB 47 KB 44 KB 30%
png-to-webp-9.png 48 KB ] 36 KB 33 KB 31%
png-to-webp-10.png 17 KB 14 KB 11 KB 35%
png- to-we bp-11.png 18 KB 13 KB 9 KB 50%
png-to-webp-12.png 61 KB 45 KB 39 KB 36%
png-to-webp-13.png 32 KB 25 KB 21 KB 35%
png-to-webp-14. png 26 KB 21 KB 17 KB 35%
png-to-webp-15.png 14 KB 12 KB 9 KB ] 36%
png-to-webp-16.png 36 KB 27 KB 24 KB 33%
png-to-webp-17.png 14 KB 12 KB 8 KB 43%
png-to-webp-18.png 21 KB 18 KB 13 KB 38% [19659031] png-to-webp-19.png 42 KB 30 KB 27 KB 36%
png-to-webp-20.png 23 KB ] 20 KB 18 KB 22%

WebP offered a average decrease of 42.8% in file size .

Why is it important e the implementation of webP?

Popularizing webP, or any other format that improves it, is vital for the development of the network, but above all so that navigation is faster and faster.

According to httparchive in August 2016 the images are more than 64% of the weight of an average web . Normally they tend to weigh more than all your CSS, JS and HTML combined.

Then, choosing an image optimization method like webP, which offers quality and little weight is crucial to reduce the load of a web, because at least weigh normally It will take less time to load it completely.

And this is not just for your visitors, since Google has already announced that the loading speed of the pages is a scoring factor in the search results . ] How to use webP in WordPress

If you are already convinced we will see how to use webP in WordPress, starting at the beginning.

Add webP support to WordPress

First thing is make WordPress recognize and allow to upload webP files because if we do not do anything we will see this:

To do this you have to add some code to the configuration file of your server so that allow scrive ibir and re-write to webP files .

In Apache (.htaccess)

In NGINX

Once the changes have been saved, WordPress will already recognize and allow the webP files to be used.

Add the new MIME type

Next, WordPress should be allowed to upload webP files. To do this we will add the following code to our customizations plugin or to the file functions.php of the active topic:

Anyway, the best way to use webP in WordPress is not sub go them directly but convert your current JPG and PNG files, in order to optimize what you already have and in turn facilitate the upload of files, which you can continue doing in your usual format.

Install a plugin that convert to webP

The next thing is to install a plugin that not only converts every new file that we upload to webP, but also does it with the current ones .

For this my choice is the free plugin EWWW Image Optimizer .

Once installed and active go to Settings> EWWW Image Optimizer . Once on the screen click on the tab WEBP settings .

As you see in the previous screen, you have to activate the conversion settings to webP, which by default they come inactive .

From now on the plugin will convert your uploaded images to webP and you can also make massive conversions of the existing images to this image format.

So far we have done a lot, and the first thing is that WordPress can use optimized webP files from our uploads of JPG, PNG, etc.

Checking if it works is easy. Copy the URL of the webp generated in the optimization which you will see in the media library.

And paste the URL when inserting an image in an entry and you will see that it is already shown

Also in your content.

Cache for webp images

Once the above is done, what about the cache? Who tells WordPress which browser is compatible to show the webP versions of the converted images?

Well for that we have the plugin Cache Enabler which includes one of its settings for to create a specific cache version so that webP images are displayed to supported browsers .

Install a plugin that does it all

Another way is to use the WP webp plugin, which through JavaScript WebPJS will display the image in webp if the browser is compatible and the image is in JPG.

MIME compatibility to be able to upload images in WordPress webp.

Jetpack

Yes, look where the module Jetpack's Photon is compatible with webP images and will show them from the servers of high speed wordpress.com if it is active o

Should I then use the webP format in WordPress?

As you may have seen, the use of webP in WordPress is still not banal ] and, from my point of view, until WordPress does not include native format support, but above all, until most of the browsers are not compatible, I think it is better not to do experiments with the format at the moment.

There are many other things to do to optimize WordPress with the tools and formats available. We will implement (massively) webP when it is really adopted by WordPress and browsers.

This article will help you learn, learn more possibilities, and especially to prepare for technologies that will be standard in a few months or years. [19659386] Loading …

That may also help you: