background-img 와 <img>

🔴 img 태그

사용자가 페이지를 인쇄하고 기본적으로 이미지가 포함되도록 하려는 경우,
디자인 요소뿐만 아니라 콘텐츠 와 관련된 경우 사용한다.

색인을 생성하기 때문에 검색엔진 최적화(SEO)에 좋다.
이미지 태그에는 대체 텍스트와 제목 속성을 추가하는 속성이 있고 이를 검색 엔진에서 선택할 수 있다.

CSS에 여러 개의 큰 배경 이미지가 선언되어 있는 경우,
브라우저는 CSS 파일을 구문 분석하고 이미지를 풀다운하는 데 시간이 더 오래 걸리므로
전체 페이지의 로드가 지연된다. 이미지 태그를 사용하면 HTML 파싱 때 요청이 이루어지므로
문서에서 태그 앞에 오는 모든 콘텐츠는 사용자가 읽기 시작할 수 있는 정보가 된다.
이는 성능 면에서 좋은 점이다.

🔵 background-image 사용 상황

순전히 디자인에 사용되는 경우, 이미지가 콘텐츠의 일부가 아닌 경우,
반복되는 아이콘 같은 이미지를 작성할 경우,
사용자가 페이지를 인쇄하거나 기본적으로 이미지를 포함하지 않으려는 경우 사용한다.

background-img 속성은 검색엔진에 노출되지 않기 때문에
검색 노출이 필요한 컨텐츠나 상품 사진, 섬네일 같이 변경될 확률이 높은
이미지일 경우 img 태그를 사용하는 것이 바람직하다.

작은 이미지의 경우 CSS 스프라이트와 같이 다운로드 시간을 개선 할 필요가 있다.


💡 웹 페이지에서 이미지를 불러오지 못 하는 경우
img 태그는 검색엔진이 '이미지'라고 이해하기 때문에 alt 의 대체텍스트와
깨진 이미지를 보여주면서 사용자에게 접근성을 보충해줄 수 있지만,
background-img 는 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하기 때문에
검색엔진이 인식하지 못하므로 색인이 불가능하다.