webpack不要、Node.jsを使用したローカル画像圧縮:sharpとimageminの比較と応用

現代のWeb開発において、画像サイズの最適化はサイトパフォーマンスを向上させるための重要なステップです。この記事では、Node.jsライブラリsharpとimageminを使用してローカル画像を圧縮する方法を紹介し、これらのツールの機能と圧縮能力を詳細に比較します。

sharpの使用

sharpのインストール

まず、npmを使用してsharpをインストールします:

Terminal window
1
npm install sharp

sharpを使用した画像処理

sharpは高性能な画像処理ライブラリで、様々な画像操作をサポートしています。以下は一般的な使い方の例です:

  1. サイズ変更 (Resize)

    1
    const sharp = require("sharp");
    2
    3
    sharp("input.jpg")
    4
    .resize(300, 200) // 幅300px、高さ200px
    5
    .toFile("output.jpg", (err, info) => {
    6
    if (err) {
    7
    console.error(err);
    8
    } else {
    9
    console.log(info);
    10
    }
    11
    });
  2. 切り抜き (Crop)

    1
    sharp("input.jpg")
    2
    .resize(300, 300, {
    3
    fit: sharp.fit.cover,
    4
    position: sharp.strategy.entropy,
    5
    })
    6
    .toFile("output.jpg", (err, info) => {
    7
    if (err) {
    8
    console.error(err);
    9
    } else {
    10
    console.log(info);
    11
    }
    12
    });
  3. 回転 (Rotate)

    1
    sharp("input.jpg")
    2
    .rotate(90) // 時計回りに90度回転
    3
    .toFile("output.jpg", (err, info) => {
    4
    if (err) {
    5
    console.error(err);
    6
    } else {
    7
    console.log(info);
    8
    }
    9
    });
  4. 透かし (Composite)

    1
    sharp("input.jpg")
    2
    .composite([{ input: "watermark.png", gravity: "southeast" }])
    3
    .toFile("output.jpg", (err, info) => {
    4
    if (err) {
    5
    console.error(err);
    6
    } else {
    7
    console.log(info);
    8
    }
    9
    });
  5. ディレクトリ内のすべての画像を圧縮

    1
    const sharp = require("sharp");
    2
    const fs = require("fs");
    3
    const path = require("path");
    4
    5
    const inputDir = "path/to/your/images";
    6
    const outputDir = "path/to/output/images";
    7
    8
    fs.readdir(inputDir, (err, files) => {
    9
    if (err) {
    10
    console.error("入力ディレクトリの読み込みエラー:", err);
    11
    return;
    12
    }
    13
    14
    files.forEach((file) => {
    15
    const inputFile = path.join(inputDir, file);
    16
    const outputFile = path.join(outputDir, file);
    17
    18
    sharp(inputFile)
    19
    .resize(800) // 幅800pxにリサイズ、高さはアスペクト比を維持して自動スケール
    20
    .toFormat("jpeg", { quality: 80 }) // 品質80のJPEGに変換
    21
    .toFile(outputFile, (err, info) => {
    22
    if (err) {
    23
    console.error("ファイル処理エラー:", err);
    24
    } else {
    25
    console.log("ファイル処理完了:", info);
    26
    }
    27
    });
    28
    });
    29
    });

imageminの使用

imageminのインストール

まず、npmを使用してimageminとその関連プラグインをインストールします:

Terminal window
1
npm install imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo

imageminを使用した画像圧縮

imageminは高度に構成可能な画像圧縮ライブラリで、多くのプラグインをサポートしています。imageminはESモジュールであるため、requireを使用してインポートすることはできません。package.jsonに以下のコードを追加してESモジュールを有効にする必要があります:

1
"type": "module",

以下は一般的なimageminの使い方の例です:

  1. JPEGの圧縮

    1
    import imagemin from "imagemin";
    2
    import imageminMozjpeg from "imagemin-mozjpeg";
    3
    4
    (async () => {
    5
    await imagemin(["images/*.jpg"], {
    6
    destination: "output",
    7
    plugins: [imageminMozjpeg({ quality: 70 })],
    8
    });
    9
    })();
  2. PNGの圧縮

    1
    import imagemin from "imagemin";
    2
    import imageminPngquant from "imagemin-pngquant";
    3
    4
    (async () => {
    5
    await imagemin(["images/*.png"], {
    6
    destination: "output",
    7
    plugins: [
    8
    imageminPngquant({
    9
    quality: [0.6, 0.8],
    10
    }),
    11
    ],
    12
    });
    13
    })();
  3. SVGの圧縮

    1
    import imagemin from "imagemin";
    2
    import imageminSvgo from "imagemin-svgo";
    3
    4
    (async () => {
    5
    await imagemin(["images/*.svg"], {
    6
    destination: "output",
    7
    plugins: [imageminSvgo()],
    8
    });
    9
    })();
  4. GIFの圧縮

    1
    import imagemin from "imagemin";
    2
    import imageminGifsicle from "imagemin-gifsicle";
    3
    4
    (async () => {
    5
    await imagemin(["images/*.gif"], {
    6
    destination: "output",
    7
    plugins: [imageminGifsicle({ optimizationLevel: 3 })],
    8
    });
    9
    })();
  5. ディレクトリ内のすべての画像を圧縮

    1
    import imagemin from "imagemin";
    2
    import imageminMozjpeg from "imagemin-mozjpeg";
    3
    import imageminPngquant from "imagemin-pngquant";
    4
    import imageminSvgo from "imagemin-svgo";
    5
    import path from "path";
    6
    7
    const inputDir = "path/to/your/images/*.{jpg,png,svg}";
    8
    const outputDir = "path/to/output/images";
    9
    10
    (async () => {
    11
    const files = await imagemin([inputDir], {
    12
    destination: outputDir,
    13
    plugins: [
    14
    imageminMozjpeg({ quality: 80 }),
    15
    imageminPngquant({
    16
    quality: [0.6, 0.8],
    17
    }),
    18
    imageminSvgo(),
    19
    ],
    20
    });
    21
    console.log("画像が最適化されました:", files);
    22
    })();

sharpとimageminの比較

圧縮効率

  • sharpはlibvipsライブラリを使用しており、特に大量の画像を処理する際に非常に高速です。
  • imageminは具体的なプラグインに依存しており、プラグインによって圧縮効率が異なります。全体的に見て、sharpよりも少し遅いですが、より多くのフォーマットをサポートしています。

圧縮品質

  • sharpは高品質な圧縮を提供し、圧縮品質や画像サイズを調整することで、良好な画像品質を保ちながらファイルサイズを大幅に削減できます。
  • imageminは複数のプラグインを提供しており、ユーザーは必要に応じて異なるプラグインを選択して異なるフォーマットの画像を最適化できます。特定の最適化プラグインを使用することで、高品質な圧縮が可能です(例:imagemin-mozjpeg)。

機能性

  • sharpは単なる圧縮ツールではなく、トリミング、回転、リサイズ、透かしなどの強力な画像処理機能も提供しています。
  • imageminは画像圧縮に特化しており、複数のプラグインを通じて多くの画像フォーマットの最適化をサポートしていますが、他の画像処理機能は提供していません。

結論

まとめると、高効率な画像処理と圧縮機能が必要な場合、sharpは非常に優れた選択です。多様な画像フォーマットを最適化し、圧縮効果に特化したい場合は、imageminが適しています。