Reduce React Native application size with WebP image format

Photo by Markus Spiske on Unsplash

Dozens of new apps appear every day in the App Store and Google Play, and it is our job to help users make the right choice ( by picking our app). There are many factors affecting their decision, but I’m going to cover one of the major ones — the size of the app, and specifically, its media files.

The most usual suspect of a bloated app case is the media assets that you use in the app. Depending on how many PNG or JPEG images you add, your app size can easily grow out of proportion. Apart from optimizing resolution and image quality, you should also keep in mind the file type that you use. Those above-mentioned file types were introduced 23–27 years ago and became outclassed by more modern solutions, such as WebP.

WebP is a modern format developed by Google which is becoming the new standard of web-based media by providing the same quality with significantly reduced size. It already got the support of the majority of modern web browsers, and until recently, only Apple was resisting the common trend. Gladly, even they gave up and announced WebP support in the next version of Safari.

The main advantage of the format is the size of the resulted image. WebP lossy images are 25–34% smaller than comparable JPEG images at the same quality level. When you have a long-term project with lots of image files introduced by your designers it really does make a difference.

“A Wild Cherry (Prunus avium) in flower”

PNG is on the left and WebP is on the right, or are they? I can’t really tell the difference, but WebP is 30% smaller even with quite generous compression settings. Check hi-res examples and comparisons on the Google website.

You can read more in detail about WebP format itself on the official Google website, but today we are going to concentrate on how to bring the advantages of this great image format into our React Native application.

Implementation

We are going to use react-native-webp-format library. Don’t be shy, give it a star! It means a lot to the author(me). Add the library to your project:

yarn add react-native-webp-format

The setup process is quite straightforward thanks to the auto-linking feature introduced with the latest React Native versions.

iOS:

cd ios && pod install

Android:

Add the following dependencies to android/app/build.gradle:

dependencies {
  ...
  implementation 'com.facebook.fresco:webpsupport:2.1.0'
  // Optionally, to display animated WebP images, you have to add:
  implementation 'com.facebook.fresco:animated-webp:2.1.0'
  ...
}

That's it! Remember to restart your packager and rebuild the React Native project to actually see the difference.

The library doesn’t require any extra imports. All you need to do is to replace .png or .jpg with .webp after you’ve converted your files

<Image source={require(‘../../assets/close.webp’)} />

NOTE: Be careful when mass-renaming your old file references. When using IDE tools like Search&Replace you can accidentally replace too much.

Converting files

There are plenty of tools and websites offering to convert your media into WebP, but you can achieve the best quality by using the official Google encoder.

NOTE: Don’t use Android Studio for converting your files. At the moment of writing this article, the output quality of AS is way worse than even the online tools available.

First, get the latest version of the encoder for your preferred operating system from the official website. We need cwebp utility to convert our image files to WebP format.

Put cwebp file into the folder with your png/jpeg assets and create a .sh script in there with the following code:

for f in *.png; do
  echo "Converting $f"
  ff=${f%????}  
  echo "no ext ${ff}"
  ./cwebp -q 75 -m 6 "$(pwd)/${f}" -o "${ff}.webp"
done

• q 75 stands for output quality. You can play around with values, but I personally found that 75% has the best quality/size ratio.
• m 6 is the compression method. Determines quality over the conversion speed. The bigger the number, the more time it takes to convert the images and the better quality output you’ll have. The default value is 4 and the biggest is 6. That’s why you don’t want to use online converters, but force your laptop to do the heavy lifting instead.

After all converting and replacing is done, you can test the application and see the results. If you have done everything correctly then you, and your users, won’t see any visual difference. But the devil is in detail, which in our case is significantly reduced application size and loading time.

The amount of saved space depends on how much media files you use in your app. But personally, by applying this technique in multiple customer and personal projects, I was able to reach an app size reduction of 20–40% from WebP alone. Let me know about your results, just don’t forget to measure “before” and “after”!

Stay tuned for an upcoming comprehensive article about all the other methods of app size optimization. I’ll cover advanced topics that will allow you to shrink your app by up to 60-80% of its original size, make the app faster, and your users happier!