スマートフォンの横表示には対応していません

Laboratory

なないろ研究所

⼈と⼈をつなぐコミュニケーションをもっと世の中に。
それが私達が⾏うこと。

なないろ研究所では日々、様々なことをリサーチし、実験しています。

コミュニケーションの流通をお手伝いするために、日々様々なリサーチを行い、分析し、時に実験しております。

そんな日々の活動内容においてログをつけております。

このような情報共有が、我々が考えるコミュニケーションの一つの形です。

スマホ表示の時にパソコン表示時の画像を読み込まない方法

こんにちは、なないろフロントエンドプログラマーの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で表示すると言うのが良いと思います。

私達は京都でNo1のデザイン力・UI力を目指す

システム開発・Web開発カンパニー

株式会社なないろです。

各種CMS、企業サイト、キャンペーンサイト、顧客管理システム、IoTシステムなど幅広いITソリューションを優良なデザインとUIで、SEOソリューションをあわせてお客様の目標達成を行う企業です。