WebP and WordPress

WebP and WordPress = Improved Loading Time and Performance?

Many people 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. However, WebP should be particularly useful for WordPress with many images. We explain why this is the case in this article.

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

Since images usually account for over half of a website's storage space, there is a lot of optimization potential here.

Now a few more facts about WebP before moving on to 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.

"*" indicates required fields

I would like to subscribe to the newsletter to be informed about new blog articles, ebooks, features and news about WordPress. I can withdraw my consent at any time. Please note our Privacy Policy.
This field is for validation and should not be changed.

Differences compared to PNG and JPG 

WebP and PNG

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

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

Disadvantages of the PNG format

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

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

PNG is available in the formats PNG 8 and PNG 24. PNG 8 uses a colour depth of 8 bits and a maximum of 256 colours. PNG 24 uses a 24-bit colour depth with up to 16.7 million colours. Thus PNG 24 is comparable to 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 here between the two candidates JPG and WebP - WebP is simply the better choice.

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

The JPG format is suitable if you can live with quality losses and if sharpness and details are not important. The format is often used for colour-rich images, as the composition of JPG allows many colours and gradations to be represented.  

Asmall note: How images ultimately look on your screen depends on many factors: for example, the screen resolution (HD, QHD, UHD/4K, 8K, etc.), the screen settings such as sRGB, Adobe RGB, the respective display mode of your monitors and the end device with which you view the images. In the last few days, I myself had the problem that my images looked different on my screen and on the website. 

Color 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. It therefore always has a color depth of 24 bits, just like 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 broken down: 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 color 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 term YUV is composed of Y = luminance (brightness) and U and V mean chrominance (color). YUV is therefore like RGB, with which a color is represented.

But why do we need it anyway?

Because the file size is important here. In the RGB model we have to use 3 bytes (24 bits) to store one colour. Whereas with YUV, the size is halved because of the way it is calculated and then stored. It's complicated, but I think at this point the information is sufficient and brings some clarity.

Support/Support

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

Of course, you can see that "mobile devices" are more in focus, which also explains why better support for WebP is provided for the smartphone. Therefore, take a look at your user statistics and see from which browser and device you receive the most visitors.

The following list shows which browser versions on which end devices can already enjoy WebP.

Current support for desktop browsers

  • Firefox from version 65.xOpera from version 39.xChrome from version 23.xEdge from version 17.xInternet 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.xOpera Mini all versionsOpera Mobile from version 12.xAndroid Firefox from version 66.xInternet Explorer Mobile from version 11.x

WebP VP8 (Animated Images)

  • Google Chrome (Desktop and Android) from version 32.xMicrosoft Edge from version 18.xFirefox from version 65.xOpera from version 19.x

I could not currently find WebP support for other browsers and devices.

Requirements of WebP in WordPress

None so far, but... Unfortunately, the bad news is that WordPress does not currently support WebP images on its own. Therefore, we now come to the next point.

Ways to include WebP in WordPress:

  1. Using a Plugin

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. By the way, since Raidboxes already has integrated server-side caching, you do not need a "Cache Enabler" plugin, as recommended here by Optimus.

ShortPixel

Shortpixel WebP

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

EWWW Image Optimizer

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

Some host have deliberately blocked the possibility of changing the .htaccess file for security reasons. If you are hosting on an Apache server, you can make the following adjustment:

<IfModule mod_rewrite.c>
    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]

</IfModule>
<IfModule mod_headers.c>
    Header append Vary Accept env=REDIRECT_accept
</IfModule>
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 the way, Raidboxes already supports this rewrite rule by default.

Where can I find her?

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

There is a third - and somewhat complicated - possibility to add something in the function.php file of your WordPress theme so that you can upload images in WebP format by default. You can read how this works in this article.

For whom is WebP suitable?

In principle, WebP is useful for any website. Of course, the format is particularly suitable for websites with many images. For example, for the websites of photographers who want to keep their image quality as high as possible, but still attach great importance to a fast loading time. But other WordPress users, such as creative professionals or those who have something to show in visual form, should also do everything they can to make the user experience as pleasant as possible.

Conclusion on WebP and WordPress

Unfortunately, WebP is not yet common today, unlike JPG and PNG, but it will certainly become increasingly important in the future. After all, WebP can improve the performance of your website and thus the user experience and satisfaction of your target group.

plugin: Yes or No?

There are excellent plug-ins that do the WebP support work for you and also optimise your images. Personally, I used pluginOptimus for this. Otherwise, it would certainly be worth considering including it in the siteas code, especially since you would then save an extra plugin. But all in all, you are well advised to use pluginfor this purpose.

I hope you enjoyed the article and I look forward to hearing what you think!

Your questions about WebP and WordPress

What questions do you have for Stefan? Feel free to use the comment function. You want to be informed about new postson the topic of online marketing? Then follow us on Twitter, Facebook, LinkedIn or via our Newsletter.

Did you like the article?

Your rating helps us improve our future content.

5 Comments on "WebP and WordPress = improved load time and performance?"

  1. I tried and tested this WebP thing, and it works. My page speed score also jumped to 90.

  2. All fine, but what about themes? ShortPixel gives you support for webp images in posts and pages. But, themes like Solidad do many things their own way, and ignore the webp images. And some of the theme images may be shown on all pages, so webp would be useful there.

    However, it appears that none of the dozens of WordPress WebP articles even mentions this. Are there very few themes out there with this issue, or is it just being ignored because there’s no answer?

  3. 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!

    1. Hey,

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

      Cheerz,
      Stefan

Post a comment

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