내 웹사이트에 이미지를 넣는 방법
1. img src""
2. background-image
두 방식 모두 이미지를 불러올 수 있지만,
차이점이 하나 존재한다.
바로 이미지태그에는 src 이외에 attribute가 존재한다는 것!
이것이 img TAG 로드 실패시 경우
이 부분을 생각하며 아래의 질문이 왔을 경우를 생각해보자
"이미지 로드가 실패하면 어떻게 되나요?"
1. img TAG
broken image와 alt 텍스트가 보인다!
2. background-image
이미지 로딩만 실패!
왜 둘의 차이점을 알아야 할까?
컨텐츠 영역에서 있어도 그만, 없어도 그만인 이미지였다면, 실패한 이미지나 텍스트를 노출해서 좋을 게 없을 경우가 있다!
즉, 실패할 경우 아무것도 없는게 페이지를 로딩함에 있어 더 자연스러울 수도 있는 경우가 발생!
background-image는 말 그대로 순수하게 디자인 적 이유로 사용한 이미지이다.
즉, 에러가 나든 말든 상관이 없다. 그렇기에 에러가 날 경우 표시할 alt, broken 이미지가 없는 것이다.
그러나 img TAG는 컨텐츠의 이해를 위한 부가적인 src(요소)이기에 에러가 날 경우 알려주는 것이다.
이러한 특성은 검색엔진에서도 나타나는데, background-images는 img 태그로 사용한 것과는 달리 구글 검색등을 통해 노출되지 않는다!
개발중인 서비스에서 해당 이미지가 검색엔진에서 노출되어야 한다면 img 태그를 통해 이미지를 노출시켜야한다. 반대로 background-image 속성을 이용하는 것은 대체로 아이콘, 페이지의 cover 이미지에서 많이 사용하고 있다⚡️
따라서,이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 img태그를 사용하고, 그렇지 않으면 background image를 쓰자!
