img tag 와 backgounrd-image 차이점

이미지를 사용할 때 <img /> tag와 background-image를 사용하는 두 가지 방법이 존재한다.

 

이미지를 사용해서 렌더링 되는 결과는 똑같다. 결과는 같지만 사용법이 다른 두가지가 무엇이 다른지 검색해봤다.

 

결론은 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 더 효율적인 <img /> tag를 사용하고 그게 아니라면 background-image를 사용해라

 

<img /> tag와 background-image의 차이점

<img /> tag의 경우 이미지가 로딩을 실패하면 broken image와 alt 텍스트가 보이지만

반대로 background-image경우 실패하면 아무것도 보이지 않는다.

 

이미지에 대해 사용자가 알아야 한다면 <img /> tag를 사용할 것이고

있어도 그만이고 없어도 그만이라면 background-image를 사용할 것이다.

 

뭐가 좋다고 할 순 없고 상황에 맞게 두가지를 적절히 섞어서 사용해야겠다.