img tag 사용할 경우, 이유

• 이미지가 디자인적인 요소가 아닌 내용과 관련이 있을 경우
• 시멘틱 태그 사용으로 검색 엔진에서 검색 시 노출이 됨

css 속성인 background-image 사용할 경우, 이유

• 순수하게 디자인적인 목적으로 이미지를 사용할 때
• 동일 이미지를 반복해서 표현하고 싶을 때
• CSS sprites를 이용해서 성능을 향상 시키고 싶을 때

이 중 CSS sprites를 이용해서 성능을 향상시킨다는 것이 이해가 가지 않아서 검색해봤다.

브라우저는 한번에 하나의 파일만 가져올수 있다. 그렇기 때문에 이미지를 여러개 요청하게 되면 그만큼 서버로 요청도 많아지게되고 요청이 많아지는 만큼 네트워크 지연도 많아지게 되고 페이지 랜더링이 늦어진다.
그렇기 때문에 많은 사이트에서 HTTP 요청 횟수를 줄이기 위해서 로고나 아이콘과 같은 사진들을 하나로 합쳐서(Sprite) 하나의 이미지로 만들어 보내는 것이다.
출처:https://likelion-kgu.tistory.com/m/82

작은 이미지 로고 같은 것들을 하나의 이미지로 저장해서 한 번에 요청하고 그 중에 필요한 것만 가져다 쓰는 방법이다.

두 가지 방법 중 이미지 자체가 컨텐츠와 관련이 있고 검색에 노출되어야 한다면 img태그를,
그렇지 않고 순수하게 디자인적인 목적으로 혹은 동일 이미지를 반복해서 표현하고 싶을 때는 css속성을 사용하면 된다.