이미지는 항상 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.
