태그 사용하는 경우 vs background-image로 처리하는 경우

웹페이지에 이미지를 넣을 때 img태그를 넣는 경우가 있고 background-image 스타일을 주는 경우가 있다.

각각의 코딩방식을 쓸 때 차이점이 존재하기 때문이다.

img태그로 쓰는 경우는,

1. 컨텐트에서 해당 이미지가 의미를 가지고 있을 때이다. (semantic meaning)

2. 웹페이지를 프린트할 때 이미지가 제대로 출력되게 하기 위해서이다.

3. SEO(검색엔진)에서 웹페이지의 이미지와 그 alt값이 연관성을 가지게 하고 싶을 경우이다.

4. 스크린 크기에 따라 비율적으로 이미지의 크기가 조절되기를 원할 때 보다 쉽게 하기 위해서이다.

• 그러나 충분히 background-image 로도 처리할 수 있는 문제이기 때문에(image의 wrapper에 padding을 부여) 의미를 조금 더 고려하여 사용해야할 것이다.

반대로 background-image로 처리하는 경우는,

1. 컨텐트에서 해당 이미지 자체에 의미가 없는 경우이다.

   • 반복적인 icon이나 디자인을 위한 이미지는 background-image로 처리하는 것을 지향한다.

2. 웹페이지를 출력할 때 이미지가 출력되게 하고 싶지 않을 때 쓴다.