[CSS] HTML <img> vs background-image 차이 비교

서론

이미지는 항상 HTML <img> 태그를 사용하여 나타냈었는데, Scflix 프로젝트를 진행하면서 background-image를 사용하게 되었다. 

둘 다 이미지를 나타낸다는 공통점이있는데, 두 방식의 차이점을 알아보고 어떤 방식이 더 나은지 정리를 해보려고 한다.

 

---

사용 방법

// HTML img tag
<img src ='imageUrl' alt='' />

// CSS background-image
<div style=”background-image: url('iamgeUrl');”>

 

 

---

HTML <img>

HTML 에서 사용 가능

background-image 보다 SEO에 효과적

background-image 보다 성능에 효과적

default 이미지 포함 가능

 

이미지 불러오지 못했을경우 

default 값으로 Broken image와 alt 텍스트가 보인다.

 

 

 

---

background-image

CSS에서 사용 가능

순수하게 디자인에 사용

이미지가 콘텐츠의 일부가 아닌 경우

 

이미지 불러오지 못했을경우 

default 값으로 아무것도 보이지 않는다.

 

---

요약

참고한 자료의 글을 인용하자면 

'이미지가 사용자에게 내용을 이해하는데 도움을 준다면 <img>태그를 사용하고 그렇지 않으면 background image를 사용하면 된다.'

[ 원문 ]
If you need to choose between using an HTML <img> tag or a CSS background-image – just ask yourself a question: 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. After all – if both ways can provide you with the same visual result – you just need to define what has more sense in your situation.

---

참고 자료

https://blog.px-lab.com/html-img-tag-vs-css-background-image/

HTML img tag vs CSS background-image