이미지 삽입의 2가지 방법 차이점 html <img> vs css background-image

img를 넣는 법

 

1) html - <img> 태그를 이용하는 방법

• img태그 <img> 를 사용하면 alt속성을 통해 문자열을 넣을 수 있습니다. alt속성에 작성된 문자열은 meta 정보가 되며, 검색엔진은 alt속성에 지정된 문자열을 인식하게 됩니다.
• SEO(search engine optimization, 검색엔진 최적화)에 유리합니다. 이를 통해 사이트의 가치를 높일 수 있게 됩니다. 내 이미지가 사용자의 검색에 노출되어야 한다면, img 태그를 사용하는 것이 좋습니다.
• 다른 개발자가 코드를 이해하기 쉽습니다. <img> 태그를 통해 이미지가 있을 것이라고 추론할 수 있습니다.
• <div> 태그에 background-image 속성을 이용해 넣는 방식과 비교하여 속도가 빠릅니다. 브라우저가 이미지를 로드하기 위해서 CSS를 해석할 필요가 없습니다.
• 프린트가 필요한 경우 : 아래의 css - 백그라운드 이미지 방식은 프린트 출력 시 포함되지 않습니다.

2) css - background-img 를 이용하는 방법

• 이미지의 활용이 순수 사이트의 장식을 위해서라면, background-image를 사용하는 것이 좋습니다.
• 이미지 위에 텍스트가 들어가는 경우
  - 이미지 위에 텍스트가 들어가는 경우 백그라운드 이미지를 넣고 그 태그 내부에 간단히 텍스트를 넣어 사용할 수 있습니다. <img> 방식도 positiong속성을 이용하는 등 다양한 방법이 있기는 하지만 상대적으로 간단합니다.
• 페이지 전체 출력 시 이미지를 제거해야 하는 경우 <img>태그와 다르게 출력 시 나오지 않습니다.
• 이미지에 확대, 축소, 반복등의 속성 적용이 필요한 경우
  - background-size, background-repeat 등의 속성을 사용해 배경을 다양한 방법으로 조작 가능합니다.