React-native-imagemin-asset-plugin NPM

react-native-imagemin-asset-plugin

Metro Asset plugin for compressing images in React Native.

Minify PNG, JPG, JPEG images or convert them to WEBP image with imagemin

Install

yarn add -D react-native-imagemin-asset-plugin imagemin

npm install --save-dev react-native-imagemin-asset-plugin imagemin

Warning
imagemin uses plugin to optimize/generate images, so you need to install them too

Configuration

You can configure the plugin behaviour through the optional imageminAssetPlugin field in your metro.config.js file under the transformer section.

Explore the options to get the best result for you.

Recommended imagemin plugins for lossless optimization

npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo --save-dev

Recommended imagemin plugins for lossy optimization

npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo --save-dev

For imagemin-svgo v9.0.0+ need use svgo configuration

metro.config.js (React Native Cli)

module.exports = {
  transformer: {
    // ...
    assetPlugins: ['react-native-imagemin-asset-plugin'],
    imageminAssetPlugin: {
      cacheDir: '.compressed-images',
      minimizer: {
        implementation: 'imagemin',
        options: {
          // Lossless optimization with custom option
          // Feel free to experiment with options for better result for you
          plugins: [
            ["gifsicle", { interlaced: true }],
            ["jpegtran", { progressive: true }],
            ['pngquant'],
          ]
        }
      }
    },
  },
};

metro.config.js (Expo Go)

// Learn more https://docs.expo.io/guides/customizing-metro
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);

// use plugin to compress assets
config.transformer.assetPlugins.push('react-native-imagemin-asset-plugin');
config.transformer.imageminAssetPlugin = {
  cacheDir: '.compressed-images',
  minimizer: {
    implementation: 'imagemin',
    options: {
      // Lossless optimization with custom option
      // Feel free to experiment with options for better result for you
      plugins: [
        ["gifsicle", { interlaced: true }],
        ["jpegtran", { progressive: true }],
        ['pngquant'],
      ]
    }
  }
}

module.exports = config;