What is the WebP format?
WebP is an image format developed by Google in 2010 with the goal of reducing image size without losing quality. WebP supports both lossy and lossless compression, as well as alpha channel (transparency) and animations.
Among its main advantages over other formats are:
- •Smaller file sizes: reduces between 25% and 34% compared to JPEG or PNG.
- •Transparency support: like PNG, but more efficient.
- •Better loading performance: improves Web Performance Optimization (WPO).
- •Lower bandwidth usage: especially useful for mobile users.
Browser support
Currently, more than 95% of modern browsers (Chrome, Firefox, Safari, Edge, Opera) support WebP in both static and animated versions. This makes its widespread use safe for almost any web context.
Configure Liferay to support WebP images
Below, we guide you through the Liferay configuration so you can upload, manipulate and display images in WebP format within the portal environment.
ImageMagick installation
Liferay relies on external libraries for image manipulation. In this case, it is necessary to have ImageMagick installed, a powerful software for image conversion and editing from the command line.
Configure WebP support in the media library
For Liferay to recognize WebP format as valid, you must edit the configuration file of allowed MIME types. This can be done by modifying the portal-ext.properties file with the following property
dl.file.entry.preview.image.mime.types=\
image/bmp,\
image/gif,\
image/jpeg,\
image/png,\
image/tiff,\
image/webpConfigure WebP support in the image selector
Liferay's image selector filters files by type, and it is necessary to enable WebP manually.
You must go to Control Panel -> System Settings -> Documents and Media -> Image Selector View and add '.webp' at the end
Configure WebP support in Adaptive Media
If you are using Adaptive Media in Liferay to manage responsive image versions, it is also possible to enable WebP.
You must go to Control Panel -> Adaptive Media -> Images and add 'image/webp' at the end
And that's it. From now on you can use images in webp format like any other image type and you will be able to improve the WPO of your pages.