bascik-images

画像：レスポンシブアセットと安定した初回描画

画像アセットやレンダリングを変更する前に、画像の最適化をお読みください。プロジェクトの規約にはbascikスキル、コンポーネントの境界とスコープにはbascik-components、ビルド時またはリクエスト時のマークアップにはbascik-scriptsを使用してください。

必ず守るワークフロー

1. エンコードする前にレイアウトを確認します。 ブレークポイントの境界と関連するピクセル密度で、画像枠のサイズを測定してください。公開ページの外にオリジナルを保管し、有用な幅だけを生成して、アップスケールは行わず、向きと透過情報を維持してください。SVGロゴはベクターのままにします。同梱のヘルパーは静止画像を処理しますが、アニメーションには対応しません。
2. ローカルで生成します。 ユーザーのプロジェクトルートからscripts/responsive-webp.mjsを実行してください。このスクリプトはそのプロジェクトのSharpを読み込み、WebPファイルと、寸法・URL・バイト数・ハッシュを記録したマニフェストを書き出します。CSSの確認やマークアップの編集は行いません。フラグとインストール要件についてはドキュメントをお読みください。
3. ネイティブなマークアップを組み込みます。 マニフェストに記載された実際の幅をsrcsetで使い、sizesをCSSに合わせ、寸法または意図したトリミングのaspect-ratioで画像の表示領域を確保してください。LCPになりそうな画像だけを優先し、ファーストビューより下の画像は遅延読み込みしてください。画像ランタイムやサービスを導入しないでください。
4. 一時的なデフォルトではなく初期状態をレンダリングします。 既知のギャラリーコントロールとサムネイルの表示状態はビルド時にレンダリングしてください。有効なURLパラメーターでバリエーションが選択された場合は、描画前に一致するメイン画像、選択中のオプション、サムネイル一式をサーバースクリプトでレンダリングしてください。カタログに照合して検証し、不明な値にはドキュメントに記載されたデフォルトを使用します。すべてのサムネイルを表示してから大半を隠したり、デフォルト画像を描画してからスクリプトの起動時に差し替えたりしないでください。
5. ダウンロードとDOMの変更を分けます。 画像とブラウザースクリプトは、それぞれ独立して遅延させてください。寸法で解決できるのは画像のレイアウトであり、後から作成されるコントロールや誤ったバリエーションではありません。サムネイルの枠を安定して確保し、JavaScriptの実行までページ全体を隠すのではなく、コントロールを初期HTMLに含めてください。
6. Bascikのスコープを維持します。 ビルドスクリプトが返すマークアップはビルド時にスコープされますが、サーバースクリプトが返す要素は、元のテンプレートに対する要素セレクターの書き換え対象ではありません。スコープ付きコンテナーと子セレクター、または共有グローバルプリミティブを通じて、返された子要素をスタイルしてください。ローカルクラスをそのまま出力して、自動的に名前が変更されると思い込まないでください。
7. 監視対象のソースビルドで生成しないでください。 一度生成してアセットをコミットするか、BASCIK_OUT_DIRに書き出すpre execプロデューサーを、明示的なURLプレフィックスとプライベートマニフェストを使って実行してください。ビルドで生成ファイルをsrc/に書き込んだり、ビルド自体の出力を監視したりしないでください。
8. 生成されたサイトを検証します。 モバイル／デスクトップおよび高密度のコンテキストを新規の状態でテストし、currentSrc、転送バイト数、透過、トリミング、視覚品質を確認してください。スクリプトを遅延させた状態と無効にした状態で、要求されたバリエーションと実際に表示されるサムネイルの正確なセットを検証してください。スクリプト初期化前後と画像デコード前後で、レイアウトを比較してください。ギャラリーのナビゲーション、色の変更、再読み込み、無効な色の動作もテスト対象に含めてください。

該当するセクションを読む

タスク	読む
オリジナルを保持し、幅を選択する	/how-to/optimizing-images#keep-originals-separate、/how-to/optimizing-images#choose-widths-from-the-layout
WebP とマニフェストを生成する	/how-to/optimizing-images#generate-webp-locally
レスポンシブなマークアップを CSS に合わせる	/how-to/optimizing-images#wire-up-native-html-and-css
フラッシュやバリエーションの不一致を診断する	/how-to/optimizing-images#prevent-flashes-and-layout-shifts
リクエスト時のレンダリングとホスティング	/scripts/server、/deployment/cloudflare
レスポンシブ画像と初回描画を検証する	/how-to/optimizing-images#verify-the-result、/testing/e2e-testing

測定した結果と、未検証のケースがあれば報告してください。ファイルの生成や Lighthouse のスコアだけでは、正しくレンダリングされていることの証明にはなりません。