mcpField
C
compress-images

compress-images

github.com/rameerez開発31110 回インストール35 週間前に更新
リポジトリ

compress-images について

対象ディレクトリの画像をWebPに変換するスキルです。元ファイルを保持し、各ファイル100KB未満を目標に圧縮します。コンテンツ内の参照更新と変換前後のサイズ報告も行います。

主な機能

  1. 01JPG、PNG、GIFをWebPに変換
  2. 02originals/に元ファイルを保持
  3. 03100KB未満を目指して反復圧縮
  4. 04コンテンツ内の画像参照を更新
  5. 05ファイルサイズの変化を報告

活用シーン

  1. 01Webページ用画像の準備
  2. 02画像ファイルサイズの削減
  3. 03コンテンツ参照をWebPのパスに置換

インストール

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

$npx skills add https://github.com/rameerez/claude-code-startup-skills --skill compress-images

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

詳細

画像圧縮スキル

$ARGUMENTS 内のすべての画像（パスが指定されていない場合は app/assets/images/content/）を WebP 形式に圧縮し、SEO パフォーマンスに最適化します（目標: 画像 1 枚あたり 100KB 未満）。

手順

  1. originals フォルダを作成 - 対象ディレクトリ内に originals/ サブフォルダを作成し、ソースファイルをそこに移動します。ソースファイルは決して破壊しないでください。
  2. 各画像を圧縮（JPG、PNG、GIF）: originals/ から親ディレクトリへ .webp として出力します
  3. すべての画像が 100KB 未満になるまで繰り返す - 各パスの後にサイズを確認し、目標を超えているものは再圧縮します
  4. 結果を報告 - 圧縮前後のサイズを併記します
  5. 参照を更新 - コンテンツファイル内の古い拡張子を .webp に変更します

ファイル構造

target-directory/
├── originals/           # High-quality source files preserved here
│   ├── hero.jpg
│   └── feature.png
├── hero.webp            # Compressed, web-optimized
└── feature.webp

反復圧縮アルゴリズム

重要: すべての画像が 100KB 未満になるまで圧縮を続けてください。各パスの後にサイズを確認し、目標を超えているものは再圧縮します。

ステップ 1: 初回パス（q 70）
cwebp -q 70 -resize 1200 0 originals/image.jpg -o image.webp
ls -lh image.webp  # Check size
ステップ 2: それでも 100KB を超える場合は、品質を段階的に下げる
# Try these in order until under 100KB:
cwebp -q 60 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 50 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 45 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 40 -resize 1200 0 originals/image.jpg -o image.webp
cwebp -q 35 -resize 1200 0 originals/image.jpg -o image.webp
ステップ 3: どうしても圧縮できない画像は、 dimensions も縮小する
# If q 35 at 1200px is still over 100KB, reduce to 1000px:
cwebp -q 30 -resize 1000 0 originals/image.jpg -o image.webp
cwebp -q 25 -resize 1000 0 originals/image.jpg -o image.webp

実際の結果（参考）

コンテンツ画像に対する実際の圧縮実行結果:

画像元のサイズ初回試行最終使用した設定
waves.jpg198KB33KB33KBq 70, 1200px（1 パス）
calendar.jpg246KB42KB42KBq 70, 1200px（1 パス）
floating.jpg230KB43KB43KBq 70, 1200px（1 パス）
cash.jpg409KB88KB88KBq 70, 1200px（1 パス）
knot.jpg395KB96KB96KBq 70, 1200px（1 パス）
floating-dark.jpg414KB94KB94KBq 70, 1200px（1 パス）
keyboard2.jpg459KB102KB102KBq 70, 1200px（1 パス、許容範囲）
perpetual.jpg565KB130KB96KBq 40, 1200px（3 パス）
keyboard.jpg718KB196KB98KBq 25, 1000px（5 パス）
重要な知見
  1. ほとんどの画像（元サイズ 500KB 未満）はデフォルト設定（q 70、1200px）で問題なく圧縮できます
  2. 大きく詳細な画像（500KB 以上）は複数回のパスが必要になることがよくあります
  3. 非常に大きな画像（700KB 以上）は、品質を下げるだけでなく寸法も縮小する必要がある場合があります
  4. キーボードやテクノロジー系の写真は細部まで精細なため、圧縮が最も難しく、4〜5 パスを想定してください
  5. 柔らかい/ぼやけた画像は、シャープで詳細な画像よりもはるかにうまく圧縮できます

圧縮後

  1. すべてのファイルが 100KB 未満であることを確認: ls -lh *.webp - 目標を超えているものは圧縮を再実行します
  2. 古い拡張子（.jpg、.png）を参照しているコンテンツファイルを .webp を使用するように更新します
  3. アプリケーションで画像が正しく表示されることをテストします
  4. 元のファイルは将来の参照や再圧縮のために originals/ フォルダに残ります

コメント

Markdown 対応