나는 이렇게 학습한다/Etc
<img > 태그 와 {background-image} 의 차이를 알고 싶어?
daco2020
2021. 11. 1. 22:16
웹페이지에 이미지를 넣는 방식은 크게 두 가지가 있다.
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/시맨틱_웹