WMS WebP output format¶
This module adds the WebP WMS output format.
WMS GetMap Request: FORMAT=image/webp
Advantages of the WebP image format compared to other formats:
- WebP lossy images are about 30% smaller than comparable JPEG images.
- WebP supports transparency, typically providing 3x smaller file sizes compared to PNG.
- WebP supports paletted images, typically providing 20% smaller file sizes compared to PNG.
Attention! Unfortunately, all the advantages of the WebP format regarding file size are negated by a more complex, time and energy-consuming processing.
However, the WebP format could serve as an input format for the GWC and then play out the advantages again. Work is in progress.
Read more about it here: WebP processing
Only in exceptional cases where a slow internet connection is given (e.g. G3) this format makes sense.
WebP is supported by all modern browsers (caniuse). However, backwards compatibility can be built in on the client side. Use Google’s recommended function to detect with Javascript if the browser supports WebP. Be aware that the used image-loading is non-blocking and asynchronous. Any code that depends should preferably be put in the callback function.
Example for OpenLayers v7 WebP browser support check via javascript:
...
import ImageLayer from 'ol/layer/Image';
import ImageWMS from 'ol/source/ImageWMS';
...
function check_webp_feature(feature, callback) {
... // code from google link above
}
check_webp_feature('lossless', function (feature, isSupported) {
let wmsoutputformat = 'image/webp'
if (!isSupported) {
wmsoutputformat = 'image/png'
}
var wmsLayerSource = new ImageWMS({
params: {'LAYERS': 'yourLayerName','FORMAT': wmsoutputformat},
...
});
... // your OL code
});
Because native libraries are used, not all platforms are supported. For those supported, no additional native library needs to be installed though. The plugin is based on Java ImageIO WebP support, here you can find further information. If your platform is not supported, there are instructions for compiling the native library. In this case, do not forget to contribute.