[HTML&CSS] <img> 와 background-image의 차이

이미지를 넣기 위한 방법으로 두가지가 있다.

☝🏻첫번째, <img src="경로" alt="이미지 대체 설명">
✌🏻두번째, backgroung-iamge:url('이미지 경로');

두가지의 차이를 알기 위해서는 시멘틱 웹과 시멘틱 태그에 대한 이해가 있어야한다.

차이점

• <img> 는 background-image 와 달리 alt라는 속성값이 존재한다. 이미지 로딩이 실패했을 때, 대체 결과물로 alt값을 출력할 수 있다.
• 검색 엔진에서 <img>는 노출이 되지만, background-image 는 그렇지 않다.
  • 그 이유는 <img>는 태그 자체가 '이미지'라는 의미를 갖고 있는 시멘틱 태그 이며, alt 속성에 넣은 문자열을 검색엔진 이 이해해서 웹이 노출 시켜주는 것이다.
  • background-image 는 css의 이기 때문에 검색엔진이 이를 인식하지 못한다.

결론

<img>와 background-image 를 필요에 따라 적절하게 섞어서 사용하면 되지만,

• 해당 이미지 자체가 정보 전달의 의미가 있는 것이라면 (예를 들어, 광고 배너, 상품 이미지, 프로필 사진 등...) <img> 를 사용하고,
• 단순히 디자인적 요소(배경 이미지, 애니메이션 효과 이미지 등)라면 background-image를 사용하는 것이 좋을 것 같다!

마무리✨

이미지를 넣을 때, <img>와 background-image의 사용 구분이 모호했었는데 궁금증을 해결할 수 있었다.
정보를 전달하는 이미지는 <img> 단순 디자인 이미지는 background-image
같은 결과값을 나타내도 그 의미가 다르기 때문에 개념과 원리를 확실히 알고 사용하는 것이 중요하다는 것을 느꼈다!