앞서 'HTML을 Semantic하게 작성해야 하는 이유'와 '검색최적화의 연관성'에 대해 알아보았다. 그럼 HTML과 CSS라는 서로 다른 언어에서 비주얼적으로 동일한 동작을 구현하는 경우 어떤걸 써야할까?
HTML <img> vs CSS background-image
- 웹 화면 상의 이미지를 나타내고자 할 때, 두 가지 방법이 있다.
1) HTML에<img>로 직접 마크업 한다.
2) HTML에는 마크업 하지 않고, CSS에서 background-image로 처리한다.
HTML<img> 태그를 쓰는 경우
- 디자인 요소만이 아닌 컨텐츠와 관련된 이미지 일 경우
- 검색 엔진에 걸려야 할 경우 (구글에서는 background image를 자동적으로 검색하지 않는다.)
- 스크린 리더, 검색 엔진에서 읽어주는 이미지 대체 설명(alt text), 타이틀 속성이 필요한 경우
- 퍼포먼스적으로 좋다. CSS에서 대용량의 백그라운드 이미지를 선언하는 경우, 브라우저가 CSS 파일을 찾고 로딩하는데 시간이 걸려서, 전체 페이지를 로딩하는데 시간이 지연될 수 있다. 이 경우 HTML
<img>태그를 써서 HTML이 찾을 수 있도록 하면 HTML 문서에 있는 정보는 유저가 바로 읽을 수 있다. - 인라인 이미지(img or picture)는 picturefill 툴과 늦은 로딩을 방지할 수 있다.
- 이미지가 기본값으로 들어가야하거나, 프린트 해서 봐야하는 경우
- 브라우저 크기 조정을 사용해 텍스트 크기에 비례하여 이미지를 렌더링하는 경우
CSS background-image를 쓰는 경우
- 오직 디자인 요소만으로 사용될 때
- 이미지가 컨텐츠의 일부가 아닐 때
- 이미지가 작은 용량일 경우
- 기본값으로 이미지가 반드시 나오지 않아도 될 경우
- 이미지를 반복할 때(블로그의 author icon, date icon..)
결론, HTML img 태그는 이미지 컨텐츠가 정보를 담고 있고, 처리 속도나 퍼포먼스 측면이 좋아야 할 때 쓰고, 정보성이 없고 스타일링을 위한 요소라면 background-image를 쓴다.
"이 이미지가 사용자가 컨텐츠를 이해하는데 도움이 되는 요소인가?"를 질문해보자. '그렇다!'면 HTML의 img 태그를, 그렇지 않다면 CSS의 background-image로 처리한다.
+ Semantic Web과 Semantic Tag
'어떤 태그를 쓸 것인가'의 질문은 Semantic Tag를 쓰고, Semantic Web을 구현하는 것과도 관련이 있다.
Semantic은 '의미론적인'이라는 뜻으로 웹과 태그를 구성한다는 것은 의미론적인 태그를 써서 의미론적인 웹을 구성한다는 것이다.
예를 들어, HTML에서 구획을 나누고 그룹핑하는<div>와 <span>의 경우 무의미한 태그라고 볼 수 있다. 이렇게 무의미한 태그만 남발하다보니 웹이 거대해지고 복잡해지면 컴퓨터의 효율적인 일처리가 어려워진다.
그래서 Semantic Tag, 즉 의미가 있는 태그 <header>, <nav>, <footer>로 한 번에 봐도 어떤 성격의 컨텐츠를 담고 있는지 알 수 있는 태그를 써주면 태그를 써주었을 뿐인데 컴퓨터가 알아서 섹션을 나누고 이해해버리는 원샷원킬의 놀라운 일이 생긴다.
그렇기 때문에 코드를 짜는 개발자는 무의미한 코드로 화면에 구현해내는 것만을 목표로 하는 것이 아니라, 사용자 경험을 고려해 '시멘틱 웹을 구현하기 위해 어떤 태그를 쓸 것이며, 내 사이트의 사용자가 조금 더 편리한 경험을 하게 하려면 어떻게 해야 할까?'를 염두해 두어야 한다. 생각하며 개발하자!
관련 포스팅
출처: https://blog.px-lab.com/html-img-tag-vs-css-background-image/
