React-native-webp-converter NPM

react-native-webp-converter

Easily convert PNG and JPG images to WebP format for improved image optimization and performance in React Native applications.

WebP is a modern image format that provides superior compression, saving on file size without compromising quality, making it ideal for mobile apps where performance and storage are key.

Features

PNG/JPG to WebP conversion.
Custom hook useConverter() for easy in-component conversion.
convertImage() method for more controlled use cases.
Configurable options for quality, type (lossy/lossless), and preset.

Demo

Quality comparison

Below is a top-to-bottom comparison, with the original image at the top and the compressed version at the bottom.

Low Quality Setting(quality = 5)

High Quality Settings(quality = 80)

Installation

npm install react-native-webp-converter

yarn add react-native-webp-converter

Usage

Using `convertImage`

import * as WebP from 'react-native-webp-converter'
import * as fs from 'react-native-fs';
import { useCallback, useEffect, useState } from 'react';
import { ActivityIndicator, Image, StyleSheet } from 'react-native';

export default function App() {
  const [convertedImage, setConvertedImage] = useState('');

  const convertImage = useCallback(async () => {
    const inputPath = `path-to-my-local-image.png`;
    const outputPath = `${fs.CachesDirectoryPath}/my-image-converted.webp`;

    await WebP.convertImage(inputPath, outputPath, {
      quality: 80,
      type: WebP.Type.LOSSY,
      preset: WebP.Preset.PICTURE,
    });

    setConvertedImage(outputPath);
  }, []);

  useEffect(() => {
    convertImage();
  }, []);

  if (!convertedImage) return <ActivityIndicator />;

  return (
    <Image
      source={{ uri: `file://${convertedImage}` }}
      style={StyleSheet.absoluteFill}
      resizeMode="cover"
    />
  );
}

Example Config Object

const config: WebP.WebPConfig = {
  quality: 80,
  type: WebP.Type.LOSSY,
  preset: WebP.Preset.PICTURE,
};

API

import * as WebP from 'react-native-webp-converter';

Methods

`convertImage(inputPath, outputPath, config)`

Argument	Type	Description
`inputPath`	`string`	Path to the input image file.
`outputPath`	`string`	Desired path for the output WebP file.
`config`	`WebPConfig`	Configuration options.
Returns	`Promise<string>`	Resolves to the output path of the converted image.

Configuration Options

Property	Type	Required	Description
`quality`	`number`	Yes	Defines the compression quality (0-100).
			Lossy: Represents visual quality; higher values produce better quality.
			Lossless: Indicates compression efficiency; higher values result in smaller files.
`type`	`WebP.Type`	Yes	Sets compression type.
			`Type.LOSSY`: Lossy compression.
			`Type.LOSSLESS`: Lossless compression.
`preset`	`WebP.Preset`	No	Adjusts compression settings based on image type (iOS only).
			`Preset.DEFAULT`: Standard preset.
			`Preset.PICTURE`: Ideal for portraits or indoor shots.
			`Preset.PHOTO`: Best for natural outdoor photography.
			`Preset.DRAWING`: Suited for line art or drawings.
			`Preset.ICON`: For small, colorful icons.
			`Preset.TEXT`: For images containing text.

Interfaces

`WebPConfig`

Defines the configuration for image conversion.

type WebPConfig = {
  quality: number;
  type: WebP.Type;
  preset?: WebP.Preset;
};

Enums

`Type`

Compression types for image conversion.

enum Type {
  LOSSY,
  LOSSLESS,
}

`Preset`

Specifies the compression preset based on image type.

enum Preset {
  DEFAULT, // Default preset
  PICTURE, // Portrait or indoor shots
  PHOTO, // Outdoor, natural photos
  DRAWING, // Drawings or high-contrast images
  ICON, // Small, colorful images (icons)
  TEXT, // Text-like images
}