TIL.04 background-image vs img tag

background-image用法

背景画像はいつ使用しますか?

img tagはいつ使いますか?

結論

1.使用背景-画像

### 1.1
divラベルを作成します.background-colorを黄色に設定してdivラベルの領域を表示します.
```HTML
背景画像
```

.bg-img {
	background-color: yellow;
}

オリジナル画像

1.2

クラスを選択するとbackground-imageが適用されますが、divラベルが持つサイズのみが画像に出力されることを確認できます.

.bg-img {
	background-color: yellow;
    	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
}

1.3

divラベルのサイズを小さくして、画像全体を出力しながらサイズを小さくしたいです.しかし、予想とは異なり、元の画像のサイズは変更されていないようで、divラベルのサイズだけが設定されています.

.bg-img {
	background-color: yellow;
        background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
    	height: 500px;
    	width: 500px;
}

1.4

background-sizeプロパティが追加され、100%に設定されます.以前より良いですが、元の画像にはカットされた部分が残っています.

.bg-img {
	background-color: yellow;
   	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
   	background-size: 100%;
    	height: 500px;
    	width: 500px;
}

1.5

heightプロパティを700に追加すると、divラベルの縦線スケールが元の画像の縦線スケールよりも長く、画像が繰り返されることが分かった.

.bg-img {
	background-color: yellow;
   	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
   	background-size: 100%;
    	height: 700px;
        width: 500px;

1.6

重複する画像を除去するためにbackground-repeatをno-repeatに設定します.画像は意図的に出力されるが、divラベルは700 pxのサイズを占めているため、background-colorの黄色を示している.

.bg-img {
	background-color: yellow;
    	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
        background-size: 100%;
      	background-repeat: no-repeat;
      	height: 700px;
      	width: 500px;
}

2.いつ、なぜ背景画像を使うのですか。

画像を純粋な設計目的に使用

画像がコンテンツに関係ない場合

同一画像を繰り返し表示したい場合

CSS spritesページダウンロードのパフォーマンスを向上させるために使用

ロードに失敗した場合、切断された画像とalt textは表示されません.

ユーザがページを印刷する場合、デフォルトではその画像は印刷されません(サンプルページを印刷しようとしますが、サンプルページの画像は印刷プレビューに表示されません).

3.いつ、なぜimg tagを使うのですか?

画像自体が設計要素でない場合

検索エンジンは、ページのトピックをよりよく説明し、検索を暴露するのに役立ちます.

CSSが複数の大きな背景画像を宣言した場合、ブラウザがCSSファイルを解析およびダウンロードする時間が長くなるため、ページ全体のロードが遅れる.<img>タグを使用すると、HTMLの解析時に要求が発行されるため、ユーザはまずimgタグの前のすべての内容を読み取ることができる.(パフォーマンス向上)

ロード失敗時のフラクチャ画像とalt textが表示されます.

印刷時に画像を含めることができます.

altプロパティ、スクリーンリーダーは理解できます.

4.結論

提供されるサービスでは、画像が検索エンジンに露出し、コンテンツの一部である必要がある場合、imgタグを使用する必要があります.逆に、画像を設計する場合はbackground-imgageプロパティを使用します.

reference

https://blog.px-lab.com/html-img-tag-vs-css-background-image/
https://velog.io/@skyosk123/img-vs-background-image
https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern