---
name: web-image-opt
description: >-
Webサイトに画像を追加・差し替えするとき、生のjpg/png画像をそのまま使わずメタデータ削除・WebP変換・
軽量化を行う。「画像を追加して」「画像を入れて」「〇〇の写真を使って」「imgフォルダに置いて」の
ように、サイトへ画像を載せる作業が発生したら、明示指示がなくても必ずこのスキルを使う。
---
# Web画像軽量化 — 汎用標準手順
Webサイトに載せる画像は、**生ファイルをそのままHTMLに乗せることを禁止**する。
必ずこの手順を通してから公開用の画像フォルダに配置する。
---
## なぜ必須か
- 生JPEG/PNGはEXIFに位置情報・機種名が残る（プライバシー漏洩のリスク）。
- 軽量化しないとLCP・モバイル体感が即座に悪化する（合格基準の目安 ≦250KB / モバイル初回ロード）。
- 多くのCDN/静的ホスティングはWebPをそのまま配信できるが、JPEG/PNGのオンデマンド変換は行われないことが多い。
---
## 共通3原則
| 項目 | 規範値 | 理由 |
|------|--------|------|
| 形式 | WebP | 同画質でJPEG比30〜40%小さい |
| 品質 | quality=80前後（推奨80〜85） | 視覚的劣化なし・最小ファイルサイズの最適点 |
| EXIF | 全削除 | 位置情報・機種情報の漏洩防止 |
---
## このスキルがやること
1. 入力画像（jpg/jpeg/png/webp）をチェックし、EXIFを削除してWebPへ変換する。
2. 必要に応じてレスポンシブ用に複数サイズ（mobile / mid / full の3段など）を書き出し、`srcset` スニペットを出力する。
3. OG画像（SNSシェア用、1200×630中央クロップ）が必要な場合は別途生成する。
4. HTMLへの貼り方（`width`/`height`・`alt`・`loading`・`preload`の使い分け）を統一する。
---
## 手順（毎回この順序で）
1. **入力ファイルを確認する**
- 形式：jpg / jpeg / png / webp のみ受け付ける。HEIC/BMP等は先に変換する。
- サイズ：元ファイルが極端に小さい（幅 < 640px）場合は拡大せず単純軽量化のみでよい。
2. **Pillow等で変換する**（自分のエージェント環境用スクリプトが無い場合の汎用例。Python + Pillowが前提）
```python
# 単純軽量化：長辺を1920pxに制限し、EXIF削除・WebP(quality=80)で保存
from PIL import Image, ImageOps
img = Image.open("path/to/image.jpg")
img = ImageOps.exif_transpose(img) # 回転情報を反映してからEXIFを破棄
img.thumbnail((1920, 1920))
img.save("path/to/image.webp", "WEBP", quality=80, method=6)
```
```python
# レスポンシブ3段（例: 640w / 1080w / 1400w）を書き出す
sizes = {"mobile": 640, "mid": 1080, "full": 1400}
for label, w in sizes.items():
resized = img.copy()
resized.thumbnail((w, w * 10)) # 縦横比維持で幅基準に縮小
resized.save(f"path/to/{label}/image.webp", "WEBP", quality=80, method=6)
```
```python
# OG画像（1200x630 中央クロップ）
og = ImageOps.fit(img, (1200, 630), method=Image.LANCZOS)
og.save("path/to/image-og.webp", "WEBP", quality=82, method=6)
```
同梱の変換スクリプトが自分の環境にあるなら、それを使ってよい（ロジックは上記と同じ：EXIF削除→サイズ調整→WebP quality 80前後で保存）。
3. **出力を確認する**
- `.webp` に変換されているか
- 元の jpg/png を残すかどうかを決める（配布ソースとして残す場合は別フォルダへ退避し、公開フォルダには置かない）
- ファイルサイズが適切か（目安：1枚 100KB以下 / ヒーロー画像でも 200KB以下）
4. **サイトの画像フォルダの正しい場所に配置する**
- 例：`img/<セクション名>/`（用途ごとにサブフォルダを切る）
- レスポンシブにした場合は `srcset` に書くパスを実パスに合わせて書き換える
5. **HTMLに貼るとき必須の属性**
```html
```
- `width` / `height` は**必ず指定**する（CLS=0の保証）
- `alt` は必ず付ける（装飾目的なら `alt=""`）
- ファーストビュー外は `loading="lazy"` をつける
---
## 品質チェックリスト
- [ ] EXIFが削除されている（位置情報・機種名が残っていない）
- [ ] 拡張子が `.webp` になっている（`.jpg`/`.png`のまま公開フォルダに置いていない）
- [ ] quality設定が80前後（極端な低画質・無圧縮になっていない）
- [ ] `width`/`height` 属性を指定した（レイアウトシフト対策）
- [ ] `alt` 属性を付けた
- [ ] ファーストビュー外の画像に `loading="lazy"` を付けた
- [ ] ファーストビュー（LCP）画像は `loading="lazy"` にせず、必要なら `preload` を追加した
- [ ] OG画像を使う場合は `srcset` に混ぜず別途1200×630で用意した
- [ ] 変換漏れ（非webpファイル）が公開用画像フォルダに残っていないか確認した
```powershell
# 変換漏れ（非webpファイル）が画像フォルダ以下に残っていないか確認する例
Get-ChildItem -Recurse -Path img -Include *.jpg,*.jpeg,*.png | Select-Object FullName,Length
```
---
## 発動フレーズ例
- 「この写真をトップページに追加して」
- 「img フォルダに新しい画像を入れて」
- 「このヒーロー画像を差し替えたい」
---
## カスタマイズのヒント
- 画質やサイズの目安（quality=80、長辺1920px、3段レスポンシブの幅など）は、自分のサイトの平均通信環境や許容ページ重量に合わせて調整してよい。
- 変換をPillowの手書きコードでなく専用スクリプト化する場合は、上記のロジック（EXIF削除→リサイズ→WebP保存）をそのまま関数化すればよい。
- CDNやホスティング先がWebPを配信できない場合は、`` + フォールバック（jpg）の二重出力に切り替える。
- 静的サイトでなくCMS運用の場合は、アップロード時にサーバー側で自動変換するフックを組むと手作業を省略できる。
> 配布元: AI探検隊 ｜ Discover AI（https://ai-tankentai.com/ai-skills）——実運用スキルの一般化版です。動作保証はありません。