<img>와 background-image 속성 /Semantic Web, Semantic Tags

<img> 태그를 이용하는 방법과 background-image 속성을 이용하는 방법의 차이점

둘다 시각적으로는 같은 효과를 낼 수 있지만, 사용하는 목적이 조금 다르다.

크게 웹접근성과 업무 효율성 측면에서 구분해 사용될 수 있다.

 

 

<img>태그를 이용하는 방법

1. 해당하는 이미지가 구체적인 정보를 담고 있을 때

이미지가 정보 전달을 목적으로 사용되는 경우 <img>태그의  alt 속성을 이용해 웹접근성을 높일 수 있다.

 <img> 태그의 alt 속성은 이미지를 보여줄 수 없을 때 해당 이미지를 대체할 텍스트를 명시한다.

alt 속성은 사용자가 느린 네트워크 환경, src 속성값의 오류, 시각 장애인용 스크린 리더 사용 등으로 이미지를 볼 수 없을 때 이미지 대신 제공할 대체 정보를 제공한다. 그렇기 때문에 <div>태그를 이용해 background-image 속성을 이용하면 이러한 경우에서 이미지로 인식되지 않아 사용자가 이용에 불편을 겪게 된다.

 

2. 검색엔진에 이미지가 노출되도록 할 때

검색 엔진 최적화를 위해  <img>태그를 이용해야한다. <img>태그는 그 자체로 이미지로 인식되기 때문에 검색엔진에 노출 되지만,  background-image 속성은 이미지로 인식하지 못해서 검색 엔진에 노출 되지 않는다.

 

3. 해당 이미지가 레이아웃에 직접적으로 영향을 주는 경우

 이미지의 크기에 따라 레이아웃이 유기적으로 변화하는 경우에는 <div>태그의 background-image 속성을 이용하면 크기를 다시 지정해야 하는 번거로움이 있어 <img>를 이용해 이미지 본래의 크기를 그래도 가져와 사용하는 편이 편리하다.

 

4. 사용자가 이미지를 직접 등록, 변경할 경우

 사용자입장에서 이미지를 변경하기 위해 여러 단계를 거치는 것은 번거롭다.

상품 이미지 등록과 같은 업무를 처리하는 경우 웹디자이너가 아니라면 굳이 CSS파일을 열어 수정하기보다는 <img>의 src만 수정해서 바로 이미지를 변경하는 편이 편리하다.

 

 

background-image 속성을 이용하는 방법

1. 이미지가 정보 전달이 아닌 단순 꾸밈 용도일 경우

위에서 언급했던 <img>태그를  사용하는 경우 1번 반대되는 경우로, 단순히 디자인적인 요소 이미지가 사용되는 경우에는 background-image 속성을 사용한다. 

 

2. 유지보수 측면에서 효율적일 때

디자이너 입장에서 생각해보면 HTML파일을 열어 코드를 읽는 시간을 줄이고 CSS에서 직접 이미지를 수정할 수 있기때문에 훨씬 효율적인 업무 처리 방식이 될 수 있다.

 

시각적으로는 동일한 결과를 얻을 수 있지만 어떤 목적인지에 따라 구분하여 사용하면 훨씬 웹접근성을 높인 시멘틱 웹을 구성할 수 있다. 작은 차이같지만 개발 업무의 효율성과 유지보수 측면에서 볼 때 차이를 구분할 필요가 있다.

 

 

 

 

잘못된 정보가 있다면 댓글로 피드백주세요. 확인 후 수정하겠습니다^-^

더 정확한 정보 혹은 더 효율적인 방식이 있을 경우 댓글로 의견을 공유해주세요!