서론

html에서 이미지를 보여주는 방식중 다음 두가지에 대해서 비교하려 합니다.

1. img tag 사용
2. css의 background-image 적용

두 방법 모두 동일하게 이미지를 웹페이지 상에서 볼 수 있습니다. (아래 codepen 참고)

결과적으로는 같지만(이미지를 보여줌) 차이점이 존재 합니다.

차이점

1. img의 tag는 명확하게 이것이 이미지라는 것을 알 수 있습니다.
Semantic tag와 같은 개념으로 접근하면 img는 이미지를 나타내는 명확한 의미를 가지고 있습니다. 반면 div의 background-image 스타일을 적용한 것은 html코드만을 봐서는 이것이 이미지 인지 알 수 없습니다. 따라서 기계는 html을 구성하는 많은 div tag에서 어떤것이 이미지를 의미하고 있는지 특정 짓기가 어려울 것입니다.

2. img tag의 alt 속성을 이용하여 검색 엔진에 최적화 할 수 있습니다.

Alt 속성을 사용하는 또 다른 이유는 이미지를 링크로 사용하는 경우 해당 이미지의 대체 텍스트가 텍스트 링크의 앵커 텍스트와 비슷하게 취급된다는 점입니다. (중략..)
마지막으로 이미지의 파일 이름과 대체 텍스트를 최적화하면 Google 이미지 검색과 같은 이미지 검색 프로젝트에서 이미지를 더욱 쉽게 잘 이해할 수 있습니다.
이미지 최적화하기- Google SEO

반면 css를 사용하여 이미지를 표시하는 방식은 피해야 된다고 설명하고 있습니다.
따라서 css를 통해서 img를 표현한다면 검색엔지에 노출되지 않을 가능성이 높습니다.

결론

1. img와 같이 의미있는 태그는 html문서 내의 콘텐츠중의 하나로써 이미지를 표현할 때, 사용하여 콘텐츠로써 검색엔진의 노출을 노립니다.
2. background-image는 콘텐츠와 상관없는 단순히 style로써 웹페이지를 꾸며주고 싶을 때 (ex-배경이미지) 사용하면 될것 같습니다.

Reference

img요소와-alt속성의-최적화
검색엔진 최적화(SEO) 기본 가이드 - google