or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-image-webpack-loader

Webpack loader that optimizes and compresses images during build process using imagemin plugins

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/image-webpack-loader@8.1.x

To install, run

npx @tessl/cli install tessl/npm-image-webpack-loader@8.1.0

Image Webpack Loader

Image Webpack Loader is a webpack loader that optimizes and compresses images during the build process. It integrates with imagemin and various optimization plugins to automatically compress PNG, JPEG, GIF, SVG, and WEBP images as part of the webpack compilation pipeline.

Package Information

Package Name: image-webpack-loader
Package Type: npm
Language: JavaScript
Installation: npm install image-webpack-loader --save-dev

Core Imports

This package is used as a webpack loader, not directly imported in application code. It's configured in the webpack configuration file:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            // configuration options
          }
        }
      ]
    }]
  }
};

Basic Usage

Basic configuration with default optimization settings:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            disable: process.env.NODE_ENV === 'development'
          }
        }
      ]
    }]
  }
};

Advanced configuration with custom optimizer settings:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            mozjpeg: {
              progressive: true,
              quality: 65
            },
            optipng: {
              enabled: false,
            },
            pngquant: {
              quality: [0.65, 0.90],
              speed: 4
            },
            gifsicle: {
              interlaced: false,
            },
            webp: {
              quality: 75
            }
          }
        }
      ]
    }]
  }
};

Capabilities

Webpack Loader Function

The main loader function that processes image content during webpack compilation.

/**
 * Main webpack loader function that processes image content
 * @param {Buffer} content - Raw image buffer content
 * @returns {void} Calls webpack callback with optimized image data
 */
function imageWebpackLoader(content: Buffer): void;

// Loader properties
imageWebpackLoader.raw = true; // Indicates loader processes raw buffers

Configuration Options

The loader accepts configuration options for controlling optimization behavior and individual optimizer settings.

interface LoaderOptions {
  /** Skip processing when webpack debug mode is enabled (webpack v1) */
  bypassOnDebug?: boolean;
  /** Completely disable the loader processing */
  disable?: boolean;
  /** JPEG optimization options via mozjpeg */
  mozjpeg?: MozjpegOptions;
  /** PNG optimization options via optipng */
  optipng?: OptipngOptions;
  /** PNG optimization options via pngquant */
  pngquant?: PngquantOptions;
  /** GIF optimization options via gifsicle */
  gifsicle?: GifsicleOptions;
  /** SVG optimization options via svgo */
  svgo?: SvgoOptions;
  /** WebP conversion options via imagemin-webp */
  webp?: WebpOptions;
}

Control Options

Options for controlling when the loader runs and whether it processes images.

interface ControlOptions {
  /** 
   * Skip processing when webpack debug mode is enabled
   * Default: false
   * Note: Only works with webpack v1
   */
  bypassOnDebug?: boolean;
  
  /**
   * Completely disable the loader processing
   * Default: false 
   * Recommended for webpack v2+ instead of bypassOnDebug
   */
  disable?: boolean;
}

JPEG Optimization (mozjpeg)

JPEG image optimization using the mozjpeg encoder.

interface MozjpegOptions {
  /** Enable progressive JPEG encoding */
  progressive?: boolean;
  /** JPEG quality (0-100) */
  quality?: number;
  /** Disable mozjpeg optimization */
  enabled?: boolean;
  /** Additional mozjpeg-specific options */
  [key: string]: any;
}

PNG Optimization (optipng)

PNG image optimization using the optipng optimizer.

interface OptipngOptions {
  /** Optimization level (0-7) */
  optimizationLevel?: number;
  /** Disable optipng optimization */
  enabled?: boolean;
  /** Additional optipng-specific options */
  [key: string]: any;
}

PNG Optimization (pngquant)

PNG image optimization using the pngquant optimizer with lossy compression.

interface PngquantOptions {
  /** Quality range as [min, max] array (0-1) */
  quality?: [number, number];
  /** Compression speed (1-11, lower is slower but better) */
  speed?: number;
  /** Disable pngquant optimization */
  enabled?: boolean;
  /** Additional pngquant-specific options */
  [key: string]: any;
}

GIF Optimization (gifsicle)

GIF image optimization using the gifsicle optimizer.

interface GifsicleOptions {
  /** Enable interlaced GIFs */
  interlaced?: boolean;
  /** Optimization level (1-3) */
  optimizationLevel?: number;
  /** Disable gifsicle optimization */
  enabled?: boolean;
  /** Additional gifsicle-specific options */
  [key: string]: any;
}

SVG Optimization (svgo)

SVG image optimization using the svgo optimizer.

interface SvgoOptions {
  /** SVGO plugins configuration */
  plugins?: Array<string | object>;
  /** Disable svgo optimization */
  enabled?: boolean;
  /** Additional svgo-specific options */
  [key: string]: any;
}

WebP Conversion

Convert images to WebP format using imagemin-webp. Unlike other optimizers, WebP is disabled by default and uses async loading.

interface WebpOptions {
  /** WebP quality (0-100) */
  quality?: number;
  /** Enable WebP conversion (disabled by default) */
  enabled?: boolean;
  /** Additional webp-specific options */
  [key: string]: any;
}

Note: WebP optimization requires async loading of the imagemin-webp plugin and is disabled by default. Set enabled: true or provide configuration options to enable WebP processing.

Usage Examples

Development vs Production

Disable optimization during development for faster builds:

// webpack.config.js
const isDevelopment = process.env.NODE_ENV === 'development';

module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            disable: isDevelopment
          }
        }
      ]
    }]
  }
};

Selective Optimizer Configuration

Enable only specific optimizers:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            // Disable PNG optimizers, keep JPEG
            optipng: { enabled: false },
            pngquant: { enabled: false },
            mozjpeg: { 
              progressive: true,
              quality: 80
            },
            // Disable other optimizers
            gifsicle: { enabled: false },
            svgo: { enabled: false }
          }
        }
      ]
    }]
  }
};

WebP Generation

Enable WebP conversion alongside original formats. Note: WebP is disabled by default and requires explicit enablement:

// webpack.config.js
module.exports = {
  module: {
    rules: [{
      test: /\.(gif|png|jpe?g|svg)$/i,
      use: [
        'file-loader',
        {
          loader: 'image-webpack-loader',
          options: {
            // WebP is disabled by default - must be explicitly enabled
            webp: {
              enabled: true,  // Required to enable WebP processing
              quality: 75
            }
          }
        }
      ]
    }]
  }
};

Deprecated Configuration Options

The following configuration options are deprecated but still supported with warnings:

// Deprecated - use gifsicle.interlaced instead
interface DeprecatedGifsicleOptions {
  /** @deprecated Use gifsicle.interlaced instead */
  interlaced?: boolean;
}

// Deprecated - use mozjpeg.progressive instead  
interface DeprecatedMozjpegOptions {
  /** @deprecated Use mozjpeg.progressive instead */
  progressive?: boolean;
}

// Deprecated - use optipng.optimizationLevel instead
interface DeprecatedOptipngOptions {
  /** @deprecated Use optipng.optimizationLevel instead */
  optimizationLevel?: number;
}

Error Handling

The loader will pass through errors from the underlying imagemin plugins and uses schema validation for configuration options. Common issues include:

Missing optional dependencies: Install required imagemin plugins
Corrupted images: The loader will call the webpack callback with the error
Plugin configuration errors: Invalid options will be caught by schema validation using schema-utils
Deprecated option warnings: Using deprecated options will emit webpack warnings

Dependencies

Required Dependencies

imagemin: Core image processing library
loader-utils: Webpack loader utilities
object-assign: Object assignment polyfill
schema-utils: Configuration validation

Optional Image Optimizer Dependencies

imagemin-gifsicle: GIF optimization
imagemin-mozjpeg: JPEG optimization
imagemin-optipng: PNG optimization
imagemin-pngquant: PNG optimization with lossy compression
imagemin-svgo: SVG optimization
imagemin-webp: WebP conversion