Reduce your App Size by using WebP Image format in Android Studio

Umar Saidu Auna
4 min readFeb 28, 2020

--

Did you notice your app size is needlessly large and figured your app resources specifically images are the culprit for this? If Yes, then Webp is for you… 😀😀😀

What is Webp

WebP is an image file format from Google that provides lossy compression (like JPEG) as well as transparency (like PNG) but can provide better compression than either JPEG or PNG. Lossy WebP images are supported in Android 4.0 (API level 14) and higher, and lossless and transparent WebP images are supported in Android 4.3 (API level 18) and higher. This article shows how to convert images to WebP format and with a bonus section of how to convert a WebP to PNG.

One of the best things about WebP images it’s reduces the image size without reducing the image quality.

Why WebP

WebP is an incredibly useful format because it offers both performance and features. Unlike other formats, WebP supports both lossy and lossless compression, as well as transparency and animation. Even with these features, WebP provides consistently smaller file sizes than its alternatives. In a comparative study of these image formats, it was found that WebP lossy images were on average 30% smaller than JPGs and WebP lossless images were on average 25% smaller than PNG.

https://bitsofco.de/why-and-how-to-use-webp-images-today/

How to use Webp in Android Studio

Step 1: Right click on your image, scroll down and click on the convert to WebP as shown in the below screenshot:

Step 2: Just click on it & then you will see the dialog like the screenshot below, Select either lossy or lossless encoding. Lossless encoding is only available if your minSdkVersion is set to 18 or higher. If you select lossy encoding, set the encoding quality, and choose whether or not to view a preview of each converted image before saving.

Step 3: Adjust the encoding quality according to your need by dragging the slider left or right to change the quality setting and immediately see the effect on the image and the file size. In this case we are setting the image quality to 75% and then click the finish button and your images are converted in their original location i.e the drawable folder. See the screenshot below:

Convert WebP images to PNG

To convert a WebP image to PNG, proceed as follows:

  1. Right click on a WebP image in the Android Studio, then click Convert to PNG.
  2. A dialog appears, asking if you would like to convert the image to PNG, deleting the original WebP file, or keep the original WebP file as well as the new PNG file. Click Yes to delete the original WebP file, or No to retain the WebP file in addition to the PNG file. Your image is converted immediately.

Conclusion

WebP allowed us to reduce the size of images, making it way smaller and without reducing the image quality.

Thanks for reading this article. Be sure to clap and recommend this article if you found it helpful. It means a lot to me.

Chat me up on Twitter or Linkedin

Thank you AuwalMS, Habeeb, Nsikak and Pius for proof reading

References

📝 Save this story in Journal.

👩‍💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.

--

--

Umar Saidu Auna

Kotlin Evangelist and Flutter Warrior | Tech Community Organizer, GDG Minna | Volunteer @nrcs_ng