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

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

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

• 独学に限界を感じている...
• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。無料相談もお気軽にお申し込みください。

👆 メンターやってます 👆

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

【初学者・中級者の方】独学に限界を感じてませんか？

プログラミングやデザインは独学可能ですが、ほとんんどの方が苦戦します。

↓このように感じていませんか？

• 何をどこまで勉強すれば良いかわからない...
• 自分の書き方が正しいかわからない...
• 検索しても解決しない問題が多い...
• 転職や副業するまでの道が見えない...

そんな問題を解決するために、模写修行やこのメディアを作ったエンジニア/デザイナー中心に、メンタリングサービスHello Mentorを始めました。

初級者から中級者まで対応できる、数少ないサービスです。

スクールのような大金は必要ありません。高額な費用は払いたくないけど、プロのサポートが欲しい方は、ぜひ下記のリンクからサービス詳細をご覧ください。

👆 メンターは全員現役エンジニア 👆

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です。

独学に限界を感じていませんか？