Skip to main content

Step-by-Step Guide to Convert PNG or JPEG(JPG) images to WebP format

What is WebP ? WebP is a modern image format from Google.

jpeg png to webp

  • WebP provides lossy compression like JPEG(JPG) as well as lossless compression like PNG for images on the web.
  •  Lossless WebP also supports transparency (also known as alpha channel) similar to traditional PNG format.
Thus, WebP images provides best of both worlds from JPEG and PNG.
Using WebP developers can create smaller sized images  suitable for the web which makes the websites load significantly faster than traditional JPEG or PNG.
Android APK size can also be reduced if project assets are properly converted to WebP format.
To learn more - WebP

For Android ,
  • Lossy WebP images are supported in Android 4.0 (API level 14) and higher - minSdkVersion of 14
  • Lossless and Transparent WebP Images are supported in Android 4.3 (API Level 18) and higher - minSdkVersion of 18 
This guide will help you learn to convert PNG or JPEG images into WebP using Android Studio. Similarly you can also convert other supported formats as well.

Using Android Studio we can convert PNG, JPEG, BMP or static GIF images into WebP format

step 1 : Load your android app project with images using Android Studio

We have added test - jpeg and test - png images into the images folder

Add Images to Project
Add Images to Project

step 2 : Convert the jpeg image to WebP

  • Right click on the image or the folder containing images to be converted in your Android Studio 
  • Select "Convert to WebP..." option 
Android Studio - Convert to WebP
Android Studio - Convert to WebP
"Converting Images to WebP" dialog box will appear.
  • Keep the defaults settings.
    • Lossy Encoding
    • Quality 75 %
  • Make sure "Preview/Inspect each converted image before saving" is checked 
  • Make sure "Skip files where encoded result is larger than the original"
Note : Backup your images as this tool will overwrite the existing jpg or png image.

Converting Images to WebP
Converting Images to WebP
Click OK

In Lossy Encoding option, a Preview Window is shown to adjust the quality of image after compression.(This appears as we have selected "Preview/Inspect each converted image before saving" option in previous dialog box).
  • Original JPEG Image on the left and lossy encoded WebP Image on the right.
  • Also shows file size and encoded image preview.
  • The middle area shows the pixels that differ between the original and the encoded image.
  • 75 % Default Quality works best in most of the cases and there is almost no difference between the two image.
You can try and play around with the quality percentage settings to adjust according to your project requirements.

Note : If you set the quality percentage to 100 % and the minSdkVersion is set to 18 or higher, Android Studio automatically switches to lossless encoding instead.
Skip images with transparency/alpha channel checkbox is automatically selected if your minSdkVersion is lower than 18

Click Next or Finish

Your converted images are available in original image location
Note : converted images overwrite the existing jpg or png image

Convert the PNG image to WebP
Similarly, we can convert png image to WebP using the same steps as mentioned above.


step 5 : Results Summary

We can create significantly smaller sized images using WebP format
  • JPEG vs WEBP
    • JPEG 168.1 KB (Before)
    • WebP 31.1 KB (After - 18 % of Original Size)
    • PNG 387.1 KB (Before)
    • WebP 30.7 KB (After - 7% of Original Size)
Also try lossless encoding, but usually the file size is larger than the lossy encoding.So prefer lossy encoding unless you require transparency or greater quality and size reduction is not your concern.
Lossless encoding converts instantly no preview available & You converted images are available in the same original image location.

Bonus Tip : Convert WebP images back to PNG
  • Right click on a WebP image in Android Studio
  • Search for "Convert to PNG" option
  • A dialog box will appear, asking if you would like to "Convert Image to PNG and delete the WebP File" or "Convert Image to PNG and Keep The WebP file" 
  • Select appropriate action - "YES" or "NO"
  • Your image will be converted instantly
Android Studio - Convert To PNG
Android Studio - Convert To PNG

Useful Resources

Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited.The materials(images, logos, content) contained in this web site are protected by applicable copyright and trade mark law.

Android, the Android logo, Google and the Google logo are registered trademarks of Google LLC.

Popular posts from this blog

Step-by-Step Guide to create a new flutter project using Visual Studio Code [VS Code]

This is a beginner's guide to visual studio code and flutter. VS Code is a light weight editor with flutter app development, execution and debug support. Visual Studio Code is a source-code editor developed by Microsoft. Install latest stable version of VS Code Install the Flutter and Dart plugins In VS Code "Extensions" Tab, search field type flutter, select "Flutter" in the list and click "Install". Flutter plugin also installs the required Dart plugin. Validate your flutter setup using "flutter doctor command". Once Flutter SDK and your VS Code Editor is up and running, Flutter Visual Studio Code To Create a new flutter project from the flutter starter app template follow the below steps step 1 : Open Command Palette Use Shortcut key - Ctrl+Shift+P or Cmd+Shift+P on macOS OR Go to View Menu, select "Command Palette" VS Code Command Palette step 2 : Create Flutter New Project Sele

Step-by-Step Guide for Flutter Android APK Signing and Release

In this guide we will learn how to sign the release version of apk or aab(android app bundle) to publish our flutter app to android play store. flutter release apk How to sign the apk or app bundle created using flutter ? To publish your app on Play Store, you need to give your app a digital signature. step 1 : Create a new keystore file ; if you have an existing keystore , skip this step Run command in your terminal for linux/mac keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key On Windows, use the following command: keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias key Fill in the required info inside the terminal Enter keystore password: test@12345 Re-enter new password: test@12345 What is your first and last name? [test]: test What is the name of your organizational unit? [test]: test

Step-by-Step Guide to take a App Screenshot with the Device Frame using Android Studio

This guide will help you to take a screenshot with the device frame using android studio. If we capture screenshot using the default android emulator "Capture Screenshot" option, then screenshot will not have the device frame. Android Emulator - Screen Capture By using android studio we can capture screenshot with different devices frame. How to take a App Screenshot with the Device Frame using Android Studio step 1 : Load your project in android studio and run the app Open Android Studio Load your android app project in android studio.  Build and Run your app using android emulator or a connected physical device.  If you are using a physical device make sure that you have enabled USB DEBUGGING option. Android Studio - Load Project step 2 : Open Logcat in Android Studio Check out bottom left corner in android studio to find Logcat option and click to open Logcat If it is not visible then select "View Menu" and search for