プレースホルダ生成（Dominant Color / Tiny SVG / LQIP）
LQIP / 支配色 / Tiny SVG を生成し CLS と知覚速度を改善するスタブを即コード化。
ブラウザ内処理・アップロードなし
how使い方（かんたん3ステップ）
- 1画像を選択（複数可）。
- 2オプションを設定（品質/サイズ/形式など）。
- 3「一括処理」→ 完了したらZIPで保存。
読み込み中…
DOC
このツールの詳しい解説
プレースホルダは画像本体到達前のレイアウト安定と知覚速度向上を担う視覚スタブです。Dominant Color / Tiny SVG / LQIP をブラウザ内生成し即インライン埋め込みが可能。
使い分け: Dominant 最軽量、LQIP は高品質ぼかし、Tiny SVG はブランド色制御。読み込み後フェード置換で自然な遷移に。srcset 併用時は選択幅と比率を合わせたプレースホルダを生成してください。
注意: Base64 LQIP の過剰 inline は初期 HTML を肥大化。主要ビュー上位のみ適用。
FAQ
FAQ（よくある質問）
1画像形式の基本方針は？（写真/スクショ/透過）
写真は AVIF / WebP（画質80–85%目安）、UIやスクショはPNG / WebP Lossless、単色ロゴはSVGが基本です。 実装の詳細は srcset/sizes設計ガイド と スクショ最適化 を参照してください。
2圧縮しても画質を落とさないコツは？
実表示幅に合わせたリサイズ → 過大ダウンロードを防ぎ、
srcset/sizes を 実描画幅に一致させます。画質は写真で 80–85% を起点に、ノイズやエッジを目視確認。 仕上げは /compare で Before/After を見比べるのがおすすめです。3CLSを悪化させない画像の置き方は？
MORE