<img /> 와 background-url

배경

여느 날과 같이 포트폴리오 목적의 웹 사이트를 만들다가 옆의 팀원 분의 코드를 참조하며 내 코드와 비교하고 있었는데 이미지를 웹에 띄울 때 서로 다른 방식을 사용한다는 것을 발견했다.

나는 웹에 이미지를 표현할 때 보통 img태그 사용을 많이 .. 아니 그냥 전부 그렇게 해왔는데, 생각 보다 많은 팀원 분들이 CSS의 background-url을 사용해서 이미지를 표현한다는 것을 알게 되었다.

궁금한 건 못 참는다!

솔직히 말하면, 그 때 바로 찾아본 건 아니다. 정확히 두 방식의 차이점이 뭔지 모른채로 일단 당장 급한 것들부터 처리하고 있었고, 조금 여유로워진 상태에서 자연스럽게 이미지 태그를 또 사용하다가 이전의 궁금증이 다시 떠올라서 검색을 통해 찾아봤다.

img vs background-url 라는 검색어를 통해 찾아보니 최상단의 게시글이 스택 오버플로우 글이였고 나와 같은 궁금증을 가졌던 사람이 스택 오버플로우에 질문을 (무려 2011년에...) 올려놓은 것을 보고 그곳의 해답을 바탕으로 지금 이 글을 작성한다.

img vs bacgkround-url

Img 태그의 적절한 사용 예

1. 사람들이 당신의 페이지를 프린트하게 만들 의도라면, 그리고 이미지가 기본값으로 포함되어 있길 원한다면 alt속성을 가진 img 태그를 사용해라.
2. 이미지가 경고 아이콘과 같이 중요한 시멘틱 의미를 가지고 있다면 img 태그를 사용해라(alt속성 을 가져야함). 이는 이미지의 의미가 스크린 리더를 포함한 모든 사용자들에게 전달될 수 있도록 한다.

Img 태그의 실용적인 사용 예

1. 만약 이미지가 로고, 다이어그램 또는 사람(여기서 사람은 누구인지 모를 특정 다수의 사람들이 아닌, 진짜 강조하고 싶은 한 사람)과 같이 내용의 일부라면 alt속성을 가진 img태그를 사용해라.
2. 만약 글자 크기에 비례해서 이미지를 렌더링하기 위해 브라우저 크기 조정에 의존한다면 img태그를 사용해라.
3. background-imgae 대신 img 태그를 사용하는 건 배경 위에 있는 애니메이션의 퍼포먼스를 극적으로 향상시킨다.

CSS background-image는 언제 사용하나

1. 이미지가 내용의 일부가 아닐 때 background-image를 사용해라.
2. 글자를 이미지 형식으로 대체할 때 background-image를 사용해라. 예) 단락 / 머리글
3. 사람들이 당신의 페이지를 프린트하게 만들 의도이고 이미지를 기본값으로 포함되어 있지 않길 원한다면 background-image를 사용해라.
4. 다운로드 시간을 개선시키고 싶다면 background-image를 사용해라.
5. 이미지의 일부만을 보여주고 싶다면 background-image를 사용해라.
6. 배경 이미지가 부모의 전체 창을 채우도록 늘려지길 원한다면 background-size: cover를 포함한 background-image를 사용해라.

내린 결론

페이지의 문맥에 영향을 미치는 이미지라면 태그를 사용하자. 그게 아니고 그저 디자인을 위해 사용한다면, CSS로 사용하면 될 것 같다.