React Native WebP Format

Save tens of megabytes with this simple trick...

WebP image integration for React Native apps.

By utilizing WebP instead of png/jpg you can significantly reduce the size of your app without quality loss.

Works with both Image and ImageBackground React Native components.

iOS uses SDWebImage implementation and Android utilizes Fresco to boost the gained performance even more.

Here's a detailed article with extra details and information on what is the best way to convert your regular images to WebP.

Prerequisites:

React Native version 0.61 or higher (last tested on 0.71.6). Older versions might work too, but that's not guaranteed.

Installation

yarn add react-native-webp-format

iOS

cd ios && pod install

Android

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

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

Check the example app if you have any issues. Remember to restart your packager to see the changes. If you still have any issues, try resetting the cache.

Usage

Simply replace .png or .jpg with .webp after you've converted your files <Image source={require('../../assets/close.webp')} />

Known issues

If you use Expo try this
.getSize() doesn't work on WebP images. Use instead:

const {width, height} = Image.resolveAssetSource(require('./assets/1.sm.webp'));

Multiple animated images of too large size (~5MB) may crash iOS app due to running out of memory. Possible solution

PRs are welcomed ❤️