WP WebPNative

This module provide a reliable webp solution, without configuration.
Supported file formats are JPEG and PNG up to 8 megabytes.

Module look for compatible media images, sends them to an API which is convert them.
They are saved next to the original file.
When a visitor is on your site, “HTML Transformation” function take care to provide the WebP version.
This function can be disabled because some web server takes care of presenting the file themselves.

The installation is like any other plugin:

Automatic installation:
Install it from WordPress plugins repository, activate it.

Manual installation:
Unzip files under /wp-content/plugins directory, activate it.

Automatic uninstallation:
Use WordPress built-in extension manager.

Manual uninstallation:
– remove plugin directory /wp-content/plugins/wp-webpnative

Does it support non-WebP browser like Safari?

Yes, this is supported when using the html transformation function.

Does I need a PHP specific module?

No, you don’t.
The compression is done on several remote servers.

What is HTML modification?

This is the process of modifying the final HTML content of your page,
it will verify that the images are available in WebP format so that the client is WebP compatible.
If these last two cases are valid, the content will be update to present the image in WebP format.

How use Apache rule

Disable HTML transformation on module configuration page

add to .htaccess:

<IfModule mod_setenvif.c>
  SetEnvIf Request_URI "\.(jpe?g|png)$" REQUEST_image
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
  RewriteRule (.+)\.(jpe?g|png)$ $1.webp [T=image/webp]
</IfModule>

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

<IfModule mod_mime.c>
  AddType image/webp .webp
</IfModule>

How use Nginx rule

Disable HTML transformation on module configuration page

Add to /etc/nginx/conf.d/webp.conf:

map $http_accept $webp_suffix {
  default "";
  "~*webp" ".webp";
}

Add to your vhost file:

location ~ \.(png|jpe?g)$ {
  add_header Vary "Accept-Encoding";
  try_files $uri$webp_suffix $uri =404;
}

1. 

   Exemple

2. 

   General configure

1.0

• Initial version