Community画像github.com

画像一括圧縮自動化

このリポジトリ内で商品画像(PNG、JPG、WEBP、AVIF)を一括圧縮・リサイズ・変換し、Web対応のJPG、WebP、AVIFファイルにするために使用します。また、ユーザーの作業フォルダを新しいマシンにセットアップしたり、高さ指定のみのサイジング、アスペクト比エラー、CLIフラグに関するトラブルシューティングを行う場合にも使用します。

画像一括圧縮自動化 とは?

このスキルは、`sharp`ライブラリを使用して商品画像をWeb対応の`.jpg`、`.webp`、または`.avif`形式に一括リサイズ・圧縮するNode.js CLIツールです。元のファイル名を保持し、透明なPNGを白色の背景に平坦化し、アスペクト比を厳密に維持します(`800px`の高さ指定による自動スケーリング、または`WxH`の正確なチェック)。**決してユーザーの作業ドライブを推測せず**、指定がない場合に`800x800`や`jpg`に黙ってフォールバックせず、画像を切り抜いたり歪めたりしません。このスキルは、ターミナルや非対話型のエージェントツールシェルで使用するために設計されており、`--dir`、`--size`、`--format`などのフラグを明示的に指定する必要があります。ユーザーから明示的に指定がない限り、フォルダ、サイズ、出力形式を常にユーザーに確認することを推奨しています。

対応~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/alirazawebservice-rgb/image-compress-automation/tree/HEAD/skills/image-compress-automation

Installed? Explore more 画像 skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

画像一括圧縮自動化 は何をしますか?

概要

sharp を使用して、商品画像をWeb対応の .jpg、.webp、または .avif ファイルに一括リサイズ・圧縮します。元のファイル名を保持し、透明なPNGを白色の背景に平坦化し、アスペクト比を厳密に維持します(800px の高さ指定による自動スケーリング、または WxH の正確なチェック)。

基本原則: 作業ドライブ(F:\)を決して推測せず、指定がない場合に 800x800 や jpg に黙ってフォールバックせず、画像を切り抜いたり歪めたりしないこと。

クイックリファレンス

状況アクション
初回実行時(node_modules/ が存在しない)npm install を実行(Node.js >= 20.0.0 が必要)
.imagerc.json がなく、--dir も指定されていない実行前にユーザーに作業フォルダを尋ねる
ターゲットのサイズ/高さまたは形式が省略された実行前にユーザーにサイズ(800px の高さまたは WxH)と形式(jpg、webp、avif)を尋ねる
ユーザーが高さのみを指定した場合(例:800px in webp)--size 800px --format webp を渡す(画像ごとに比例幅を自動計算)
ユーザーが作業フォルダ + WxH + 形式を指定した場合`node bin/cli.js --dir "" --size "" --format <jpg
ユーザーに別々の raw フォルダと export フォルダがある場合`node bin/cli.js --input "" --output "" --size "<px
正確な WxH でアスペクト比が一致しない場合切り抜き・引き伸ばしは行わない。出力から推奨される一致サイズを報告する(または、適切な場合は 800px 高さモードを提案する)
透明なPNG背景自動的に #ffffff に平坦化(--bg "#hex" で変更可能)

ステップバイステップのエージェントワークフロー

ユーザーがこのリポジトリを使用して画像の圧縮またはリサイズを依頼した場合は、以下の手順を順に実行します。

1. セットアップと依存関係の確認

  1. node_modules/sharp が存在することを確認します。新しくクローンした場合は、npm install を実行します。
  2. リポジトリルートに .imagerc.json が存在するか確認します(ユーザーがプロンプトで既にフォルダを指定している場合を除く)。
    • .imagerc.json がなく、ユーザーがフォルダを指定していない場合は、先にユーザーに尋ねます: "input および output 画像フォルダに使用するフォルダはどれですか?(例:./ はこのプロジェクトフォルダ、~/Desktop/store-images、D:\Images など)"
    • F:\Image Compress Automation や ~/Desktop を決して推測しないでください。

2. input/ の確認とサイズ・形式の確認

  1. <folder>/input と <folder>/output が存在することを確認します(または --dir "<folder>" を渡すことでCLIが作成します)。
  2. input フォルダ内の対応画像(.png、.jpg、.jpeg、.webp、.avif)の数を確認します。0 の場合は、正確な <folder>/input パスを画像を配置する場所としてユーザーに伝え、停止します。
  3. ユーザーが現在のリクエストでターゲットの高さ/寸法または出力形式を明示的に指定していない場合は、実行前に尋ねます — 非TTY/フラグなしのフォールバックがデフォルトで 800x800 と jpg になる場合でも同様です。

3. 非対話的に実行し、結果を報告する

フラグを明示してCLIを実行します(非TTYツールシェルで node bin/cli.js をそのまま実行しないでください。サイレントデフォルトに依存するためです):

node bin/cli.js --dir "<working-folder>" --size "<HEIGHTpx or WIDTHxHEIGHT>" --format "<jpg|webp|avif>"

ユーザーから要求された場合のオプションフラグ:

  • --format <jpg|webp|avif>(デフォルト jpg;webp は約25~35%小さく、avif は約30~50%小さい)
  • --quality <1-100>(JPG mozjpeg / WebP effort: 6 ではデフォルト 85、AVIF effort: 4 では 65)
  • --bg "<#hex>"(透明なPNG平坦化のデフォルトは #ffffff)
  • --strict(ファイルがスキップまたは失敗された場合に終了コード 1 を返す)

ユーザーがこの作業フォルダをインタラクティブターミナル実行(npm start)のために記憶させたい場合は、.imagerc.json(gitignore済み)に保存するか、npm run setup を実行するよう提案しても構いません。

4. 出力の確認と要約

コマンド出力から直接報告します:

  • 変換済み / スキップ / 失敗の総数と節約された容量(MB と %)。
  • 正確な出力フォルダパス(<working-folder>/output)。
  • aspect-ratio-mismatch によるスキップがあった場合は、ファイルの元の寸法/比率と、CLIが出力した推奨比例寸法を表示します。

よくある間違いと注意点

考え / 間違い失敗する理由と代わりにすべきこと
"--size や --format なしで node bin/cli.js を実行するだけ"非TTYフォールバックが黙って 800x800 と jpg を選択します。常に最初にユーザーとフォルダ、サイズ/高さ(800px または WxH)、形式(jpg/webp/avif)を確認し、--dir、--size、--format を渡します。
"ユーザーが1:2の写真に800×800を望んでいる — fit: cover を渡すか、カスタム切り抜きスクリプトを書こう"基本ルールに違反します: 決して黙って切り抜きや引き伸ばしをしないでください。CLIに不一致を拒否させ、比例寸法を提供させます。
".imagerc.json や input/ 内のテストPNGをコミットしよう".imagerc.json、input/*、output/*(.gitkeep を除く)はユーザーのプライバシーを保護するためにgitignoreされています。追跡しないでください。
"--output なしで --input を渡そう"--output または --dir がないと、出力は <cwd>/output にフォールバックします。常に --dir(標準フロー)または --input と --output の両方を渡します。

関連スキル