Skill Level Intermediate
- [Narrator] When you package your Android applications for deployment, you create an APK file and you'll always want to keep that APK file as small as possible. One of the biggest corporates in expanding the size of the APK file is image files. When you use unoptimized JPG files or PNG files, sometimes they can be much larger than you really need and you could optimize those just like you do for the Web, but there's an even better way in Android. You can instead convert those files to a format called WebP.
This format, created by Google, retains the resolution; the clarity of the image, but creates a much smaller file and in Android Studio 2.3 and later, it's very easy to convert your existing image files to the WebP format. I'll demonstrate in this simple application that uses a number of image files. From the opening screen, when I click Run Code in this application, I'm taken to a listing and right now, it's only showing four rows, but I've provided a lot more image files that you can work with.
Whenever I select one of these rows, I'm taken to a screen that displays the associated image. I'll go back again and choose another one and show that I see that image. So, the code that I'm providing is based on one of the templates that's included with the Android Studio. There's a photo list activity and when you select an item from the list that's presented, that opens up the photo detail activity which contains the photo detail fragment. The fragment class receives the selective data and then, in this code, starting at line 72, it opens up an input stream and goes and gets the selected file from the assets directory and then, displays it in an image view component.
Notice here that I'm taking a value and appending the .jpg extension and the reason I'm using that extension is because that's the format of my current images. I'll go to my assets directory and show you all of these different images. Now, let's see what happens when I package this application as an APK. I'll go to the menu and select Build; Build APK. I'm not creating assigned APK like I would for real deployment. That's not necessary for this demonstration.
Then, I'll click Show in Explorer and here's my APK file. Notice the size. Now, I'm going to rename this, so it sticks around even after I rebuild the APK later. I'll just add JPG to the name. Now, I'll come back to Android Studio and I'm going to demonstrate converting an image to WebP format in two places. I have a copy of one of my JPG files in my drawable directory. I'm using that for design time. I'll right-click on the JPG file and down at the bottom of the context menu, I'll select Convert to WebP.
On this screen, you can set an initial encoding quality. An encoding quality of 75% means that you're getting 75% of the original resolution. There are also options for lossless encoding and for transparency, but those require a higher minimum Sdk version than I'm supporting, so I'm going to leave all the other settings alone and click okay and I'm taken to a previous screen. This screen lets you see what your image will look like before and after it's converted to WebP.
This slider lets you adjust the encoding quality. The further you move it over to the right, the higher the resolution and notice that when I move it all the way over to the right to a 100%, the resulting file size is even larger than the original JPG file. If I move it way down here, let's say to 5% of the original size, I start losing a little bit of resolution. That's a little bit blurry. So, I'll go back to accepting the original recommendation of 75% and that results in a file that's only 21% of the original file size, but retains 75% of the image quality.
I'll click Finish and as I do whenever I add a new file, I'll add this to my Git repository. I see a message saying I just saved 87 KB. Now let's do this on the assets directory, as well. I'll click to select all of my JPG files and once again, I right-click and convert to WebP. Once again, I'll accept the recommended encoding quality and now, I can scroll through and see the differences in all the files I'm about to convert.
I'll click Accept All and now I see 3.5 megabytes saved and I'll add all of those files to my Git repository. Then, I'll come back to my photo detail fragment class and I'll change the expected file extension from JPG to WebP and I'll run the application again. I'll click Run Code to go to my lists screen and I'll select an item and I see the image and I'll try a couple of more just to make sure I'm seeing all of the selected images.
Now, I'll go back to Android Studio and generate that APK file again. And here is the difference. The original APK file with JPG files was 4791 kilobytes. The new file with WebP files is 2593, so this is still a small application and it's not a huge impact, but if you take a real-production application that might package of much larger number of image files, you can see that you can significantly reduce the size of your application package.
This reduces the amount of time it takes the user to download the application from the Play Store and it reduces the amount of space it takes up on their Android device.
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.