What is the WebP format?
WebP is an image format developed by Google in 2010 with the goal of reducing image sizes without compromising quality. WebP supports both lossy and lossless compression, as well as alpha channel (transparency) and animations.
Its main advantages over other formats include:
- Smaller file sizes: compared to JPEG or PNG, WebP can reduce image sizes by an average of 25% to 34%.
- Transparency support: like PNG, but more efficient.
- Improved loading performance: being lighter, WebP images load faster, enhancing Web Performance Optimization (WPO).
- Lower bandwidth usage: especially important for mobile users.
Browser Support
Currently, all modern browsers (over 95%) — including Chrome, Firefox, Safari, Edge, and Opera — support the WebP format, in both its static and animated versions. Support is broad enough to ensure safe usage in nearly any web context.
Configuring Liferay to Support WebP Images
Here’s a guide to configuring Liferay so that you can upload, handle, and display WebP images within the portal environment.
Installing ImageMagick
Liferay relies on external libraries for image manipulation. In this case, you need to have ImageMagick installed, a powerful command-line software for image conversion and editing.
Enable WebP Support in the Media Library
To make Liferay recognize WebP as a valid format, you must edit the allowed MIME types configuration file. This is 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/pjpeg,\
image/png,\
image/tiff,\
image/x-citrix-jpeg,\
image/x-citrix-png,\
image/x-ms-bmp,\
image/x-png,\
image/x-tiff,\
image/webp
Enable WebP in the Image Selector
Liferay's image selector filters files by type, so WebP must be manually enabled.
Go to Control Panel -> System Settings -> Documents and Media -> Image Selector View and add ".webp" at the end.
Enable WebP in Adaptive Media
If you're using Adaptive Media in Liferay to manage responsive image versions, WebP can also be enabled.
Go to Control Panel -> Adaptive Media -> Images and add "image/webp" at the end.
That's it! You can now use WebP images like any other format and improve the WPO of your pages.
