メディアクエリを使用して CSS 背景画像を最適化する

多くのサイトでは、特定の画面向けに最適化されていない画像などのリソースを大量にリクエストし、一部のデバイスでは使用されないスタイルを含む大きな CSS ファイルを送信しています。メディアクエリを使用すると、さまざまな画面にカスタマイズされたスタイルシートとアセットを配信し、ユーザーに転送されるデータの量を減らしてページの読み込みパフォーマンスを向上させることができます。これは一般的な手法です。このガイドでは、メディアクエリを使用して、必要なサイズの画像のみを送信する方法について説明します。この手法は、一般にレスポンシブ画像と呼ばれます。

このガイドは、Chrome DevTools に精通していることを前提としています。必要に応じて、他のブラウザの DevTools を使用することもできます。このガイドの Chrome DevTools のスクリーンショットを、ご利用のブラウザの関連する機能にマッピングするだけです。

まず、最適化されていないデモのネットワーク トラフィックを分析します。

  1. 新しい Chrome タブで最適化されていないデモを開きます。
  2. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  3. [ネットワーク] タブをクリックします。
  4. ページを再読み込みする。

リクエストされている画像は background-desktop.jpg のみで、サイズは 1, 006 KB です。

最適化されていない背景画像の DevTools ネットワーク トレース。

ブラウザ ウィンドウのサイズを変更し、ネットワーク ログにページによって行われた新しいリクエストが表示されないことを確認します。つまり、すべての画面サイズで同じ画像の背景が使用されています。

背景画像を制御するスタイルは style.css にあります。

body {
 
background-position: center center;
 
background-attachment: fixed;
 
background-repeat: no-repeat; background-size: cover;
 
background-image: url(images/background-desktop.jpg);
}

使用される各プロパティの意味は次のとおりです。

  • background-position: center center: 画像を縦横中央に配置します。
  • background-repeat: no-repeat: 画像を 1 回だけ表示します。
  • background-attachment: fixed: 背景画像をスクロールしないようにします。
  • background-size: cover: コンテナ全体を覆うように画像のサイズを変更します。
  • background-image: url(images/background-desktop.jpg): 画像の URL。

これらのスタイルを組み合わせると、ブラウザに背景画像をさまざまな画面の高さと幅に合わせて調整するよう指示します。これは、レスポンシブな背景を実現するための最初のステップです。

すべての画面サイズで単一の背景画像を使用するには、いくつかの制限事項があります。

  • 画面サイズに関係なく、同じ量のバイト数が送信されます。スマートフォンなど、一部のデバイスでは、より小さく軽量な画像背景でも同じように表示できる場合でも同様です。一般的に、パフォーマンスを向上させ、ユーザーデータを節約するために、ユーザーの画面に表示しても見栄えの良い、できるだけ小さい画像を送信することをおすすめします。
  • 画面サイズが小さいデバイスでは、画像が画面全体に収まるように引き伸ばされたり切り抜かれたりするため、背景の関連部分がユーザーに表示されなくなる可能性があります。

次のセクションでは、最適化を適用して、ユーザーのデバイスに応じて異なる背景画像を読み込む方法について説明します。

メディアクエリを使用する

メディア クエリを使用することは、特定のメディアまたはデバイス タイプにのみ適用されるスタイルシートを宣言する一般的な手法です。これらは、@media ルールを使用して実装されます。これにより、特定のスタイルが定義される一連のブレークポイントを定義できます。@media ルールで定義された条件(特定の画面幅など)が満たされると、ブレークポイント内で定義されたスタイルのグループが適用されます。

次の手順に沿ってサイトにメディアクエリを適用すると、ページをリクエストしたデバイスの最大幅に応じて異なる画像が使用されるようになります。

  • style.css で、背景画像の URL を含む行を削除します。
body {
  background
-position: center center;
  background
-attachment: fixed;
  background
-repeat: no-repeat; background-size: cover;
  background
-image: url(images/background-desktop.jpg);
}
  • 次に、モバイル、タブレット、デスクトップの画面に通常ある共通のピクセル寸法に基づいて、画面幅ごとにブレークポイントを作成します。

モバイルの場合:

@media (max-width: 480px) {
    body
{
       
background-image: url(images/background-mobile.jpg);
   
}
}

タブレットの場合:

@media (min-width: 481px) and (max-width: 1024px) {
    body
{
       
background-image: url(images/background-tablet.jpg);
   
}
}

パソコンの場合:

@media (min-width: 1025px) {
    body
{
       
background-image: url(images/background-desktop.jpg);
   
}
}

ブラウザで最適化されたバージョンの style.css を開き、変更内容を確認します。

さまざまなデバイスで測定する

次に、生成されたサイトをさまざまな画面サイズとシミュレートされたモバイル デバイスで表示します。

  1. 新しい Chrome タブで最適化されたサイトを開きます。
  2. ビューポートを狭くします(480px 未満)。
  3. Ctrl+Shift+J(Mac の場合は Command+Option+J)キーを押して DevTools を開きます。
  4. [ネットワーク] タブをクリックします。
  5. ページを再読み込みします。background-mobile.jpg 画像がどのようにリクエストされたかを確認します。
  6. ビューポートを広くします。480px より広くなると、background-tablet.jpg がどのようにリクエストされるかを確認します。1025px より広くなると、background-desktop.jpg がどのようにリクエストされるかを確認します。

ブラウザ画面の幅が変更されると、新しい画像がリクエストされます。

特に、幅がモバイル ブレークポイントで定義された値(480 ピクセル)を下回っている場合、次のネットワーク ログが表示されます。

最適化された背景画像の DevTools ネットワーク トレース。

新しいモバイル バックグラウンドのサイズは、パソコンのバックグラウンドよりも67% 小さいです。

Largest Contentful Paint(LCP)への影響

CSS 背景画像を含む要素は Largest Contentful Paint(LCP)の候補と見なされますが、CSS 背景画像はブラウザのプリロード スキャナで検出できません。つまり、注意しないとサイトの LCP が遅れる可能性があります。

最初に検討すべきオプションは、LCP 候補の画像を、レスポンシブな srcset 属性と sizes 属性を持つ <img> 要素で使用できるかどうかです。ブラウザのプリロード スキャナは、<img> 要素を検出し、レンダリング中にパーサーがブロックされている間にリクエストを送信します。

CSS 背景画像の使用を避けられない(または避けたくない)場合は、2 つ目の方法として、レスポンシブ画像をプリロードして、適切なビューポート サイズに適した画像をプリロードします。<link> 要素の mediaimagesrcsetimagesizes 属性は、特定のリソースヒントが特定のビューポート条件でのみ適用されることをブラウザにヒントします。これにより、現在のビューポートに適した 1 つのリソースのみを読み込む場合に、複数のプリロードを無駄に回避できます。

概要

このガイドでは、メディアクエリを適用して特定の画面サイズに合わせて背景画像をリクエストし、モバイル デバイスなどの小型デバイスでサイトにアクセスする際にバイトを節約する方法を学びました。@media ルールを使用して、レスポンシブな背景を実装しました。この手法は、すべてのブラウザで広くサポートされています。新しい CSS 機能である image-set() を使用すると、同じ目的を達成するために必要なコード行数を減らすことができます。執筆時点では、この機能はすべてのブラウザでサポートされていませんが、この手法の代替として興味深いものになる可能性があるため、採用状況の進展に注目することをおすすめします。