Page MenuHomePhabricator

[android] Convert `splash_background` JPEGs to WEBP
ClosedPublic

Authored by atul on Jun 27 2022, 5:03 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Dec 16, 11:55 PM
Unknown Object (File)
Sun, Dec 15, 4:56 PM
Unknown Object (File)
Nov 9 2024, 6:47 PM
Unknown Object (File)
Nov 9 2024, 3:34 PM
Unknown Object (File)
Nov 9 2024, 2:55 PM
Unknown Object (File)
Oct 22 2024, 5:21 AM
Unknown Object (File)
Oct 7 2024, 1:25 PM
Unknown Object (File)
Oct 7 2024, 4:42 AM
Subscribers

Details

Summary

Similarly to D4369, by doing this ahead of time we save some time during the build.

In this case we didn't do a lossless conversion, we did a lossy JPEG => WEBP conversion at 95/100 quality. This reduced file sizes by ~90% and saved ~3.2MB total.

Context: https://developer.android.com/studio/build/optimize-your-build#use_webp


Depends on D4369

Test Plan

Things continue to look as expected when launching app on Android emulator.

Diff Detail

Repository
rCOMM Comm
Lint
Lint Not Applicable
Unit
Tests Not Applicable

Event Timeline

atul requested review of this revision.Jun 27 2022, 5:12 PM

Phabricator doesn't show webp images, but I'm assuming they are correct.

Is the difference in quality noticeable in any way? Why have we decided to use lossy here and lossless in the previous diff?

By the way, it seems like the images are really simple - only a couple of white dots. If we want to save even more space, we can probably store only the positions and sizes of dots and generate the images on the client.

This revision is now accepted and ready to land.Jun 28 2022, 4:13 AM

Why have we decided to use lossy here and lossless in the previous diff?

According to the Android Developer link @atul shared:

Lossless encoding is only available if your minSdkVersion is set to 18 or higher.

I tried opening the "Converting Images to WebP" dialog by right-clicking on splash_background.jpg, but it says "Current minSdkVersion is unknown:"

image.png (988×1 px, 274 KB)

The project's minSdkVersion is defined in the top-level build file:

image.png (1×1 px, 202 KB)

Looks like it's 21, so not sure why it's unknown. If we can figure out how to set the minSdkVersion correctly so that the "Converting Images to WebP" dialog no longer thinks it's unknown we should be able to do lossless compression. Otherwise, I think lossy is the only way to go (although I don't know if the quality is that different, but as you said it's just a bunch of dots so it probably didn't suffer too much at 95%).

Just because I was curious, I looked up some JPEG vs WebP statistics and found this study. The conclusion:

We observed that the average WebP file size is 25%-34% smaller compared to JPEG file size at equivalent SSIM index. The SSIM vs bpp plots showed that WebP consistently required less bits per pixel than JPEG for the same SSIM index. These results indicate that WebP can provide significant compression improvements over JPEG.

So quality-wise we should be good. And I agree with your idea of generating the dots on the client-side, that would save space.

Edit: actually trying to go through with the lossless conversion for a JPEG file on Android Studio results in this error:
{F85902}

But lossless conversion works for PNG to WebP in Android Studio, even though the minSdkVersion is unknown. Not sure why, but that's probably why @atul did lossy conversion in this diff and lossless in the last one.

Is the difference in quality noticeable in any way? Why have we decided to use lossy here and lossless in the previous diff?

Any possible difference was imperceptible to me even at high zoom levels (thought I'm guessing it's the color gradient vs the "sharpness" of the "stars" where most of the compression is happening).

Why have we decided to use lossy here and lossless in the previous diff?

Lossless PNG => WEBP conversion still brought down file sizes a good amount and the files were pretty small to begin with.

"Lossless" JPEG => WEBP conversion didn't affect file sizes, whereas even with a quality of 95 we were able to reduce file sizes by ~90%.

If we want to save even more space, we can probably store only the positions and sizes of dots and generate the images on the client.

We probably could do something like that, but I'm not sure how we would go about doing that. I know we do some more involved stuff with the splash screen already (iOS vs Android, dev vs release, something about expo), so I'd guess it's a lot more effort than it's worth for marginal space saving.

rebase after cherrypicking and before landing

This revision was landed with ongoing or failed builds.Jun 28 2022, 8:37 PM
This revision was automatically updated to reflect the committed changes.