img태그와 background img태그의 차이

 

이 둘의 차이는 단순히 사용 방법만이 아니라 생각보다 여러 차이가 있다. 

 

---

 

img 태그

이미지 태그는 html의 요소로 다음과 같이 사용할 수 있다.

<img src="이미지url" alt='대체 메시지'/>

※특징

 

• 이미지 로딩이 실패할 때 default이미지와 대체 메시지로 대체가 가능하다.
• HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 좋다.
• 검색 엔진에서 색인을 생성하여 검색시에 노출이 된다.
  (img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시킨다.)

---

background-img 태그

백그라운드 이미지 태그는 css에서 속성을 활용해 다음과 같이 넣을 수 있다.

{background-image: url("이미지url")}

※특징

• 순수하게 디자인에 사용
• 대체 메시지, default이미지 불가능
• CSS속성이므로 성능면에서 img 태그보다 떨어진다.
• 스타일 속성이기때문에 자동으로 색인화하지 않아서 검색 시 노출되지 않는다. 

 

 

결론: 이미지가 사용자에게 내용을 이해하는데 도움을 준다면 img태그를 사용하고 그렇지 않으면 background image를 사용하면 된다.