<img> vs <background-image> 🧐

사이트에 이미지를 넣는 방법은 두가지가 있다.

1.  img 태그를 사용하는 방법 in HTML

2. div 태그에 background-image 속성을 추가하는 방법 in CSS

개인적으로 생각하는 가장 대표적인 차이는 alt=""의 유무인 것 같다.

1. img 태그를 사용하는 방법 (HTML)

<img src = "이미지 경로" alt="이미지 정보(코멘트)">

위에 보이는 코드는 일반적인 img태그 작성법이다.
alt 속성이 보이는 것과 같이 이미지에 대한 기본적인 정보를 담고 있다.

만약에 img 태그에서 사용되는 이미지가 로딩이 실패한 경우
broken image 아이콘과 함께 alt에 적어 놓은 코멘트가 보인다.
이를 통해 에러난 이미지가 어떤 의도였는지 쉽게 알 수 있다.

2. div태그에 background-image 속성을 추가하는 방법 (CSS)

하지만 background-image를 활용한 이미지가 에러가 나게 된다면 alt속성이 없기 때문에 어떤 정보를 담고 있는지를 알수가 없다.

그렇다고 무조건 지양해야하는 것이야에 대해서는 '그렇다'라고 말하기는 어려울 것 같다. background-image 속성을 사용한다면 에러가 나면 어떤 텍스트도 노출되지 않는다. 즉, 디자인적인 요소인 있어도 그만 없어도 그만인 이미지라면, 굳이 에러 메세지를 보여주는 것이 좋을 게 없기 때문이다.

 

즉,

img태그는 semantic element로 이미지라는 의미를 가지고 있는 코드이다. SEO 성능 등에 효율적이다.
반면에 background-image의 경우 non-semantic element인 div를 사용했기 때문에 의미를 가지고 있지 않다.

 

참고한 글 중에서 가장 핵심적인 글을 빌려 오자면,

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 속성을 사용하는 습관을 가져야 겠다.

 

 

참고 링

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
https://mygumi.tistory.com/369