サイト画像の重さチェック

Website image weight audit

サイトのフォルダにある画像をファイルサイズと縦横ピクセル数つきで一覧にし、表示サイズに対して大きすぎる画像や重い形式を指摘して、縮小や変換の方法を提案します。画像は変更しません。

Claude Hermes Agent Codex CursorMIT（改変・再配布・商用利用可）Python

できること

サイトの表示が重い原因になりやすい画像を、ファイルを変更せずに洗い出します。

PNG・JPEG・GIF・WebP・AVIF・BMP・ICO・SVG のサイズと縦横ピクセル数を一覧（Pillow などは不要）
HTML の img・srcset・CSS の url()・og:image などから、どのページでどう使われているかを集計
ファイルが大きすぎる、縦横が大きすぎる、img の width 指定に対して実物が2倍より大きい、を指摘
透明部分のない重い PNG、アニメーション GIF、width/height のない img、どこからも使われていない画像、見つからない画像を指摘
WebP/AVIF への変換、縮小、動画への置き換えなどの提案と、コマンド例を表示

Markdown・JSON・CSV で出力できます。

使い方

python scripts/image_weight.py dist --md image-report.md --csv image-report.csv

エージェントが使われ方を確認したうえで、優先度の高い画像から改善方法を提案します。

必要な環境

Python 3（標準ライブラリのみ）

注意点

画像の変換・削除・上書きは行いません。
「使われていない」と出た画像も、JavaScript や他のサイトから使われている場合があります。削除の前に必ず確認してください。
CSS で拡大表示している場合など、実際の表示サイズまでは分からないことがあります。

English description

Lists every image in a site folder with file size and pixel dimensions, flags images that are too heavy or far larger than displayed, and suggests resizes and conversions. Never modifies files.

What it does

Finds the images most likely to slow a site down, without changing any file.

Lists size and pixel dimensions of PNG, JPEG, GIF, WebP, AVIF, BMP, ICO and SVG files (no Pillow needed)
Collects where and how each image is used from img, srcset, CSS url(), og:image and more
Flags files that are too large, dimensions that are too large, and images more than 2x wider than their img width attribute
Flags heavy opaque PNGs, animated GIFs, img tags without width/height, unused images and missing images
Suggests WebP/AVIF conversion, resizing or replacing GIFs with video, with example commands

Output as Markdown, JSON and CSV.

How to use

python scripts/image_weight.py dist --md image-report.md --csv image-report.csv

The agent checks the context of each image and recommends fixes, highest impact first.

Requirements

Python 3 (standard library only)

Caveats

Images are never converted, deleted or overwritten.
Images reported as unused may still be used by JavaScript or other sites; confirm before deleting.
Actual display size set by CSS is not always known.

インストール方法

ダウンロードしたZIPを展開します（中に web-image-weight-audit/ フォルダと SKILL.md があります）。
フォルダごと、使うエージェントのスキル置き場にコピーします。
- Claude：~/.claude/skills/（プロジェクト単位なら .claude/skills/）
- Hermes Agent：~/.hermes/skills/
- Codex：~/.agents/skills/／Cursor：~/.cursor/skills/
- Claude アプリ（claude.ai）：「カスタマイズ → スキル」からZIPをアップロード
エージェントを再起動し、スキル一覧に表示されることを確認します。

Windows・Mac 別、エージェント別のインストール手順