ブログ画像の運用フロー（最短・安全・再現性）
記事の本数が増えるほど、画像のサイズ/形式/品質のブレが表示速度（CWV）とUIの一貫性を崩します。 本稿は、誰が作業しても同じ品質に着地するための再現性のあるフローを提示します。 基本は「解像度 → 形式 → 品質」の順。これだけで“速く・軽く・崩れない”が実現します。
要点（TL;DR）
- フローは解像度→形式→品質。本文1200–1600px／一覧600–800pxで統一。
- 写真=WebP（互換=JPEG）、ロゴ/図/スクショ=PNG or WebP Lossless。品質は±5%で詰める。
- 実装は width/height必須＋srcset/sizes。OGPは1200×630でテンプレ化。
1. 標準フロー：解像度 → 形式 → 品質
- 解像度を決める：本文は横1200–1600px、2カラム主体は1200pxで十分。 サムネは横600–800px。 → /resize
- 形式を選ぶ：写真=WebP、互換=JPEG、ロゴ/図/スクショ=PNG。 → /convert
- 品質を微調整：WebP80%起点（にじみ時は85%）、JPEG85%起点。 目安容量200KB前後。 → /compressor
2. 命名規約＆ディレクトリ（再現性と差し替え性）
例：posts/配下にhero / thumb / inlineを作成。 ファイル名はslug_用途_001.webpのように統一（差し替え時はv2等のバージョンやハッシュ付与）。 これでキャッシュ更新・監査・A/Bの可搬性が上がります。
posts/post-slug/
hero/
post-slug_hero_v1.webp
thumb/
post-slug_thumb_01.webp
inline/
post-slug_inline_01.webp3. 役割分担とチェックポイント
- 編集：比率と安全域、OGPのラベル/文言を決定（7語以内・高コントラスト）。
- デザイナ/制作者：解像度→形式→品質の順に書き出し。ロゴ部は部分可逆（PNG）も検討。
- 実装：imgにwidth/height、ヒーローは優先、fold下は遅延。
4. 品質チートシート（はじめの一手）
- WebP 80% → OKなら採用。文字/線が滲むなら85%。残る箇所は部分PNG。
- JPEG 85% → 互換重視の提出や共有。ノイズが目立つ時のみ90%へ。
- PNG（可逆） → ロゴ/図/スクショの既定。必要に応じ 減色/ディザで軽量化。
5. よくある失敗（回避策）
6. 公開前チェックリスト（10項目）
- 本文1200–1600px・一覧600–800pxに統一した。
- 写真=WebP / 互換=JPEG / ロゴ・図=PNG の原則を守った。
- 品質は±5%の範囲で最小化（目安200KB）。
- 文字/線の滲み、髪や細部の粒状感、グラデ段差を1:1で確認。
- OGPは1200×630、安全域広め・7語以内で可読。
- 全imgにwidth/heightを指定、広告は固定高でCLS回避。
- srcset/sizes を実表示幅に最適化。
- EXIF（位置/向き）を削除（/exif-strip）。
- ファイル名はハッシュ/バージョンで差し替え即反映。
- 本番のCWV（field data）に悪化がない。
7. 次のアクション
いますぐ作業するなら： 画像リサイズ → 画像形式変換 → 画像圧縮 → サムネ一括生成 → EXIF削除＋自動回転。 この順序で迷いなく量産できます。