Forked from dbasedow/react-native-webp
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.
- 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
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.
- 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'
}
...
- Build a new binary, and use
.webp
formatted images
yarn add TGPSKI/react-native-webp-support
- Open your project in Xcode
- Add
WebP.framework
andWebPDemux.framework
from node_modules/react-native-webp-support/ to your project files (Right click your project and select "Add Files to ...")- [Alternative] Drag
WebP.framework
andWebPDemux.framework
from node_modules/react-native-webp-support/ to project_root/ios
- [Alternative] Drag
- Add
WebP.framework
andWebPDemux.framework
to yourLinked Frameworks and Libraries
in the General tab of your main project target - Add "$(SRCROOT)/../node_modules/react-native-webp-support" to your
Framework Search Paths
, located in the Build Settings tab of your main project target- [Alternative] Ensure $(PROJECT_DIR) is in your
Framework Search Paths
- [Alternative] Ensure $(PROJECT_DIR) is in your
- Add
$(SRCROOT)/../node_modules/react-native-webp-support
to yourHeader Search Paths
, located in the Build Settings tab of your main project target - Add
ReactNativeWebp.xcodeproj
from node_modules/react-native-webp-support/ to your project files (Right click your project and select "Add Files to ...") - Add
libReactNatveWebp.a
to yourLink Binary with Libraries
step, located in the Build Phases tab of your main project target - Build a new binary, and use
.webp
formatted images
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.
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.
PNG vs. WebP Image Formats, Andrew Munsell Blog
PNG to WebP – Comparing Compression Sizes
Download & install cwebp and dwebp with your favorite package manager (compression and decompression).
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
du -sh $DEST_DIR
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
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