Star InactiveStar InactiveStar InactiveStar InactiveStar Inactive
 
webp.png

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:
    2webp1.0.0
    (0 votes)

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

    Date 2018-11-22
    System  Linux
    File Size 885 B
    Download 20

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.

images directory jpg png webp

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 to support 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é.

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.

webp image in the browser

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! 

blog comments powered by Disqus

About

Read about IT, Migration, Business, Money, Marketing and other subjects.

Some subjects: FusionPBX, FreeSWITCH, Linux, Security, Canada, Cryptocurrency, Trading.