webpack不要、Node.jsを使用したローカル画像圧縮:sharpとimageminの比較と応用
- 1122単語
- 6分
- 23 Jul, 2024
現代のWeb開発において、画像サイズの最適化はサイトパフォーマンスを向上させるための重要なステップです。この記事では、Node.jsライブラリsharpとimageminを使用してローカル画像を圧縮する方法を紹介し、これらのツールの機能と圧縮能力を詳細に比較します。
sharpの使用
sharpのインストール
まず、npmを使用してsharpをインストールします:
1npm install sharp
sharpを使用した画像処理
sharp
は高性能な画像処理ライブラリで、様々な画像操作をサポートしています。以下は一般的な使い方の例です:
-
サイズ変更 (Resize):
1const sharp = require("sharp");23sharp("input.jpg")4.resize(300, 200) // 幅300px、高さ200px5.toFile("output.jpg", (err, info) => {6if (err) {7console.error(err);8} else {9console.log(info);10}11}); -
切り抜き (Crop):
1sharp("input.jpg")2.resize(300, 300, {3fit: sharp.fit.cover,4position: sharp.strategy.entropy,5})6.toFile("output.jpg", (err, info) => {7if (err) {8console.error(err);9} else {10console.log(info);11}12}); -
回転 (Rotate):
1sharp("input.jpg")2.rotate(90) // 時計回りに90度回転3.toFile("output.jpg", (err, info) => {4if (err) {5console.error(err);6} else {7console.log(info);8}9}); -
透かし (Composite):
1sharp("input.jpg")2.composite([{ input: "watermark.png", gravity: "southeast" }])3.toFile("output.jpg", (err, info) => {4if (err) {5console.error(err);6} else {7console.log(info);8}9}); -
ディレクトリ内のすべての画像を圧縮:
1const sharp = require("sharp");2const fs = require("fs");3const path = require("path");45const inputDir = "path/to/your/images";6const outputDir = "path/to/output/images";78fs.readdir(inputDir, (err, files) => {9if (err) {10console.error("入力ディレクトリの読み込みエラー:", err);11return;12}1314files.forEach((file) => {15const inputFile = path.join(inputDir, file);16const outputFile = path.join(outputDir, file);1718sharp(inputFile)19.resize(800) // 幅800pxにリサイズ、高さはアスペクト比を維持して自動スケール20.toFormat("jpeg", { quality: 80 }) // 品質80のJPEGに変換21.toFile(outputFile, (err, info) => {22if (err) {23console.error("ファイル処理エラー:", err);24} else {25console.log("ファイル処理完了:", info);26}27});28});29});
imageminの使用
imageminのインストール
まず、npmを使用してimageminとその関連プラグインをインストールします:
1npm install imagemin imagemin-mozjpeg imagemin-pngquant imagemin-svgo
imageminを使用した画像圧縮
imagemin
は高度に構成可能な画像圧縮ライブラリで、多くのプラグインをサポートしています。imagemin
はESモジュールであるため、require
を使用してインポートすることはできません。package.json
に以下のコードを追加してESモジュールを有効にする必要があります:
1"type": "module",
以下は一般的なimageminの使い方の例です:
-
JPEGの圧縮:
1import imagemin from "imagemin";2import imageminMozjpeg from "imagemin-mozjpeg";34(async () => {5await imagemin(["images/*.jpg"], {6destination: "output",7plugins: [imageminMozjpeg({ quality: 70 })],8});9})(); -
PNGの圧縮:
1import imagemin from "imagemin";2import imageminPngquant from "imagemin-pngquant";34(async () => {5await imagemin(["images/*.png"], {6destination: "output",7plugins: [8imageminPngquant({9quality: [0.6, 0.8],10}),11],12});13})(); -
SVGの圧縮:
1import imagemin from "imagemin";2import imageminSvgo from "imagemin-svgo";34(async () => {5await imagemin(["images/*.svg"], {6destination: "output",7plugins: [imageminSvgo()],8});9})(); -
GIFの圧縮:
1import imagemin from "imagemin";2import imageminGifsicle from "imagemin-gifsicle";34(async () => {5await imagemin(["images/*.gif"], {6destination: "output",7plugins: [imageminGifsicle({ optimizationLevel: 3 })],8});9})(); -
ディレクトリ内のすべての画像を圧縮:
1import imagemin from "imagemin";2import imageminMozjpeg from "imagemin-mozjpeg";3import imageminPngquant from "imagemin-pngquant";4import imageminSvgo from "imagemin-svgo";5import path from "path";67const inputDir = "path/to/your/images/*.{jpg,png,svg}";8const outputDir = "path/to/output/images";910(async () => {11const files = await imagemin([inputDir], {12destination: outputDir,13plugins: [14imageminMozjpeg({ quality: 80 }),15imageminPngquant({16quality: [0.6, 0.8],17}),18imageminSvgo(),19],20});21console.log("画像が最適化されました:", files);22})();
sharpとimageminの比較
圧縮効率
- sharpはlibvipsライブラリを使用しており、特に大量の画像を処理する際に非常に高速です。
- imageminは具体的なプラグインに依存しており、プラグインによって圧縮効率が異なります。全体的に見て、
sharp
よりも少し遅いですが、より多くのフォーマットをサポートしています。
圧縮品質
- sharpは高品質な圧縮を提供し、圧縮品質や画像サイズを調整することで、良好な画像品質を保ちながらファイルサイズを大幅に削減できます。
- imageminは複数のプラグインを提供しており、ユーザーは必要に応じて異なるプラグインを選択して異なるフォーマットの画像を最適化できます。特定の最適化プラグインを使用することで、高品質な圧縮が可能です(例:imagemin-mozjpeg)。
機能性
- sharpは単なる圧縮ツールではなく、トリミング、回転、リサイズ、透かしなどの強力な画像処理機能も提供しています。
- imageminは画像圧縮に特化しており、複数のプラグインを通じて多くの画像フォーマットの最適化をサポートしていますが、他の画像処理機能は提供していません。
結論
まとめると、高効率な画像処理と圧縮機能が必要な場合、sharp
は非常に優れた選択です。多様な画像フォーマットを最適化し、圧縮効果に特化したい場合は、imagemin
が適しています。