🚩 img vs background-image

HTMLにはimgのラベルがあり、CSSにはbackground-imageの属性があります.どちらの技術も画像をWebページに入れる方法です.両者の違いは何ですか.いつ使えばいいですか.

テキストの置換

HTML

<img src="이미지 경로" alt="이미지 설명">

CSS

background-image: url("이미지 경로");

上記のコードから容易に分かるように、HTMLのimgタグは画像を説明することができ、CSSのbackground-imageは画像の説明を直接与えることができない.画像説明テキストは検索エンジンがインデックスを作成するのに役立ち、SEOに積極的な役割を果たす.また,画像説明はスクリーンリーダーにとっても重要であり,ネットワークアクセス性においても重要である.したがって、imgタグを使用する場合、alt属性またはtitle属性を使用することが望ましい.background-imageを使用すると、代替テキストが完全に提供されないわけではありません.IR技術の使用は可能であり、これは後で再度詳細に理解されるであろう.

画像数

imgタグは1つの画像しか指定できませんが、background-imageを使用すると、蓄積された脈絡に基づいて複数の画像を配置できます.

background-image: url("../../image1.png"),
                  url("../../image2.png");

ロール＃ロール＃

画像が設計的であるだけでなく、コンテンツに密接に関連している場合、imgタグが使用される.逆に、単にコンテンツ関連ではなくデザイン要素であればbackground-imageを用いる.そのため、ロゴやアイコンなどの繰り返し画像を使用する場合に便利です.

パフォーマンス:

パフォーマンスの点では、imgタグを使用すると、background-imageプロパティを使用するよりも優れています.background-imageを介して大きなサイズの画像を取得するには時間がかかるが、imgタグは比較的速い時間で完了することができる.しかし、今後IS技術をbackground-imageと組み合わせて使用すれば、画像の修正、保存などの面でより容易になり、ロード速度も速くなる.

印刷

ページを印刷するときに画像を同時に印刷する場合は、imgを使用することが望ましい.imgマークの画像も一緒に印刷するように設定されているからである.一方、background-imageでは、画像が出力できないため、画像出力が困難な場合に主に使用される.

🚩 IR技術

画像置換技術とは、画像が見えないユーザに適切なテキストを提供することを意味する.imgタグのalt属性を使用してテキストを置き換えることができるが、長さが長すぎる場合にはIRメソッドを使用することもできる.また、background-imageを使用する場合、IR技術を使用して代替テキストが提供される.
実際、視覚的に見えない方法の中で、スクリーンリーダーが認識する方法こそ本当のIR方法である.そこで,CSSを用いて非可視化する方法を徐々に理解し,正しいIR技術を理解する.

1. display:none

ある要素にdisplay:none属性を付与すると、要素の内容だけでなく、要素の空間も占有されません.領域が存在しないため、クリックなどのイベントは機能しません.まったく要素がないと考える.したがって、このプロパティを使用すると、検索エンジンとアシスタントが認識されません.Webアクセス性に反するため、使用しないほうがいいです.

2. visibility: hidden

このプロパティを使用すると、コンテンツは表示されませんが、スペースが消費されます.display:noneと同様に、クリックなどのアクティビティが機能せず、スクリーンリーダーが読み取れないため、ネットワークアクセス性が低下する.

3.要素サイズを0に設定

width: 0; 
height: 0;
font-size: 0;
line-height: 0;

width、height、font-size、line-heightを0に設定するのも視覚的には見えない方法の一つですが、この方法ではスクリーンリーダーが認識できないものもあります.

4. opacity:0

この方法は、opacityを0に指定して透明にして非表示にする方法である.イベントが発生し、スクリーンリーダーによって読み取られますが、visibility:hiddenのようにスペースが残るので、これは良い方法ではありません.

5. text-indent

text-indentプロパティは、インデント、インデントを行うプロパティです.値が正の場合はインデントし、値が負の場合はインデントします.

text-indent:-9999px

内を遠くまで書いてスクリーンに見えないようにする手法です.この方法では位置を占めているが,スクリーンリーダーによって読み取られる.しかし、これは最善の方法ではありません.レイヤ全体のサイズが大きすぎるため、検索エンジンの最適化に悪影響を及ぼす可能性があります.

6. clip, clip-path

これまで、要素を隠す方法はたくさん見られましたが、あまり良い方法ではありません.今から見てみましょう.これは良いIR方法です.

.hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: polygon(0 0, 0 0, 0 0); /* clip:rect(0px,0px,0px,0px) */
}

コードのプロパティを1つずつ分析し、各プロパティが果たす役割を理解しましょう.
まず、一般的なドキュメントのプロセスから逸脱して他のレイアウトに影響を及ぼさないように、position:absoluteに設定する必要があります.position:absoluteを使用すると、周囲の他の要素はabsoluteの属性を無視して配置されることを覚えておいてください.
その後、width、heightを1 pxに設定し、小さな領域のみを占有し、margin:-1pxを画面に表示する.
その後、overflow:hiddenでコンテンツを非表示にします.clipおよびclip-pathは、要素の特定部分のみを表示する属性であり、画像を切り取る際に非常に有用である.clip:rect(10px 30px 20px 50px);のように、上下左順にpxを指定してカットすることができます.ここに0pxと設置されていて、いっそ隠れてしまいました.同様のプロパティはclip-pathで、トリミング範囲を指定し、この範囲を超える部分的なクリップを指定します.ここではpolygon( 0 0, 0 0, 0 0)で要素を隠します.

🚩 ISテクノロジー

HTMLのimgタグのロード速度はbackground-imageより速いが、imgタグを使用して画像を1つずつロードするには時間がかかる.この場合有用な方法はIS(Image Sprite)技術である.ISテクノロジーは、使用する画像を1つの画像に統合し、サーバにのみ画像ファイルを要求し、CSSのbackground-imageおよびbackground-position属性を使用して必要な画像の部分を切り取る.background-positionは、背景画像の位置を指定して配置する属性である.

.icon{
	background-image:url('이미지 주소');
    background-repeat:no-repeat;
    display:inline-block;
    height:66px;
    width:66px;
 }
 .icon1{
 	background-position:0 0;
 }
 .icon2{
 	background-position:-66px 0;
 }
 .icon3{
 	background-position:-132px 0;
 }
 .icon4{
 	background-position:-198px 0;
 }

ISテクノロジーとIRテクノロジーを組み合わせることで、サーバへの要求回数を最小限に抑えることができ、Webページのロード速度を低減し、画像の管理を容易にすることができます.

ソースとコメント

https://www.oodlestechnologies.com/blogs/difference-between-html-img-tag-and-css-background-image/

https://velog.io/@sklove 96/Web-アクセス性を考慮-テキスト-非表示

https://7942yongdae.tistory.com/95