CSSの背景画像を最適化！Retinaディスプレイ(高解像度)対応する方法

サイトの表示速度はユーザビリティに関わる重要な指標の1つです。

表示速度を上げる方法の中でも、画像の最適化は比較的簡単に出来て、体感できるほどの効果を得られる場合もあります。

• 画像の圧縮
• 軽量な画像フォーマットの使用
• 閲覧環境に応じて最適なサイズの画像の出し分け

画像の最適化には上のような対策がありますが、この記事では『CSSの背景画像を閲覧環境に応じて出し分ける方法』について紹介します。

imgタグで入れる画像の最適化(出し分け)については、下記の記事をご覧ください。

💡 コーディングの練習なら模写修行！

無料教材もあります！

【こんな方におすすめ】

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

公式サイトを見る

コーディング教材の【模写修行】は他の教材と何が違うのか？

imgタグで入れる画像とCSSの背景画像の違い

• 用途の違い
• 最適化する際に出来ることの違い

imgタグで入れる画像とCSSの背景画像の違いについて、上の2点を紹介します。

用途の違い

• HTMLは意味付け
• CSSは装飾

HTMLとCSSの役割に従い、imgタグかCSSの背景画像かは決めるべきです。

• 意味のある画像であればimgタグ
• 装飾目的の画像はCSSの背景画像

"基本的"には、このように使い分けることが正解でしょう。

しかし、画像の最適化(閲覧環境に応じた出し分け)においてはimgタグで入れた方が便利です。したがって、必ずしも意味付けか装飾かで判断しなくても良いのではないかと、個人的には思います。

最適化する際に出来ることの違い

imgタグで入れる画像とCSSの背景画像では最適化(閲覧環境に応じた出し分け)する際、できることに違いがあります。

imgタグで入れる画像は、srcset属性を使うことで、閲覧するビューポートサイズによってブラウザが自動で最適な画像を出し分けてくれます。CSSの背景画像ではそれができません。

imgタグと同じ最適化をするには、かなり細かくメディアクエリを指定する必要があります。この記事の後半で比較した結果も記載しました。

CSSの背景画像を最適化！解像度によって出し分けする方法！

CSSの背景画像を解像度によって出し分けするには、image-setを使います。

.hoge {
    background-image: url(../img/hoge.png);
    background-image: image-set(url(../img/hoge.png) 1x, url(../img/hoge@2x.png) 2x);
    background-image: -webkit-image-set(url(../img/hoge.png) 1x, url(../img/hoge@2x.png) 2x);
    ...
}

上のコードのように、1xにデバイスピクセル比が1の場合に表示したい画像、2xにデバイスピクセル比が2の場合に表示したい画像を指定します。

1行目はimage-setが非対応のブラウザ向けのフォールバックです。3行目の-webkit-はChromeやEdge用に必要です。

imgタグとCSSの背景画像の最適化の比較

• 画像の表示サイズは0~1000pxで横幅100%、1000px以上で1000px固定
• 画像は横幅200px~2000pxまで200px刻みで指定

このような条件で表示する場合、imgタグは下のようなコードになります。

<img
    width="200"
    height="100"
    srcset="img/200.png 200w, img/400.png 400w, img/600.png 600w, img/800.png 800w, img/1000.png 1000w, img/1200.png 1200w, img/1400.png 1400w, img/1600.png 1600w, img/1800.png 1800w, img/2000.png 2000w"
    sizes="(max-width: 1000px) 100vw, 1000px"
    src="img/2000.png"
    alt="..."
/>

画像を用意するのは手間がかかりますが、HTML はこれだけです。

同じような指定をCSSの背景画像ですると...

<div class="hoge"></div>

.hoge {
    height: 0;
    padding-top: 50%;
    background-size: cover;
    background-image: url(../img/200-2.png);
    background-image: image-set(url(../img/200-2.png) 1x, url(../img/400-2.png) 2x);
    background-image: -webkit-image-set(url(../img/200-2.png) 1x, url(../img/400-2.png) 2x);
}

@media screen and (min-width: 200px) {
    .hoge {
        background-image: url(../img/400-2.png);
        background-image: image-set(url(../img/400-2.png) 1x, url(../img/800-2.png) 2x);
        background-image: -webkit-image-set(url(../img/400-2.png) 1x, url(../img/800-2.png) 2x);
    }
}

@media screen and (min-width: 400px) {
    .hoge {
        background-image: url(../img/600-2.png);
        background-image: image-set(url(../img/600-2.png) 1x, url(../img/1200-2.png) 2x);
        background-image: -webkit-image-set(url(../img/600-2.png) 1x, url(../img/1200-2.png) 2x);
    }
}

@media screen and (min-width: 600px) {
    .hoge {
        background-image: url(../img/800-2.png);
        background-image: image-set(url(../img/800-2.png) 1x, url(../img/1600-2.png) 2x);
        background-image: -webkit-image-set(url(../img/800-2.png) 1x, url(../img/1600-2.png) 2x);
    }
}

@media screen and (min-width: 800px) {
    .hoge {
        background-image: url(../img/1000-2.png);
        background-image: image-set(url(../img/1000-2.png) 1x, url(../img/2000-2.png) 2x);
        background-image: -webkit-image-set(url(../img/1000-2.png) 1x, url(../img/2000-2.png) 2x);
    }
}

これだけ書くことになります。これでもimgタグと同じにはならず、imgタグの方が細かい出し分けが出来ています。

デモを用意したので、幅を狭めたり広げたりしながらご確認ください。デバイスピクセル比が1のデバイスで見た場合は imgタグも背景画像もほぼ同じですが、2以上で見た際はimgタグの最適化の方が細かく出し分け出来ているのがわかります。

※ 今回の例ほどの枚数を用意することは通常ないとは思います

※ ブラウザによって挙動は異なります。例えばGoogle Chromeではキャッシュの仕様で、大きいサイズから小さいサイズに変更した際、リロードしない限り画像は切り替わりません。

CSSの背景画像の最適化はどんな時に使う？

入れる画像が固定幅の場合、image-setを使った出し分けは使えます。例えば擬似要素でアイコンを入れる場合などです。

<a href="..." class="hoge">詳しくはこちら</a>

.hoge {
    ...
}

.hoge::before{
    content: "";
    display: inline-block;
    width: 50px;
    height: 50px;
    background-image: url(../img/arrow.png);
    background-image: image-set(url(../img/arrow.png) 1x, url(../img/arrow@2x.png) 2x);
    background-image: -webkit-image-set(url(../img/arrow.png) 1x, url(../img/arrow@2x.png) 2x);
  ...
}

可変幅の領域に入れる場合は、imgタグで入れて見た目をCSSで調整する方が個人的には良いかなと感じています。

超実務向け！コーディングの練習が出来るサービス作りました 🎉

模写修行は実戦に沿った形で、コーディングの"練習"ができるサービスです。

こんな方におすすめ！

• 実務のレベル感を知りたい
• プロの制作フローを学びたい
• 何を考えながらコードを書くのか知りたい
• 基礎学習中、もしくは終えたばかり
• CSS設計やSCSSを使った書き方を学びたい

模写修行ではデザインデータ(FigmaとXD) / web上で見れる解説 / サンプルコードを提供しています。ご自身でデザインを見ながらコーディングに挑戦し、解説とサンプルコードで答え合わせ&さらに深く学ぶことができるサービスです。

他の書籍や教材との違いは、超初心者向け・学習用の書き方ではなく、実際の現場で通用する書き方や考え方にフォーカスしている点です。詳しくは下記の記事をご覧ください。

コーディング教材の【模写修行】は他の教材と何が違うのか？

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！

嬉しい声もいただいています！

自分のweb制作におけるコードの書き方、ファイル管理は模写修行さんから学ばせていただきました。独学の強い味方だと思いました。教材、メディアありがとうございました！
TwitterでDMいただきました！🙇

---

classの命名迷子・横並びレイアウト恐怖症だったけど、無料〜中級までいくつかやっていく中で、どんどん迷いが減っていって楽しかったです！解説記事もわかりやすい...！
Tweet

---

デザインきれいだし、解説とサンプルソースが付いて答え合わせしやすいところが良い。
Tweet

---

答え合わせ終わった。top-kvの実装方法に脱帽。そういうやり方があることを知れたことが大きい。。sass学びはじめたばかりなのでscssコードがとても参考になった。次からはscssでかく。
Tweet

---

無料教材もあります！👍

模写修行を見る

脱初心者！自信を持ってプロと言えるスキルを！