模写修行メディア

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

※ 当サイトの記事には、広告を含む場合があります。

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

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

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

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

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

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

私たちが運営している、現役エンジニアによるメンタリングサービス:Hello Mentorは、1人1人にオーダーメイドでロードマップを作成しています。

web制作/web開発/デザインまで、経験豊富な現役エンジニアがメンターをします。

  • 検索しても解決しない問題が多い...
  • 勉強方法や目指す方向が合っているか不安...
  • 転職・独立できるのか不安...
  • SNS等で情報が多すぎて何が本当かわからない...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

プロのサポートで3倍速でスキルアップ!

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

この記事の目次

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

【プログラミンング学習中の方へ!】独学の非効率さを解消して3倍速でスキルアップしませんか?

Hello Mentor(ハローメンター)
Hello Mentor(ハローメンター)

プログラミングは独学可能です。このメディアを運営しているメンバーも独学で勉強してきました。ただし、独学には大きな問題があります。

独学は下記の5つの点でとても非効率です!

  • 最適な学習計画が立てられない
  • 正しい教材の選定ができない
  • 間違った方向に進んでいる可能性がある
  • 必須スキルの欠落に気づかない
  • 30分以上悩むのは時間の無駄

この問題を解決するために、現役エンジニアによるメンタリングサービスHello Mentor(ハローメンター)を始めました。

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

プログラミングスクールのように高額な料金はかかりません。少しの投資で圧倒的に学習を効率化したい方は、ぜひ下記のリンクからサービスサイトをご覧ください。

あなた専用のロードマップを作成!

メンタリングの内容を見てみる

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

web制作ロードマップ解説動画プレゼント👉

LINE登録でGET

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

\Share/

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

実務レベルを体験するためのコーディング練習教材