"img태그 쓸까? 그냥 {background-image}쓸까? 근데 뭔차이지?"

사이트에 이미지를 넣는 방법은 두가지가 있다.
HTML img 태그를 사용하는 방식과 CSS background-img 선언하여 넣는 방식
이 두가지 방식은 Semantic Web적인 부분에서 많은 차이가 있는데, 어떤 차이가 있는지 알아볼 것이다.

📌 HTML <img> Tag vs CSS background img

1. HTML <img> Tag

<img src="이미지 주소" alt="대체 텍스트">

2. CSS {background img}

img{background-image: url("이미지 링크"); }

👆 1번 VS 2번

• 1번은 만약 이미지 로딩이 실패했을 때, alt="대체 텍스트"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다.
• 1번은 기계가 img라는 것을 바로 이해할 수 있지만, 2번은 스타일적인 요소로 이해하기 때문에 Semantic하지 못하고 검색엔진에 전혀 효과적이지 않다.
• 1번은 HTML이 parsing 될 때 request가 이루어지므로 img태그 앞에 오는 모든 컨텐츠를 사용자가 먼저 읽을 수 있어 성능면에서 더 좋다.
• 기본적으로 2번의 경우 이미지 프린트가 불가능하다.

📌 그럼 언제, 무엇을 써야 바람직할까?

1. HTML <img> Tag

• 이미지가 디자인적인 요소로 쓰이지 않고 컨텐츠 자체일 때.
• 검색을 통해 정보를 노출해야 하는 경우 img 태그의 alt 속성을 사용해 이미지에 대한 설명을 통해 Google 봇이 크롤링하거나 색인할 수 있어 내 이미지가 사용자의 검색에 노출되기에 효과적이다.
• 이미지도 함께 프린트가 필요한 경우 .

2. CSS {background img}

• 이미지가 컨텐츠의 내용 부분하고 무관하고 단지 디자인적인 요소로만 사용될 때.(검색엔진이 인식 못해도 상관없는 이미지)
• 1번과는 반대로 유저들이 프린트하지 못하도록 할 때.(프린트 미리보기에 표시되지 않는다.)
• 동일한 이미지를 반복적으로 표시하고 싶을때 효과적이다.

👉 요약

• 내가 쓰려는 이미지가 과연 컨텐츠 내용에 관계가 있는지를 생각하여 좀 더 Semantic한 1번과 같은 코딩을 해야하고, 단지 디자인적인 요소로 이미지를 이용할 경우 2번과 같은 코딩을 하면된다. 정리하자면, 검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직하다.