img 태그와 background-image 속성의 차이

우리가 웹페이지에 이미지를 추가하는 방법은 2가지가 있다.

1. <img> 태그 사용하기

<img src="" alt="">

2. <background-image> 속성 사용하기

.selector {
	background-image: url('')
}

이렇게 총 2가지 방법이 있다.
이 글을 쓰기전에 필자가 생각했던 기준은 내가 사용하고자 하는 이미지가 사용자에게 홍보하고 있는 제품의 이해를 도와준다고 생각하면 img 태그를 쓰고, 그냥 스타일적 요소만 추가하고 싶으면 background-image 속성을 사용하는 것이다.

그런데 여기서 검색 노출과 성능을 고려하고자 할때 사용하면 좋은 방법은 img 태그를 사용하는 것이다.
이유는 img 태그는 이미 태그 자체에서 '이미지'라는 의미를 가지고, 이미지 로딩이 실패하는 경우를 대비해 alt 속성을 이용하여 결과물을 대체할 수 있어서 검색엔진이 이해하여 웹에 노출시킬수 있지만 background-image는 태그가 아닌 스타일의 속성이기에 검색엔진이 인식하지 못한다.
그리고 HTML 파일이 분석될 때 요청이 이루어지므로 성능면에서도 당연히 더 좋다.

이런 이유들로 인해 바뀐 생각은 검색 노출과 성능, 디자인을 고려하려면은 두 가지 방법을 상황에 맞게 사용하는 것이 좋을거 같다.