模写修行メディア

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

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

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

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

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

HTMLのsrcset属性やpictureタグを使ったレスポンシブイメージを紹介

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

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

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

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

使用用途の違い

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

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

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

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

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

Point
imgタグで入れた画像もalt属性を空にすれば、装飾目的の画像と意味的には同じです。

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

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行目はIEなどのimage-setが非対応のブラウザ向けのフォールバックです。3行目の-webkit-はChromeやEdge用に指定しています。

以前は-webkit-device-pixel-ratioresolutionを使用していましたが、全てのモダンブラウザでimage-setが使えるようになったので、image-setを使った方がスッキリ書けて良いです

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で調整する方が個人的には良いかなと感じています。

コーディングの練習が出来るサービスを作りました 🎉

模写修行はこんな方におすすめ!

  • プロの制作フローを学びたい
  • どんなことを考えながら書くのか知りたい
  • 実践的な練習がしたい

【初級編】はこんな方におすすめ!

  • 基礎学習中、もしくは終えたばかり
  • サイト制作経験が5サイト未満 (実際の案件でなくてもOK)

【中級編】はこんな方におすすめ!

  • CSS設計を意識したコーディングを学びたい
  • SCSSを使った書き方を学びたい (解説はSCSSを使わない前提でします)

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

模写修行を見る

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

大学・大学院時代から個人で仕事をする。卒業後5年間のフリーランス期を経て、法人化。マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやります。webサービス作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

駆け出しエンジニアのためのコーディング練習教材