이미지 마크업 <img> 태그와 {background-img} 차이를 알아보자

졸업작품이나 사이드 프로젝트를 진행하면서 많은 이미지를 페이지에 적용하는 일이 많았었다.

그러면서 img 요소를 다룰 때마다 헷갈리고 어려운 부분이 많았던 거 같다.

또한 이미지를 적용하는 방법이 2가지가 있는 것을 알게 되면서 정리를 하면 좋겠다 생각하여 정리를 해볼 것이다.

 

이미지 마크업 하는 2가지 방법 무엇이 있을까 ?

이미지를 마크업 하는 가장 기본적인 방법은 HTML 코드 내에 <img> 태그를 사용하는 것으로 이는 이미지를 전경(foreground) 처리하는 방법과 스타일시트의 background-image 속성을 활용해 배경(background) 처리하는 방법이 있다.

<img src="/img/example.jpg" alt="이미지">

전경처리

.main_home_wrapper{
    background-image: url('../../public/img/hairShop.jpeg');
 }

배경 처리

 

그렇다면 어떤 경우에 전경 처리하고, 또 어떤 때에 배경으로 처리하는 것이 좋을까?

 

전경(foreground)처리가 더 좋은 사례

1. 이미지에 구체적인 정보가 담겨있을 때

• img 태그에는 이미지에 포함한 뜻 설명해주는 alt 속성 제공.
• alt 속성 통해 콘텐츠 정보 전달함으로써 웹 접근성 준수

2. 사용자가 등록하는 데이터 이미지일 때

• 인라인 스타일은 피치 못할 특수한 상황이 아니라면 최대한 지양해야하는 원칙 존재.
• css와 무관하게 html 마크업 내에서 바로 데이터를 다룰 수 있어야 한다.

3. 인쇄 시 이미지까지 출력되어야 할 때

• 전경 처리된 이미지는 따로 브라우저 인쇄모드 옵션을 변경하지 않아도 기본적으로 이미지까지 모두 인쇄.
• 배경 이미지는 인쇄 기본 옵션에서 출력되지 않음. 꼭 인쇄 되어야 하는 정보라면 전경 이미지로 마크업.

4. 이미지의 크기가 레이아웃에 영향을 미칠 때

• 사진 크기에 따라 유기적으로 배치 된다면, 이미지 교체 시에 레이아웃 크기가 함께 변경 되어야 하므로 이미지 사이즈를
  이용하기 위해 전경 이미지로 마크업 하는 것이 좋음.

5. 검색엔진에 이미지까지 노출이 필요할 때, 이미지검색 SEO

• 이미지의 파일 이름과 대체 텍스트를 최적화하면 구글 이미지와 같은 이미지 검색에서 검색될 수 있다.

배경(background)처리가 효과적인 사례

1. 꾸밈(디자인) 요소로만 사용할 때

• background-image는 말 그대로 배경이다.
• 콘텐츠로서의 의미 없이 단지 꾸밈 요소로써 존재할 때 주로 사용하게 된다.
• 목록 앞에 사용되는 불릿 아이콘이나, 비주얼 요소를 강조하기 위해 사용하는 배경 사진등이 해당된다
• 콘텐츠와 직접적인 관계가 없으므로 이미지가 로딩되지 않더라도 콘텐츠를 이해하는데 있어 영향을 미치지 않는다

2. 성능 향상을 위해, IR 기법 & Sprite 기법

• 시멘틱한 마크업을 위해 용도에 맞게 태그를 쓰는 것은 중요하지만, 스타일시트를 활용해 개발의 효율성을 높이면서도 접근성을 저해하지 않는 대체 방법(*IR기법)도 존재한다

3. 개발 생산성과 유지보수 효율 향상을 위해, 아이콘 시스템

• 콘텐츠 분량이 많은 대형 프로젝트에서는 여러명의 디자이너와 마크업 개발자가 협업하기 때문에 한번 사용한 이미지를 재사용할 수 있도록 디자인시스템을 구축한다.일명 규격화, 컴포넌트화 하게된다
• 이미지로 처리하면 추후 이미지를 교체해야하는 사황이 닥쳤을때, 파일명이나 경로가 변경되면 html마크업을 함께 수정해야하기 때문에 유지보수 효율성이 떨어진다. 하지만 아이콘을 배경이미지로 처리한다면 마크업을 수정하지 않고 css만으로 컨트롤할 수 있게 된다

4. 인쇄 시 이미지는 출력되지 않기를 원할 때

• 인쇄 모드에서 기본적으로 배경 이미지 출력하지 않도록 기본 설정 되어 있음.
• 출력할 필요 없는 꾸밈 용도의 이미지거나, 배경 이미지가 주요 콘텐츠와 겹쳐 시인성을 저해시 background-image가 도움 됨.