A Clear Approach to Handle Images Using WebP in Android
By Felipe Cézar Paiva
No matter where you were working before, or the size of the company you were working at, as a mobile engineer this situation may have happened to you: It is the Android image problem.
We all know Android Studio is getting better and better with every release, but there are still missing details when it comes to images and visuals on Android… This small problem can actually make a big difference, not only for your user experience, but for your project functionality too. Luckily, Android Studio (since version 2.3) supports WebP formats which can make a big difference in solving the image size problem by compressing lossless images.
Now, imagine the hypothetical scenario where you receive an image as an asset for the project, but that image isn’t the ideal size. This file can add more than 20MB to your project and more than ⅓ of the entire app size can be downloaded over 3G networks. To resolve this situation, there are many options/configurations, but this is my suggestion:
- There are some plugins that will help you achieve your desired result. But in my opinion, this is one of the best plugins and it can easily import/convert one image to all the dimensions needed in Android.
See above, this simple action will help avoid many problems in older devices, or in less powerful ones, as our file size was decreased from 29.1MB to 3.7MB. in XXXHDPI.
As mentioned before, on Android Studio (after Version 2.3) you can also convert an image file to WebP which will reduce the file size even more, according to Google’s page:
“WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25–34% smaller than comparable JPEG images at equivalent SSIM quality index. And it’s just a simple action like this."
2. Then, you can do some extra adjustments if you want to change the quality of encoding, and skip files with transparency.
After that, you will see a side-by-side comparison of the original file and the final file (WebP) after layers were removed.
The final size of our image has now been further reduced from 3.7MB to 3.0 MB.
Keep an eye out for any alpha/transparency layers on your image for older projects as WebP will require API 18 for these features.
An “opaque” image means the image does not have alpha/transparency. If your minSdkVersion is at least 18, and if you have any images, it will also make the same recommendation as transparent WebP requires API 18, not 15.
If your minSDKVersion is less than 18, it looks at the actual contents of the .WebP file, and if it finds that it is using transparency or lossless encoding, it emits a warning that this requires API 18. Again, placing these folders in a -v18 or higher folder is fine.
Also with APIs less than 15, you can’t use .WebP (unless the .WebP image is in a -v15 folder or higher.)
Each of these tips will help further improve our APK size with the introduction of Android App Bundle, but let’s finish this one here because App Bundles are an entirely new topic. :)
See ya from TribalScale Dubai and cheers from the Android world! 🍻
From, Recife also know as the Brazilian Venice. I have over 7 years of experience working with mobile solutions for all kind of companies and of all sizes; I worked with Samsung R&D, IBM, Drivvo, and Ogilvy interactive. I joined TribalScale almost 7 months ago and an Android developer. During my free time I love to explore the city, photograph, and I love to play RPG’s games.
Join our fast growing team and connect with us on Twitter, LinkedIn & Facebook! Learn more about us on our website.
