WebP for iOS
v1.6.0iOSWebP 1.6.0 for React Native apps on iOS, precompiled for arm64 devices and simulators as @crossbind/port-webp-ios.
npm install @crossbind/port-webp-ios@betaInstall
The whole flow, including Expo, is in the React Native playbook.
Usage
The examples the WebAssembly page runs, as iOS compiles them: the same headers and the same calls. They are checked on the WebAssembly build.
Encode pixels to WebP and decode them back
The simple API most code starts with: WebPEncodeRGBA at a quality, WebPEncodeLosslessRGBA, WebPGetInfo for the size in the header and WebPDecodeRGBA for the pixels. The input is a generated 256×256 landscape with a little noise, standing in for a photo.
1.6.0 256x256 RGBA 262144 B -> lossy q80 1966 B, lossless 87058 B true
Tune the encoder and measure what it gave away
The advanced API: WebPConfigPreset picks settings for the kind of image, then method, sharp YUV and a target size adjust them before WebPEncode. WebPPlaneDistortion measures PSNR and SSIM against the original, so a quality can be chosen by numbers.
photo q50: 1300 B, PSNR 33.64 dB, SSIM 0.8993 photo q75: 1658 B, PSNR 34.26 dB, SSIM 0.9047 photo q90: 4388 B, PSNR 35.02 dB, SSIM 0.9133 photo q75, method 6, sharp YUV: 1708 B, PSNR 34.58 dB, SSIM 0.9050 photo, 3000 B target: 3000 B, PSNR 34.83 dB, SSIM 0.9097
Keep transparency, and decide what happens under it
A lossy WebP stores alpha in a plane of its own: alpha_quality 100 keeps it exact, lower values trade it for bytes. Lossless keeps every visible pixel, but may change the colour under fully transparent pixels to compress better unless exact is set.
lossy q80, alpha quality 100: 1890 B, alpha unchanged: true lossy q80, alpha quality 50: 1472 B, alpha unchanged: false lossless: 1710 B, identical: false lossless, exact: 1982 B, identical: true
Inspect a WebP, then decode only what you need
WebPGetFeatures reads size, alpha, animation and lossy or lossless from the header. WebPDecode with a WebPDecoderConfig scales to a thumbnail or crops a region while it decodes. The file comes from the first example's encoder.
256x256 lossy, alpha: false, animated: false 256x256 lossless, alpha: false, animated: false thumbnail 64x64: 16384 B, the sun at (45, 17) is rgba(251, 211, 93, 255) region 60x60 from (150, 40): 14400 B, its centre is rgba(251, 211, 93, 255)
What is different on iOS
pod installcompiles your headers with the library through the plugin's podspec, and the app build links the result.- Named imports from
./native/<header>.hwork as on the web:await initNative()once, then call the classes. - There is no
m.FSand no/memfs: files live in the app's own storage, and your C++ takes their paths. - No Worker and no COOP or COEP:
runtime: 'mt'uses pthreads directly.
Other platforms
- WebP overview: the apps, every platform's setup and the packages.
- WebP for WebAssembly: browsers, Node.js and edge runtimes.
- WebP for Android: React Native apps on Android.
- WebP for WASI: command-line programs under wasmtime.
Facts on this page come from the port manifests in the repository and from what npm served on beta when the site was built. See the Libraries guide for the full consumer flow.