こんにちは、なないろフロントエンドプログラマーのTです。

スマホ表示の際、ページ容量を抑えたいのにパソコン表示の画像を無駄に読み込まないでほしい。

と言うことがよくあるのでHTMLとCSSのみで解決する方法を探してみました。

解決方法

まず、imgタグではdisplay:noneにしていてもダウンロードをしているのでページ容量を抑えることは出来ません。

そこで、CSSのbackground-imageを使います。

実装方法は下記の通りです。

.imageBox{
  width:300px;
  height:180px;
  background-repeat:no-repeat;
}

@media screen and (min-width:769px){
  /*ブラウザの幅が769以上の時に適用*/
  .imageBox{
    background-image:url(./PC_image.jpg);
  }
}

@media screen and (max-width:768px){
  /*ブラウザの幅が768以下の時に適用*/
  .imageBox{
    background-image:url(./SP_image.jpg);
  }
}

このように、メディアクエリ区切って設定することで、スマホのときはスマホの画像のみ、パソコンのときはパソコンの画像のみ（ブラウザを狭くした場合はスマホの画像も）、読み込むということが出来ます。

この場合background-imageを表示するタグの中身は何も入っていないと思います、その場合widthとheightを指定する必要があることに注意して下さい。

※altなどを付与することができなくなりますので、SEO的には不利になります。

そのため、重要な画像はimgタグを使い、装飾用の画像はbackground-imageで表示すると言うのが良いと思います。