<img>태그 VS background-image CSS(백그라운드이미지)는 언제 어떻게 사용하나요?

웹사이트를 퍼블리싱 하다보면 이미지 태그를 사용해야할때가 자주 나온다.

 

이미지를 표현하는 방법

• HTML에서 <img src="..." alt="...">로 경로를 연결해서 사용하는 방법
• CSS에서 background-image{ url(...)}로 경로 연결해서 불러오는 방법

작업을 하다보면 이 이미지가 HTML 태그로 이미지를 넣어야할지 CSS 속성으로 백그라운드를 넣어야할지 고민하게 되는데

어떤 경우에 어떠한 방법을 사용해서 퍼블리싱을해야 더 시멘틱하게 작업하는건지 알아보도록 하자.

 

 

 

그 전에, 배경 이미지는 무엇인가?

이 용어는 용어 그대로 배경 이미지기에 에러가 나든 말든 상관이 없는 것이다.
즉, 이미지가 사용자에게 컨텐츠 이해에 도움을 더 준다고 생각하면 SEO, 성능 등 많은 면에서 효율적인 <img> 태그를 쓰고, 그렇지 않으면 background-image 쓰자.

 

 

 

1_ HTML 태그 / <img> 사용하는 경우

---

⊙ 프린트가 필요한 경우
 : 백그라운드 이미지는 출력시 포함되지 않는다.

⊙ 이미지에 문구가 사용되어 의미를 가지는 경우
 : 이미지 자체가 어떤 의미가 있는 경우 이는 alt 태그를 사용해 어떤 이미지인지 알려줄 수 있다.

   백그라운드 이미지는 alt 태그가 없다.

⊙ 이미지가 콘텐츠의 중심으로 가장 중요한 경우 - 그냥 디자인 요소는 안된다.

 

 

 

2_ CSS속성 / background-image 백그라운드 이미지 사용하는 경우

---

⊙ 일정부분만 선택해 보여줄 경우 (ex 호버 버튼)
 : 간단하게 css를 사용하여 이미지를 다른 것으로 손 쉽게 변경 가능하다.

⊙ 이미지 위에 텍스트가 들어가는 경우
 : 이미지 위에 텍스트가 들어가는 경우에는 백그라운드 이미지를 넣고 그 태그 내부에 간단히 텍스트를 넣어 사용할 수 있다.

⊙ 페이지 전체 출력시 이미지를 제거해야 되는 경우
 : 이미지가 출력되면 곤란한 경우나 겹치는 경우에 해당한다.

⊙ CSS sprites를 사용해 이미지 속도를 향상시킬 경우
 : 수 많은 img 태그를 퍼블리싱한 방법보다 CSS sprites 기법을 사용하면 이미지의 수정, 보관, 관리가 용이하고 로딩 속도도 향상할 수 있다.

⊙ 배경 전체에 확대해 보여줄 필요가 있는 경우
 : background-size 등의 속성을 사용해 배경 이미지의 크기를 간단하게 조작 가능합니다.

 

⊙ 순순히 디자인을 위해서만 사용되어져 왔을 경우

 

⊙ 이미지가 컨텐츠의 어떠한 영역이 아닐 경우

 

⊙ 반복되는 이미지일 경우 (ex 아이콘)