react-native-webp-support

Forked from dbasedow/react-native-webp

After running pod install in the ios directory, grab the WebP and WebPDemux files from node_modules/react-native-webp-support folder and DRAG the WebP and WebPDemux files to the WebP.framework and WebPDemux.framework folders in the ios folder in xcode inside the Development Pods/Webp folder.

react-native-webp-support adds support for WebP images for react-native components. This fork includes additional documentation to help users incorporate WebP support into their projects.

Why???

• We reduced our CodePush bundle size by 66% with .webp format
• We also reduced iOS and Android binary sizes by 25% with.webp format
• React Native JS Thread feels so much faster
• Navigator transitions are so much smoother

Overview

Android support: built out of the box with an available library from Google.

See react-native Image API documentation for more details, or follow the implementation guide below.

iOS support: Add WebP / WebPDemux frameworks and link react-native-webp.xcodeproj to your project.

Installation

Android

1. Add the following dependency to android/app/build.gradle:

...

dependencies {
  ...
  // For WebP support, including animated WebP
  compile 'com.facebook.fresco:animated-webp:1.3.0'
  compile 'com.facebook.fresco:webpsupport:1.3.0'

  // For WebP support, without animations
  compile 'com.facebook.fresco:webpsupport:1.3.0'
}
...

2. Build a new binary, and use .webp formatted images

iOS

1. yarn add TechtonicGroup/react-native-webp-support
2. open the Podfile in the ios directory.
3. paste the following line after the target do, pod 'Webp', :path => '../node_modules/react-native-webp-support'
4. drag the WebP and WebPDemux files to the WebP.framework folder above the Headers folder and the WebPDemux.framework folder above the Headers folder.

In general, I don't trust react-native link. I have generated a few bugs using this feature. Manual linking is my go-to for all dependencies.

Usage

You don't have to do anything other than use WebP images. This project adds a custom RCTImageDataDecoder to your project, so all react-native components should be able to use WebP files. If you are using custom components that work with UIImages directly (without using RCTImageDataDecoder) you will have to change that code.

WebP Format Notes

WebP Compression Study

PNG vs. WebP Image Formats, Andrew Munsell Blog

PNG to WebP – Comparing Compression Sizes

Support Libraries

Download & install cwebp and dwebp with your favorite package manager (compression and decompression).

Google WebP Developer Page

Google WebP Downloads

Converting images to WebP Format

SOURCE_DIR=/your/path/here
DEST_DIR=/your/path/here
WEBP_QUALITY=70

cd $SOURCE_DIR
for f in *.png; do
  echo "Converting $f to WebP"
  ff=${f%????}
  echo "no ext ${ff}"
  cwebp -q $WEBP_QUALITY "$(pwd)/${f}" -o "${DEST_DIR}/${ff}.webp"
done

File Size Comparison

Source images

du -sh $DEST_DIR

CodePush Bundle Size

REACT_NATIVE_SRC_ROOT=/your/path/here
IOS_CP_DEST=/your/path/here
ANDROID_CP_DEST=/your/path/here

cd $REACT_NATIVE_SRC_ROOT

# Run react-native bundle command for iOS and Android

## iOS
react-native bundle \
    --dev false \
    --platform ios \
    --entry-file index.ios.js \
    --bundle-output $IOS_CP_DEST/index.jsbundle \
    --assets-dest $IOS_CP_DEST

## Android
react-native bundle \
    --dev false \
    --platform android \
    --entry-file index.android.js \
    --bundle-output $ANDROID_CP_DEST/main.jsbundle \
    --assets-dest $ANDROID_CP_DEST

# Find unbundled size

IOS_ASSET_DIR=$IOS_CP_DEST/App/Images

IOS_BUNDLE_SIZE=$(du -sh $IOS_CP_DEST/index.jsbundle | awk '{$NF="";sub(/[ \t]+$/,"")}1')
IOS_ASSET_SIZE=$(du -sh $IOS_ASSET_DIR | awk '{$NF="";sub(/[ \t]+$/,"")}1')

ANDROID_BUNDLE_SIZE=$(du -sh $ANDROID_CP_DEST/main.jsbundle | awk '{$NF="";sub(/[ \t]+$/,"")}1')
ANDROID_ASSET_SIZE=$(du -sh $ANDROID_CP_DEST/drawable-* | awk '{$NF="";sub(/[ \t]+$/,"")}1')

echo IOS_BUNDLE_SIZE $IOS_BUNDLE_SIZE
echo IOS_ASSET_SIZE $IOS_ASSET_SIZE

echo ANDROID_BUNDLE_SIZE $ANDROID_BUNDLE_SIZE
echo ANDROID_ASSET_SIZE $ANDROID_ASSET_SIZE

# Find bundled sizes

zip -r ios-cp-archive.zip $IOS_CP_DEST
zip -r android-cp-archive.zip $ANDROID_CP_DEST

IOS_CP_COMPRESSED_SIZE=$(du -sh ios-cp-archive.zip | awk '{$NF="";sub(/[ \t]+$/,"")}1')
ANDROID_CP_COMPRESSED_SIZE=$(du -sh android-cp-archive.zip | awk '{$NF="";sub(/[ \t]+$/,"")}1')

echo IOS_CP_COMPRESSED_SIZE $IOS_CP_COMPRESSED_SIZE
echo ANDROID_CP_COMPRESSED_SIZE $ANDROID_CP_COMPRESSED_SIZEsta

Add WebP Image Preview to OSX

WebPQuickLook

From the repo above

By default, OS X doesn't provide preview and thumbnail for all file types. WebP is Google's new image format and OS X doesn't recognize the .webp files. This plugin will give you an ability to see previews and thumbnails of WebP images.

curl -L https://raw.github.com/romanbsd/WebPQuickLook/master/WebpQuickLook.tar.gz | tar -xvz
mkdir -p ~/Library/QuickLook/
mv WebpQuickLook.qlgenerator ~/Library/QuickLook/
qlmanage -r