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

Stefan Römershäuser Last updated 21.10.2020
8 Min.
webp wordpress
Last updated 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's increasingly important to make your website visitors' user experience as pleasant and easy as possible. People are visual and can often absorb information they see faster and better. That 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 video format VP8, which is suitable e.g. for small animated images as we know it from GIFs.
  • The maximum image size for WebP is 16,383 x 16,383 pixels.
  • Also, you can upscale or downscale a WebP image, similar to SVG files, but many don't allow this for security reasons.

We cover the following topics in this article today:

  1. Differences compared to JPG and PNG

- Comparison of file sizes
- Color Space/Depth
- Support/Support

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

- Use a Plugin
- Add something in the .htaccess of your server
- Function.php file of your WordPress -Themes add something.

  1. My conclusion about WebP

Differences compared to PNG and JPG

WebP and PNG

A WebP image is up to about 25-30 percent smaller than a PNG, without 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 30.1 percent smaller than the PNG version. I chose 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

PNGs are not suitable for photographers because they create a significantly 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, where many elements often come together.

PNG is available in PNG-8 and PNG-24 formats. PNG-8 uses an 8-bit color depth and a maximum of 256 colors. PNG-24 uses a 24-bit color depth with up to 16.7 million colors. 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.

jpg vs webp

Based on the two images, we can say that the WebP image is 24.7% smaller than the JPG version. For the JPG version I set the quality to "High".

The JPG format is suitable if you can live with quality loss and 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.  

Little hint:

How images ultimately look to you depends on many factors: for example, the screen resolution (HD, QHD, UHD/4K, 8K, etc.), the screen setting such as sRGB, adobeRGB, the respective display mode of your monitors, as well as the device with which you view the images. Recently, I myself had the problem that my images looked different on my screen and the website. 

My Tip: Nowadays all browsers are in sRGB mode. So if you create something for the web in Photoshop, set your monitor to sRGB. Then you can see directly how it looks like when it lands on your site . 🙂

Color space/depth

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

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

The YUV420 format broken down: First, let's look at how a monitor displays an image by default: Each color can be represented by three colors (known as the 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 color. 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 provides 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 get the most visitors.

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

Current support for desktop browsers

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

What are the requirements for 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. Since server-side caching is RAIDBOXES already integrated, 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 ability to change anything in 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 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 WordPress was 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 to see hidden files. Of course, this assumes that you have access rights or even host yourself and use an FTP program like FileZilla.

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

Final thoughts

Unfortunately, WebP is not yet commonplace like JPG and PNG, but it will certainly become more and more important in the future. After all, WebP can improve the performance of your site 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.

For whom is WebP suitable at all?

WebP is in principle useful for any site . Of course, the format is particularly suitable for websites with many images. For example, for photographers who want to keep their image quality as high as possible, but still attach great importance to a fast loading time. But also other WordPress users such as creatives or those who have something to show in pictorial form should do everything they can 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 hearing what you think! 

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

Comments on this article

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 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

h
hamed 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!

G

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?

Atul Kumar Pandey
Atul Kumar Pandey

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

Post a comment

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