alt="画像">基本形は非常にシンプルですね。alt="画像">srcset属性を使うとRetinaディスプレイ/高解像度ディスプレイに対応した画像を置くことができる。alt="画像">sizes属性を使うと様々なディスプレイサイズに対応できる。alt="画像"></picture>picture要素とsource要素を組み合わせるとディスプレイサイズなど条件別に全く別な画像を出し分けることもできる。alt="画像"></picture>webpはGoogleが開発した画像形式で、jpegなど従来型画像形式よりも軽量であるためwebパフォーマンス面で有利になる。前述のアートディレクションと同様の方法で表示切り替え可能。IEとSafariは現在のところwebp非対応。alt="画像">decoding="async"指定で、画像は非同期で読み込まれる。Standard標準化仕様で、IE以外の主要ブラウザで使用可能。画像のデコーディング(復号)を非同期にすることで、表示時間が短縮される。alt="画像">loading="lazy"指定で画像の遅延読み込みができる。Standard標準化仕様ですが、IEとSafariは現在のところ非対応。alt="画像">decoding="async"とloading="lazy"は、併記しても両立しない。両方書くとloading="lazy"が優先される。loading="lazy"が指定されていてもページ読み込み時にビューポート内にある画像は遅延せず読み込まれる。alt="画像">2019年10月にWHATWGが標準化。Shift(画像ロード時の表示のガタつき)が起きなくなる。属性はピクセル単位のサイズのことだったが、仕様変更により同時にアスペクト比を表すことができるようになった。Shift(画像ロード時の表示のガタつき)実際の動きはこちらを参照。v6より新指標CLSとしてパフォーマンス計測対象となっている。Shift対策全部のせで画像を最適化したコードは次のようになりました。響己が書いた記事twitterfacebookはてなブックマークpocketお客様のご要望に柔軟に対応いたします。お気軽にご相談ください。cloudpackは、アイレット株式会社が提供するクラウド支援サービスです。問い合わせまでトータルサポート!お問い合わせはこちらアイレットでは、様々な職種で一緒に働ける仲間を募集しています。インフラエンジニア、開発エンジニア、クリエイティブ職、営業職など、様々な職種で一緒に働ける仲間を募集しています。アイレット公式サイト採用情報をご覧ください。プライバシーポリシークラウド導入のご相談、お見積り、サービスについてのご質問などお気軽にお問い合わせください。