Speeding Up your Website Tip: Use WebP Format

WebP is an image format employing both lossy and lossless compression. It is currently developed by Google, based on technology acquired with the purchase of On2 Technologies.

As a derivative of the VP8 video format, it is a sister project to the WebM multimedia container format. The webp-related software is released under a BSD license.

For us, as Webmasters, what it makes this interesting is that using the WebP format correctly, you can downsize your image files from 10% to 90%. I will write here how I managed to use this format in an agnostic website. You won't need to mess with your software.

Installing the Software for WebP

1. Install the libwebp-tools, in CentOS you just do a yum install libwebp-tools. If you are in another distribution, make sure you have the cwebp executable.
2. Download my 2webp script, or you can do conversions by yourself. But if you have many files on your website, I really recommend you to use it.
   
   Files:

   2webp 1.0.0HOT

   (5 votes)

   • Joomla
   • WEB
   • SEO
   • WEBP

   2webp is a little script that helps you to convert many image files into WEBP files.

    GNU/GPL

    2018-11-22

     Linux

    885 B

    1,089

   Download

Converting to WebP

In my case, my Joomla website saves almost all images in the image directory. So, I just type 2webp images/ and I wait. You will get an output like this:

Saving file 'images/cism.webp'
File:      images/cism.png
Dimension: 338 x 144
Output:    25188 bytes
Lossless-ARGB compressed size: 25188 bytes
  * Lossless features used: SUBTRACT-GREEN
  * Precision Bits: histogram=3 transform=4 cache=9
  
Saving file 'images/redhat.webp'
File:      images/redhat.jpg
Dimension: 728 x 400
Output:    3196 bytes Y-U-V-All-PSNR 51.22 51.17 48.27   50.56 dB
block count:  intra4: 92
              intra16: 1058  (-> 92.00%)
              skipped block: 1021 (88.78%)
bytes used:  header:            136  (4.3%)
             mode-partition:    871  (27.3%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       0%|       1%|       2%|      96%|    1150
      quantizer:  |      27 |      27 |      26 |      19 |
   filter level:  |      12 |       9 |       7 |       4 |

This will create you a webp version of your images.

Verifying the WebP Compression

Please note that the image sizing may vary depending on the kind of image. However, if you see the following image, the images, in general, were downsized.

Configuring the Apache Web Server to Server WebP Images

At this point, you already have the images. Now, it is time to tell your Web server to serve those files. This approach is agnostic, which I think it is the best.

1. Edit your .htaccess with the following content:
   
   RewriteEngine On
<IfModule mod_setenvif.c>
# Vary: Accept for all the requests to jpeg and png
SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

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

<IfModule mod_headers.c>
 Header append Vary Accept env=REDIRECT_accept
</IfModule>

<IfModule mod_mime.c>
 AddType image/webp .webp
</IfModule>
2. Optionally, you can add these lines as well.
   
   <filesmatch "\.(css|js|ico|jpg|png|jpeg|gif|webp)$">
 RequestHeader unset Cookie
 Header unset Cookie
 Header unset Set-Cookie
</FilesMatch>

<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresByType image/webp "access plus 1 month"
</IfModule>

These configurations will server the WebP file instead of the JPG or PNG if it exists and only if the web browser reports supporting the WebP format. Also, it will remove any cookie payload in the HTTP answer (which it is useless) and it will allow the use of the local browser caché.

Oh, before I forget, you need to change the MPM from prefork to event. In CentOS 7, you just need to edit the file /etc/httpd/conf.modules.d/00-mpm.conf.

Verifying if the Apache Web Serves WebP Images

Easy, let's analyze. From the last image, we clearly see the telegram.png (23 kB) and telegram.webp (19 kB). Using Chrome, I request manually this URL as https://inside-out.xyz/images/telegram.png?. The following screen capture explains by itself.

Check the highlighted text, 14448 bytes transmitted and content type is image/webp. That means the WebP image is being used.

Why using WebP is a Good Thing?

Regardless of all the other techniques you may be using, using WebP images (when possible) speeds up your website load in terms of downloading the elements. This means Google's speed evaluation will improve and as a consequence, you will get a better exposure because of the SEO.

Good luck!