Explained: The 3 Key Principles Of Web Animation
Web animation is a great tool to engage your visitors, demonstrate a product or service, or to simply make your webpage...
For those readers who are not familiar with the term: WebP is a relatively new image format developed by Google to help speed up the web. It was designed to use a better optimised and more aggressive compression algorithm than JPEG and PNG, with the aim of creating smaller files without significant loss in quality. Smaller file sizes of course mean faster loading times and lower data usage, both of which are loved by website visitors.
How successful was Google in realising these objectives? And are there hidden drawbacks when using WebP images?
Let’s first look at the benefits of using this image format:
Smaller file sizes without a noticeable loss in image quality
A number of different factors determine exactly how much smaller a WebP image file is than its JPEG counterpart. Google claims that the average reduction in size amounts to between 25 and 35 percent. The company also claims that when they converted YouTube thumbnails from JPEG to WebP the result was an increase of 10 percent in page loading speed.
WebP image file sizes are also around 26 percent smaller than their PNG counterparts.
Both types of WebP images (lossless and lossy) provide native support for transparent images. When it comes to the web, transparent images are amazingly useful. One can, for example, use them for branding purposes such as logos. JPEG images, on the other hand, do not offer support for transparency.
A combination of the best features
The WebP format combines some distinctive features offered by the GIF, JPG, and PNG formats in a single file format. WebP, for example, supports animation similar to GIF. This is a feature not offered by JPEG files. In tests run by the Hongkiat website, the resulting animated GIF file size was reduced by nearly 10 percent when converted to the WebP format.
Both lossy and lossless compression options
WebP uses both ‘lossless’ and ‘lossy’ compression options. The former delivers better image quality, but a bigger file size. The latter offers a smaller file size, but somewhat reduced image quality. What is particularly useful in this regard is that one can adjust the degree of lossy compression, i.e. the user can select the desired level of trade-off between image quality and file size.
Solid browser support
In February 2020 WebP images were supported by the following browsers:
– Google Chrome, which was used by 68.78 percent of the desktop market and 61.71 percent of the mobile market
– Firefox, which had a 9.87 percent market share of the desktop market
– Microsoft’s Edge, which had a 4.7 percent share of the desktop market
– Opera, which had a 2.44 percent share of the desktop market, and a 2.14 percent share of the mobile market
– Samsung Internet, with a 6.4 percent share of the mobile market
– UC Browser for Android
Unfortunately, at this stage of its development, the WebP format still has some compatibility problems. While it is supported by the most popular browsers (see above), there are still some browsers that don’t support it. The list includes:
– Safari (22.84 per cent mobile, 8.64 per cent desktop)*
– Internet Explorer (3.7 per cent desktop)
– Firefox for iOS
*Safari version 14 will offer support for WebP from September 2020.
Photoshop also does not natively support WebP images, you have to download a plugin for this. Lightroom does not support it either. Furthermore, the format is also not supported by major native operating systems. Fortunately, for Windows there is a codex one can add.
The bottom line
WebP is an increasingly popular alternative to older image formats such as GIF, JPEG, and PNG. It offers some of the best features of these three technologies. Unfortunately, there are still some compatibility issues – but these are far fewer than five years ago, and we are sure that five years from now they will be even fewer.