【Retina対応】background-imageを最適化する方法！

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

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

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

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

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

srcset/sizes属性やpictureタグを使ったレスポンシブイメージを解説

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が非対応のブラウザ向けのフォールバックです。

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

また、アイコンのような小さい画像であれば、わざわざ複数サイズ用意したところで、パフォーマンス的な差はほぼ0です。

カラクリ無しの完全無料！あなた専属のメンターが付く？