<img> vs background-image :: 마이구미

이 글은 HTML 에서 제공해주는 img 태그와 CSS 속성 중 background-image 의 차이를 다룬다.
본인은 img 태그만을 사용해왔고, background-image 는 지양해야한다고 생각해왔다.
지금도 비슷한 생각이지만, 스스로 잘못된 오해를 가진 것들도 있어서 글로 남기게 되었다.
참고 링크
https://blog.px-lab.com/html-img-tag-vs-css-background-image/
https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern

 

이미지 컨텐츠를 표현하는 방법에는 크게 두가지가 있다.

 

• HTML 의 <img /> 태그를 활용하는 방법.
• CSS 의 background-image 를 사용하는 방법.

 

두 방식 모두 목적은 같지만, 당연히 존재하는 용도는 다르다.

background-image 는 배경 이미지를 사용하기 위해 사용하면 된다.

 

그렇다면, 배경 이미지는 무엇인가?

본인은 부끄럽게도 이 용어에 대한 정의를 스스로 뚜렷하게 내리지 않고 있었다.

단순히 용어 그대로 배경 이미지라고만 정의내렸다는 것이다.

그래서 배경 이미지와 이미지 자체를 분리할 필요가 없다고 생각했다.

또한 CSS 의 background-image 속성을 위해 CSS 를 인라인 요소로 작성해야하는 코드를 넣고 싶지 않았다.

단순히 개발자적인 생각으로 분리할 필요없이 img 태그로 통일되는 코드를 원했다.

 

// React
// CSS background-image
<div class="thumb" style={{ backgroundImage: `url("${imageUrl}")` }} />

// HTML img tag
<img src={imageUrl} alt="" />

 

이러한 상황에서 하나의 질문을 받는다면 어떻게 말할 수 있을까?

 

img 태그에서 사용되는 이미지 로드가 실패하면 어떻게 되나요?

 

이 질문의 답은 쉽다.

"디폴트 이미지를 넣거나 하는 대안이 존재합니다"라고 말하고 싶겠지만,

오로지 질문에 대한 답은 "broken image 와 alt 텍스트가 보인다" 일 것이다.

 

 

물론 저러한 경우를 원하지 않는다면, 이런것도 우회하면된다.

alt 을 안 넣으면 되고, broken image 도 hide 처리하면 된다.

 

<img src="Error.src" onerror="this.style.display='none'"/>

 

어쨌든 img 태그 사용시에는 기본적으로는 노출이 된다.

 

반대로 background-image 에 넣은 이미지가 에러가 나면 어떻게 될까?

background-image 속성을 사용하면 alt 와 같은 설명을 할 수 없다.

결과적으로 broken image 도 어떠한 텍스트도 노출되지 않는다.

즉, 아무 일도 일어나지 않는다.

 

어떠한 측면에서 바라본다면, 이게 좋지 않아 보일 수도 있다.

그래서 더더욱 img 태그를 써야한다고 생각할 수도 있을 것이다.

하지만 반대로 아무 일도 일어나지 않는 것을 원할 수도 그것이 당연할 수도 있다.

컨텐츠라는 영역에서 있어도 그만, 없어도 그만인 이미지였다면, 괜히 실패한 이미지나 텍스트를 노출해서 좋을 게 없다는 것이다.

아무것도 없는게 더 자연스러울 수도 있다는 것이다.

 

즉, 사실 백그라운드 이미지는 에러가 나든 말든 상관이 없는 것이다.

순수하게 디자인적인 이유로 사용한 것이다.

사용자에게 보다 나은 컨텐츠의 이해를 돕기 위한 용도가 아니라는 것이다.

 

참고한 글에 나오는 문장이 핵심이라고 생각한다.

 

이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img 태그를 쓰고, 그렇지 않으면 background image 를 써라.

does this image help people in understanding my content better?  If the answer is yes – use img tag. If – no – set it as a background image.

 

사실 본인은 이러한 기준으로 구분해서 쓰자고 강조하는 것은 아니다.
저 기준을 정하는 게 사실 조금 애매하지않나라고 생각한다.

말하고 싶었던건, 본인 스스로 "배경 이미지" 라는 용어를 정확하게 정의하지 못했던 것이다.

 

사실 지금까지 설명한 것은 시맨틱 성향에 가깝다.

기술적으로 img 태그와 background-image 사이의 차이점은 많다.

예로 img 태그가 SEO, 성능 등 많은 면에서 효율적인 게 사실이다.

이러한 것들은 위에서 언급한 참고한 링크를 보길 추천한다.