WebP and WordPress = Does It Really Improve Your Loading Time and Performance?

Stefan Römershäuser Updated on 21.10.2020
8 Min.
webp WordPress
Last updated on 21.10.2020

Many WordPress users are interested in the WebP image format because it combines the advantages of JPG and PNG. At the same time, however, it does not replace the two common image formats. For WordPress users who use a lot of images, WebP should be especially useful. In this article you will learn how you can benefit from WebP.

In today's world, it is increasingly important to make the user experience of your website visitors as pleasant and easy as possible. People are visual and can often absorb information they see more quickly and better. A quick glance at an advertising board, scrolling through a homepage before the bus arrives in five minutes. We all know these situations. 

Since images usually make up more than half of the storage space of a website, there is a lot of potential for optimization.

Now a few more facts about WebP before going into the topics.

  • WebP supports the VP8 video format, which is suitable for small animated images, for example, as we know it from GIFs.
  • The maximum image size for WebP is 16,383 x 16,383 pixels.
  • You can also scale a WebP image up or down, similar to SVG files, but many do not allow this for security reasons.

The following topics are covered in this article today:

  1. Differences to JPG and PNG

- File size comparison
- Colour space/depth
- Support/assistance

  1. Which requirements do I need for WebP in WordPress ?
  2. How do I insert WebP images into WordPress ?

- PluginUse on
- Add something to the .htaccess of your server
- Function.php file of your WordPress -Themes complete. 

  1. My conclusion about WebP

Differences to PNG and JPG 

WebP and PNG

A WebP image is up to about 25-30 percent smaller than a PNG without any loss of quality. Backgrounds can still be transparent. This only varies between the image itself, image depth, details, color space, etc. Due to the small file size, the WebP format brings a clear advantage in terms of performance.

png vs webp

Based on the two images, it can be said that the WebP image is smaller than the PNG version, at 30.1 percent. I chose the lossless method here and deliberately set the quality control to 80 percent. The remaining 20 out of 100 percent can hardly ever be seen, so 80 percent is completely sufficient for online applications. 

Disadvantages of the PNG format

PNGs are not suitable for photographers because they create a much larger image file. The PNG format is mostly used for screenshots, because PCs save images as PNG. Why? - Because screenshots are often a mix of image and text. 

The PNG is used, for example, for images that require a transparent background. This makes the format very versatile and popular in graphic design, as many elements often come together there.

PNG is available in PNG-8 and PNG-24 formats and uses 8-bit color depth and a maximum of 256 colors. PNG-24 uses 24-bit color depth with up to 16.7 million colors. Thus PNG-24 is comparable with the JPEG format. So let's continue with the JPG format:

The JPG image format

In direct comparison with JPG, the WebP image is about 25 to 35% smaller - despite the same quality of the image. There is nothing to say between the two candidates JPG and WebP - WebP is simply the better choice.

jpg vs webp

On the basis of the two images it can be said that the WebP image is smaller than the JPG version with 24.7%. For the JPG version I set the quality to "High".

The JPG format is ideal if you can live with quality losses and if sharpness and details are not important. The format is often used for colorful images, since the composition of JPG allows to display many colors and gradations.  

Little clue:

The final appearance of your pictures depends on many factors: for example, the screen resolution (HD, QHD, UHD/4K, 8K, etc.), the screen settings such as sRGB, adobeRGB, the display mode of your monitors and the device you use to view the pictures. Recently I myself had the problem that my pictures looked different on my screen and on the website. 

My guess: Nowadays all browsers are in sRGB mode. So if you are creating something for the web in Photoshop, for example, set your monitor to sRGB. Then you can see what it looks like when it lands on yourssite . 🙂 

Colour space/depth

This is where it gets a little complicated. WebP is based on the lossy video compression algorithm VP8 with a compression of up to 24 bits and a maximum size of 16,383 x 16,383 pixels So it always has a color depth of 24 bit, just like the JPG. The color depth of PNG ranges from 8 to 48 bits, whereby the latter makes little sense due to the large file size, 

As VP8 bitstream, the lossless generation of WebP images only works with the 8-bit image format - also known as YUV420 image format.

The YUV420 format unravelled: Let's first look at how a monitor displays an image by default: Each color can be represented by three colors (the so-called RGB model), i.e. red, green and blue.

Each colour individually - i.e. red, green and blue - can be recorded on the PC in 1 byte (8 bits). So one pixel in a monitor has 3 bytes (each byte has information about the respective color red, green and blue)

The human eye is very sensitive when it comes to brightness, but less sensitive to colors and their gradations. Thus the designation YUV is composed of Y = luminance (brightness) and U and V mean chrominance (color). YUV is therefore like RGB, which is used to represent a color.

But why do we need it anyway?

Because the file size is important. In the RGB model we have to use 3 bytes (24 bits) to store a color. With YUV, on the other hand, the size is halved due to the way it is calculated and then stored. It is complicated, but I think that at this point the information is sufficient and brings some clarity.

Support/assistance

The statistics show which browser is most frequently used by which "end device" such as PC, tablet or smartphone. Since WebP is not supported by all browsers, you should keep this in mind.

Of course it is obvious that "mobile devices" are more in focus, which also explains why better support for WebP is provided for the smartphone. So make sure you check your user statistics and see from which browser and device you get the most visitors.

The following list shows which browser versions already benefit from WebP on which end devices. 

Current support for Desktop Browser

- Firefox from version 65.x
- Opera from version 39.x
- Chrome from version 23.x
- Edge from version 17.x
- Internet Explorer from version 11.x

Up-to-date support for mobile devices

- Android browser from version 5.6 (Chromium 67)
- Android Chrome from version 73.x
- Opera Mini all versions
- Opera Mobile from version 12.x
- Android Firefox from version 66.x
- Internet Explorer Mobile from version 11.x

WebP VP8 (Animated images)

- Google Chrome (Desktop and Android) from version 32.x
- Microsoft Edge from version 18.x
- Firefox from version 65.x
- Opera from version 19.x

I could not find WebP support for other browsers and devices at the moment.

Which requirements does WebP need in WordPress ?

So far none, but... The bad news is that WordPress currently there is no independent support for WebP images. Therefore we will now come to the next point.

Possibilities to integrate WebP intoWordPress :

  1. PluginUse on

The plugins ShortPixel (Free Version), Optimus (Paid Version) or the EWWW Image Optimizer (Free Version) are suitable for this purpose. 

Optimus:

Optimus WebP

Unfortunately WebP is only supported by the paid version of Optimus. Since server-side caching is RAIDBOXES already integrated, you do not need a "Cache Enabler"Plugin, as recommended here by Optimus.

ShortPixel:

Short Pixel WebP

In ShortPixelyou can check the box as shown above. But before that I would reset all the images you have to the original and then Pluginoptimize all of them at once with the. Then you should also see at the same time that you have different file types of your pictures.

EWWW Image Optimizer:

Ewww Image Optimizer WebP
  1. WordPress Make adjustments in the .htaccess of

Some host have the possibility to change something in the .htaccess file, deliberately blocked for security reasons. If you host on an Apache server, you can make the following adjustments:


    RewriteEngine On
    RewriteCond %{HTTP_ACCEPT} image/webp
    RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
    RewriteRule ^(wp-content/uploads.+)\.(jpe?g|png)$ $1.webp
[T=image/webp,E=accept:1]



    Header append Vary Accept env=REDIRECT_accept

AddType image/webp .webp

And on a nginx:

# http config block
map $http_accept $webp_ext {
default "";
"~*webp" ".webp"
}
# server config block
location ~* ^/wp-content/.+\.(png|jpg)$ {
add_header Vary Accept;
try_files $uri$webp_ext $uri =404;

By RAIDBOXES the way, this rewrite-rule is already supported by us. 

Where can I find her?

The file can be found on the web server on which it was WordPress installed. The root directory is the main directory where the domain is located at the web host. If you can't see it, you have to set the "remote file mask" to -la so that you can see hidden files. Of course, this requires that you have access rights or even host it yourself and use an FTP program like FileZilla. 

There is a third - and somewhat complicated - way to add something to your WordPress -Themes function.php file so that you can upload pictures in WebP format by default. How this works, you can find out for example in this article .

Final thoughts

Unfortunately WebP is not yet commonplace like JPG and PNG, but it will certainly become more important in the future. After all, WebP can improve the performance of your site website and thus the user experience and the satisfaction of your website visitors.

Plugin Yes | no?

There are very good plugins ones, which take the work out of your WebP support and optimize your pictures. Personally I have been invited to the Plugin Optimus gripped. Otherwise, it would certainly be worth considering including it in the site code, especially since you would then be able to use Plugin would save more. But the bottom line is Plugin for this matter.

Who is WebP suitable for anyway?

In principle, WebP is useful for everyonesite . The format is especially suitable for websites with many images. For example, for photographers who want to keep their image quality as high as possible, but still place great value on a fast loading time. But also other WordPress -users like creative people or those who have something to show in pictorial form should do everything to make the user experience of their potential customers and fans as pleasant as possible.

I hope you enjoyed the article and I look forward to your opinion! 

Stefan is a budding blogger with his website aspiring-artist.com He blogs about art, realizes WordPress sites for other budding artists and is active in an advisory capacity. Because artists also need an individual website and a meaningful logo and branding. - Aspire To Greatness

Related articles

Comments on this article

a
academy98

hello everybody
Unfortunately it didn't work for me
I installed and tested the various plugins but got no response

Stefan Römershäuser
Stefan Römershäuser

Hey,

I feel sorry for you, I would like to help you, but I need more information.
If an error occurs, or just nothing happens at all.
So some basic information about your wordpress/settings with the Plugin, and so on.
The name of your hoster?

Cheerz,
Stefan

h
hammed pourdej

Hi,
Thank you for this great content. The thing is, I have this woocomerce website. I can upload webp to my site no problem. But woocomerce doesn't seem to be Okay with webp! For instance, categories' thumbnail cannot be set to use webp, and if you force replace the JPGs with webp, the replaced image behaves abnormally! I haven't been able to find a fix for that yet!

Write a comment

Your email address will not be published. Required fields are marked with * .