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

デミアン・レンツリ
Demian Renzulli

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

前提条件

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

レスポンシブ背景画像について

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

  1. 新しい Chrome タブで最適化されていないデモを開きます。
  2. Ctrl+Shift+J キー(Mac の場合は Command+Option+J キー)を押して DevTools を開きます。
  3. [Network] タブをクリックします。
  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. [Network] タブをクリックします。
  5. ページを再読み込みします。 background-mobile.jpg 画像がどのようにリクエストされたかに注目してください。
  6. 表示領域を広げます。480px の幅より大きくなったら、background-tablet.jpg がどのようにリクエストされているかに注目してください。1025px の幅より大きくなったら、background-desktop.jpg がどのようにリクエストされているかに注目してください。

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

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

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

新しいモバイル用背景のサイズは、デスクトップ デザインよりも 67% 小さくなっています。

Largest Contentful Paint(LCP)への影響

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

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

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

概要

このガイドでは、メディアクエリを適用して特定の画面サイズに合わせた背景画像をリクエストし、スマートフォンなどの小型のデバイスでサイトにアクセスする場合のバイト数を削減する方法を学習しました。 @media ルールを使用して、レスポンシブな背景を実装しました。この手法は、すべてのブラウザで広くサポートされています。image-set() という新しい CSS 機能を使用することで、同じ目的に、少ないコード行で対応できます。この記事の執筆時点では、この機能はすべてのブラウザでサポートされているわけではありませんが、この手法の興味深い代替手段となる可能性があるため、採用の進展を注視する必要があります。