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

or

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
}

Contributing

To contribute, see the contributing guide for setup and pull request guidelines.

License

Licensed under the MIT License.

---