画像の一括（Batch）リサイズとアスペクト比維持（Node.js / Sharp ・ツール活用）

画像リサイズ アスペクト比 Web制作 Node.js sharp
結論：30秒で画像を壊さず一括リサイズする
  • アスペクト比維持: 幅のみ指定（高さ null / auto）
  • 拡大劣化防止: withoutEnlargement: true で小さい画像の無理な引き伸ばしを防止
  • 生成ツール: 下のコンポーネントでブラウザ内完全ローカル変換

1. オンライン 一括画像リサイズツール

複数の画像をまとめてドラッグ＆ドロップし、最大幅（例: 1200px）や拡大率（例: 50%）を指定してブラウザ内で一括変換・一括ダウンロードできます。

📐 この場で画像をリサイズする

あわせて使いたい画像圧縮ツールリサイズと同時にファイルサイズも削減したい場合はこちら使ってみる →

画像をドロップ or クリック

2. Node.js sharp による画像一括リサイズ自動化

開発環境や CI/CD パイプラインでディレクトリ内の画像を一括処理する場合は、高速な画像処理ライブラリ sharp が業界標準です。

// resize-batch.js
const fs = require('fs');
const path = require('path');
const sharp = require('sharp');

const inputDir = './src-images';
const outputDir = './dist-images';

if (!fs.existsSync(outputDir)) fs.mkdirSync(outputDir);

fs.readdirSync(inputDir).forEach(async (file) => {
  const ext = path.extname(file).toLowerCase();
  if (['.jpg', '.jpeg', '.png', '.webp'].includes(ext)) {
    const inputPath = path.join(inputDir, file);
    const outputPath = path.join(outputDir, file);

    // アスペクト比を維持し、EXIF回転を補正したまま幅1200pxに自動縮小
    await sharp(inputPath)
      .rotate()
      .resize(1200, null, { fit: 'inside', withoutEnlargement: true })
      .toFile(outputPath);

    console.log(`✅ リサイズ完了: ${file}`);
  }
});

3. 注意点（ハマりどころ）

  1. 小サイズの無理な拡大（アップスケール）による画質崩壊
    • 800px の画像を 1200px に強制拡大するとピクセルがぼやけます。withoutEnlargement: true を指定して小画像はスルーするガード処理を入れてください。
  2. 無圧縮 PNG のファイルサイズ膨大化
    • PNG 画像をアスペクト比維持リサイズしただけではファイル容量があまり減りません。同時に .webp() や .avif() へのフォーマット変換を挟むことで容量を 80% 以上削減可能です。