mcpField
O
optimize-images

optimize-images

github.com/forever-efficient開発043 回インストール17 週間前に更新
リポジトリ

optimize-images について

Optimize Imagesは、指定ディレクトリ内のJPG、JPEG、PNG画像をウェブ配信用に処理するスキルです。複数サイズのWebP、正方形サムネイル、ぼかしプレースホルダーを生成し、容量削減のレポートを出します。

主な機能

  1. 01JPG、JPEG、PNG画像の検索
  2. 02複数幅のWebP画像生成
  3. 03正方形サムネイルの作成
  4. 04base64形式のぼかしプレースホルダー生成
  5. 05処理数と容量の集計レポート

活用シーン

  1. 01ウェブ配信用の公開画像ディレクトリの準備
  2. 02レスポンシブ画像バリエーションの生成
  3. 03サムネイルとぼかしプレースホルダーの作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/forever-efficient/pitfal-solutions-website --skill optimize-images

インストール後、Claude Code で/optimize-imagesを入力して読み込まれたか確認します。

詳細

画像を最適化

指定したディレクトリ内の画像を、ウェブ配信用に最適化します。

引数

  • $ARGUMENTS - 最適化する画像を含むディレクトリのパス（デフォルト：./public/images）

処理

  1. すべての画像を検索します： 
    find ${ARGUMENTS:-./public/images} -type f \( -name "*.jpg" -o -name "*.jpeg" -o -name "*.png" \)
  2. 各画像について、以下を生成します：
    • 320w、640w、1280w、1920w、2560w の WebP 版
    • 150x150、300x300 のサムネイル
    • ぼかしプレースホルダー（幅 10px、base64）

コマンド

# Install sharp-cli if not present
pnpm add -D sharp-cli

# Optimize single image example
npx sharp -i input.jpg -o output.webp --format webp --quality 80

# Generate srcset for an image
for size in 320 640 1280 1920 2560; do
  npx sharp -i input.jpg -o "output-${size}w.webp" --resize $size --format webp --quality 80
done

# Generate thumbnail
npx sharp -i input.jpg -o thumb-150.webp --resize 150 150 --fit cover --format webp

# Generate blur placeholder
npx sharp -i input.jpg -o blur.webp --resize 10 --format webp --quality 20

出力

以下を報告します：

  • 処理した画像の数
  • 元画像の合計サイズ
  • 最適化後の合計サイズ
  • サイズ削減率

コメント

Markdown 対応