<img > 태그 와 {background-image} 의 차이를 알고 싶어?

이렇게 귀여운 이미지를 웹페이지에 넣을려면 어떻게 해야할까?

 

  웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다.

1번.  HTML에서 <img /> 태그를 활용해 넣는 방법.

<img src="이미지 링크"/>​

 

2번. CSS 에서 background-image 속성을 활용해 넣는 방법.

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

   그렇다면 이 둘의 차이점은 무엇인가? (줄여서 1번, 2번이라 지칭하겠음)

• 1번은 이미지 로딩이 실패할 때, alt="대체 메시지"로 대체 결과물을 출력할 수 있지만 2번은 그렇지 못하다.
• 1번은 HTML이 구문 분석될 때 요청이 이루어지므로 성능면에서 2번보다 좋다.
• 1번은 검색 엔진에서 색인을 생성하여 검색시에 노출이 되지만 2번은 자동으로 색인화하지 않기 때문에 검색 시 노출되지 않는다.
  (자세한 이유는 하단에)

   그럼 이 둘을 어떨 때 사용하면 좋을까?

1번 HTML <img /> 태그 활용

• 검색 시 노출이 되도록 만들고 싶을 때
• 콘텐츠에 관련이 있는 이미지일 때
• 웹페이지 성능을 높이고 싶을 때

2번 CSS background-image 속성 활용

• 디자인적인 요소로만 이미지를 활용하고 싶을 때
• 콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때

   결론

검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직하다.

 

---

 

 

추가 설명

근데 Img 태그는 왜 검색 시에 노출이 되고 background-image는 왜 검색 시에 노출이 되지 않을까?

• img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있으며, alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출시키지만 background-image 는 태그가 아닌 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하고 검색엔진이 인식하지 못하는 것이다.
• img 태그처럼 태그 자체만으로도 의미를 알 수 있는 태그들을 시맨틱 태그라고 부르는데, 시맨틱 태그를 쉽게 표현하자면 "내용이 뭔지 태그명만으로 알 수 있도록 만든 것"이라고 할 수 있다.

TMI

이렇듯 시멘틱 태그는 컴퓨터와 사람 모두에게 그 의미를 명확하게 설명해주는 역할을 한다. 이는 시멘틱 웹을 기반으로 두고 있는데, 사람만이 웹에 수많은 정보의 의미를 파악하는 것이 아닌 컴퓨터가 그 일을 할 수 있도록 만든 것이 시맨틱 웹이다. 

 

---

참고

https://ko.wikipedia.org/wiki/시맨틱_웹

https://namu.wiki/w/시맨틱