ハシウェブ

Web制作、プログラミングに関する情報を発信するブログ

画像はどっち?background-imageとimgタグの使い分け

画像はどっち?background-imageとimgタグの使い分け

「画像は、CSSでbackground-imageを使えばいいの?HTMLでimgタグを使えばいいの?」

「background-imageとimgの違いがわからない」

悩み

HTMLコーディング初心者の人から、こんな質問をうけることが多いです。

じつは、background-imageは単なる装飾imgは内容と関係のある画像で使い分けます。

私は、2015年頃からWeb制作の仕事をはじめて、160件ほどのWebサイトを制作してきました。
その間、いろいろな失敗を繰り返し、クライアントからのフィードバックや本などで勉強することにより、多くのノウハウを得ることができました。

そこで、この記事では、background-imageとimg、それぞれの特徴、具体的な使用例を解説しています。

この記事を読めば、画像を表示させるときにbackground-imageとimgのどちらを使えばいいかがわかります。

目次
  1. background-imageとimgの使い分け
    1. background-image
    2. img
  2. まとめ

background-imageとimgの使い分け

  • img … 本文、内容と関係のある画像
  • background-image … 本文、内容とは直接関係ない装飾、デザイン等

内容と関係があるかないかという基準だとわかりにくいかもしれませんが、別の書き方をするとHTMLのソースを見て見やすいか見にくいかという判断でもいいと思います。

HTMLソースを見たとき、pタグやhタグの中にimgがあるととても見にいです。
タイトルが何なのか、文章に何が書いてあるのか、これを邪魔するような画像はbackground-imageにしたほうがいいといえます。

background-image

一般的な背景画像はCSSで画像パスを指定することで表示できます。

div{
  // 画像パス
  background-image: url(../img/apple.jpg);
}

ただ、ホームページの読み込みに一番負荷をかけるのは画像ファイルなので、CSSできることはCSSを使って表現させるほうがいいです。
グラデーションや影のようなデザインも以前は画像しか表現できませんでしたが、現在ではCSSで十分表現できます。

具体的な使用例
  • 背景画像
  • アイコン画像
  • 装飾画像
background-imageで画像表示するときの特徴

基本的にはどんなタグにも指定できますが、サイズが指定されているか、テキストなどで実際のサイズがある必要があります。(サイズ指定のない空要素では表示されません)

background-image以外の、backgroundのCSSを指定することにより、繰り返し表示などをすることができます。

画像繰り返し表示の指定

div{
  //繰り返し(デフォルト)
  background-repeat: repeat;

  //繰り返しさせない
  background-repeat: no-repeat;
}

画像位置の指定

div{
  // 横中央 縦中央
  background-position: center center;

  // 横右 縦上
  background-position: right top;

  // 横左 縦下
  background-position: left bottom;
}

画像のサイズを指定する

div{
  // 背景画像サイズを指定
  background-size: 100px 100px;

  // 表示エリア全体が埋まる最小画像サイズに指定
  background-size: cover;

  // 画像の比率を維持して表示エリアに入る最大画像サイズを指定
  background-size: contain;
}

背景(background)についてはこちらの記事で解説しています。

背景を指定する!background-imageの使い方、一括、複数での書き方

Webサイトに背景を指定する方法を知りたいですか?この記事では、Webサイトに背景を指定する方法、ショートハンドの書き方、複数指定する方法などについて解説しています。ぜひご覧ください。

装飾、アイコンは単純に背景として使うよりも疑似要素:before、:afterに指定したほうがいいです。

【CSS】疑似要素(:before、:after)とは?よくあるミス、使い方

コーディングで使う疑似要素について知りたいですか?この記事では疑似要素についての解説、よくあるミスについて、おもな使い方(アイコン、図形、装飾、連番)について紹介しています。ぜひご覧ください。

img

imgタグで画像を指定する場合は、CSSを使わなくても表示させることができますす。
figureタグにいれられるものは「img」という考え方でもいいです。

imgのalt属性に何を入れるか考えたときに、「文章の流れ上、意味わからないな」と感じるものは、imgに適していないと思います。

例えば、alt属性に「装飾」としか書けない場合は、imgタグに適していないといえます。

<img src="img/pattern.jpg" width="320" height="240" alt="装飾">
具体的な使用例
  • 投稿のサムネイル画像
  • 商品紹介の画像
  • 人物紹介の画像
imgで画像表示するときの特徴

imgタグのsrc属性に画像ファイルのパスを記述することで画像が表示されます。

CSSのobject-fitを使うと、表示エリアに合わせたトリミングや拡大をすることができます。

<img src="img/apple.jpg" width="320" height="240" alt="りんご">
りんご
りんご
ビジネスマン
ビジネスマン

ロゴとかは少し考え方が違うかもしれませんが、単なる装飾ではないという認識でimgにします。

object-fitについては、以下の記事で紹介しています。

CSSでimg画像をトリミングしたい! object-fitの使い方【IEにも対応】

CSSのobject-fitを使って画像をトリミングする方法を知りたいですか?この記事では、object-fitの基本的な使い方、IEの対応方法、効率的な使い方を紹介しています。ぜひご覧ください。

「画像ファイルはどの形式を使ったらいいのか」については、以下の記事で解説しています。

画像ファイルはどれを使う?JPG、PNG、SVG、GIF、WEBPの使い分け

HTMLコーディングのときに画像ファイルの形式をどう使い分けていいか悩んでいますか?この記事ではどのように使い分ければいいか、実際にどんなところに使えばいいかを解説しています。ぜひご覧ください。

まとめ

background-imageとimgの使い分けについて紹介しました。

  • background-image … 背景画像、アイコン画像、装飾画像 など
  • img … 投稿のサムネイル画像、商品紹介の画像、人物紹介の画像 など

画像は適切な方法で指定するとソースが読みやすくなります。