Metro Asset plugin for compressing images in React Native.
Minify PNG, JPG, JPEG images or convert them to WEBP image with imagemin
yarn add -D react-native-imagemin-asset-plugin
or
npm install --save-dev react-native-imagemin-asset-plugin
Add react-native-imagemin-asset-plugin
to the list of assetPlugins
in your metro.config.js
file under the transformer section.
For example;
React Native Cli
module.exports = {
transformer: {
// ...
assetPlugins: ['react-native-imagemin-asset-plugin'],
},
};
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')
module.exports = config;
You can configure the plugin behaviour through the optional imageminAssetPlugin
field in your metro.config.js
file under the transformer
section.
For example;
module.exports = {
transformer: {
// ...
assetPlugins: ['react-native-imagemin-asset-plugin'],
imageminAssetPlugin: {
imageminDir: '.compressed-images',
pngquant: {
quality: [0.6, 0.8],
},
mozjpeg: {
quality: 60,
},
},
},
};
Option | Description | Reference |
---|---|---|
imageminDir | Name of directory to store compressed images. | Default: .shrunken |
giflossy (deprecated) |
(Lossy) Compress GIF images | https://github.com/imagemin/imagemin-giflossy |
gifsicle | (Lossless) Compress GIF images | https://github.com/imagemin/imagemin-gifsicle |
mozjpeg | (Lossy) Compress JPEG images | https://github.com/imagemin/imagemin-mozjpeg |
jpegtran | (Lossless) Compress JPEG images | https://github.com/imagemin/imagemin-jpegtran |
pngquant | (Lossy) Compress PNG images | https://github.com/imagemin/imagemin-pngquant |
optipng | (Lossless) Compress PNG images | https://github.com/imagemin/imagemin-optipng |
svgo | (Lossy) Compress SVG images | https://github.com/imagemin/imagemin-svgo |
webp | Compress JPG & PNG images into WEBP | https://github.com/imagemin/imagemin-webp |
...