Social Media

WebP Support in Android Studio

Android Studio has been able to decode .webp images in the layout renderer since 2.2, but in 2.3, there are a number of new features to help developers migrate their Android projects to WebP (and use WebP correctly.)

New Projects

If the minSdkVersion of a new project is set to API 18 or higher, the launcher icons created in newly created projects will be .webp images instead of .png.

Lint Warning: Switch to WebP

If you minSdkVersion is at least 15 and you have one or more *opaque* PNG, JPEG or BMP images (either as drawables or mipmaps or both), lint will issue a warning that you might want to switch these to .webp. This warning has an associated quickfix which will convert the images. (This is described more in detail later.)

An "opaque" image above means an image without alpha/transparency. If you minSdkVersion is at least 18, and you have any images, it will also make the same recommendation. (Transparent webp requires API 18, not 15.)

Lint Warning: Unsafe WebP

If you are already using .webp images in your project, lint will check for two things:

If you minSdkVersion is less than 15, you can't use .webp (unless the .webp image is in a -v15 folder or higher.)

If your minSdkVersion is less than 18, it looks at the actual contents of the .webp files 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.)

Convert to WebP

The IDE now has a feature which can convert either a single image or a whole directory (recursively -- such as the "res" folder) to WebP. The quickfix for the first lint warning above will invoke this, but you can also right click on any .png file, or a drawable or mipmap folder, or even the res folder itself, and then invoke "Convert to WebP":

This will open up the WebP conversion settings dialog. The default settings depend on the minSdkVersion of the current module context.

There are two types of conversions: lossy, and lossless. Note that lossless encoding requires API 18, and so does transparency. If the minSdkVersion is less than 18, the flag to "skip images with transparency" is selected by default, so if you just press OK it will run through the project and convert images that *aren't* transparent.

Android doesn't support 9-patch images from webp, so it will never convert .9.png images; the setting is there in the dialog to make it more obvious why these images are left unconverted.

Pressing OK will perform conversion for all the images. This is done as a single undoable edit, so after the conversion you can press Undo to jump back. If the project is under version control, the IDE will ask you whether you want to check in the newly converted files.

Convert to WebP Preview

If you choose lossless encoding, the conversion happens immediately / non-interactively. However, if you are doing lossy conversion, and you haven't unchecked the "Preview" checkbox in the above dialog, the IDE will show you each image and let you inspect the conversion result, as shown below:

Here you can see the PNG image on the left and the lossy encoded WebP image on the right. Below the images you can see the size of the PNG image (55KB) and the size of the WebP image (18KB, a third the size). This is using an encoding quality of 75% (which you can see on the right hand side of the slider). You can drag the slider up and down to change the encoding level -- and immediately see the effect on the encoded image and on the file size.

The middle area is showing the "delta", the pixels that differ between the two images. In this case, at 75%, there's almost no difference. If I drag the slider all the way to 0 it's more apparent:

And if I drag the slider all the way to 100%, it switches to lossless encoding instead:

(Note: It will only switch to lossless if that's safe; e.g. the minSdkVersion is >= 18.)

Convert to PNG

A lot of tools don't support .webp yet -- for example, the Preview tool on Mac OSX isn't able to open or show these images, and similarly many Adobe tools or even Gimp are unable to process .webp files. Therefore, we also have the reverse operation: Right click on a .webp image in the IDE and invoke "Convert to PNG". It will ask you whether you want to just convert the image, or export to PNG (which lets you have a PNG to edit without having to delete the corresponding .webp image). This performs a lossless conversion so there is no need to ask the user for anything else; the conversion is done directly.