WebP — a preferred image format for Android apps
Smaller app size save users time, mobile-data, and battery while downloading them from the store. We all love smaller apps!
Introduction
WebP is an image format that is developed by Google, focuses mainly on optimization and quality. One of the cool features of WebP is that it is lossless and lossy which means it supports both types of compression, unlike PNGs and JPGs. WebP is fully supported on web browsers such as Chrome, Firefox, and Opera (see the image below). On the Android side, WebP was added since API 14, so it is more than safe to use WebP on Android these days.
Even if WebP is not supported in Apple ecosystems but it will soon be supported in the future. However, there is a library for Swift called SDWebImageWebPCoder that supports it. If you want to use WebP on the web make sure you use polyfills.
Alpha Transparency
WebP also supports Transparent Background like PNGs, so it is a good replacement for both JPGs and PNGs. Now, we have only one image format to work with.
Lossy and lossless compression
Lossy compression is a way to reduce image size by eliminating some parts or bytes, of the image, which are not noticeable by the naked eyes. The lossy format cannot be reversible to the original image quality. The most popular lossy image format is JPEG or JPG. PNG, TIFF, and GIF, on the other hand, are a lossless image format that provides a way to decrease image size without losing any quality of the image. The lossless image format can be reversed to the original format in which the original image size.
Tooling — Android Studio
Android Studio made JPGs and PNGs to WebP migrations easier by just right click on the image that needs to be converted and choose Convert to WebP…
After that, this popup will show up asking us to choose between Lossless and Lossy encoding. In this case, I am going to go with Lossy Encoding with 75% encoding quality. The less quality, the less image size will be. Click Ok to continue.
After clicking Ok the Android Studio will show us the difference between before and after converted. As we can see, the image size is reduced by 52% of its original size. That’s crazy, isn’t it? However, if everything is not looking alright we can always adjust the quality track bar below the image to increase or decrease its clarity. In this case, the image looks perfect to me so just hit Accept All, and we are done.
We can do bulk convert as well, by selecting all the images and follow the same step. You don’t have to do it one by one!
For Designers 🎨
If you are a UX/UI designer before you give Android developers Image Assets to be used in the app, make sure they are compressed and have the right sizes. Also, you should encourage the developers to use WebP over JPGs and PNGs, if they are not aware of WebP, introduce them!
In order to be able to work with WebP in Adobe Photoshop, you need to have WebpShop plugin installed.
If your design tools do not support WebP, you can do it online as well.
Do not use WebP format for icons that can be saved as SVG or VectorDrawable —A lightweight SVG in Android.
Summary 📝
In my own opinion, WebP is the best replacement for PNG and JPG in Android development since it could optimize the app size to be the lowest possible. WebP format is pretty new but it is time to start using it now. I believe that it is going to be a standard image format across operating systems and browsers soon in the future.
My real story with WebP 🥳
By converting all PNG and JPG images in my company app, I could reduce the size by 50% of its original size from ~50MB to ~25MB. Too cool to be true!
