HTML<img> 태그 vs CSS backgound-image(feat. 네이버)

 

최근 네이버 변경된 UI를 구경하다가 의문이 생겼다!

 

 

 

바로 이 부분인데..!

개발자도구로 들여다보면 

 

 

각 메뉴의 아이콘 부분에<img> 태그를 사용하지 않고, 아이콘 이미지가 여러개 들어있는 파일을 backgound-image에 넣고  backgound-position 을 이용해서 표현하고 있는 것을 확인할 수 있다.

 

 

근데 왜 저렇게 한거지..?

 

 

궁금해서 찾아본 내용들을 정리해봤다.

 

 

HTML <img> 태그는 언제 사용하는 것이 좋을까?

 

1. 해당 내용이 디자인 요소가 아닌 콘텐츠와 관련된 경우 

 

2. 검색시 노출이 필요한 경우

→ 검색 엔진에서 인덱스(색인)를 생성하기 때문에 검색시 노출이 된다. 

 

🔍 좀 더 자세히 알아보자면..

 

<img> 태그는 시맨틱요소이며 이미지라는 의미를 가진다.

검색엔진이 웹사이트의 정보를 수집할 때 크롤러가 크롤링을 하여 정보를 수집하고 사용자가 검색할만한 키워드를 미리 예상하여 키워드에 대응하는 인덱스(색인)을 만들어 준다. 
이 때 사용되는 정보가 바로 웹사이트의 HTML 코드이다. 검색 엔진은 HTML 코드만으로 그 의미를 인지해야하는데 이 때 시맨틱 요소를 해석하게 된다. 

 

 

3. 웹접근성을 향상시키고 싶은 경우

<img> 태그엔 alt 속성과 title 속성을 추가 할 수 있다.
alt 속성 : 이미지를 볼 수 없는 환경에서도 대체메세지로 내용을 확인할 수 있다. (스크린리더를 통해 들을 수 있다.)

title 속성 : title은 마우스 커서가 이미지 위에 위치할 때 보여지는 말풍선을 뜻하는데, 이는 이미지의 제목이나 특성을 설명하기 위한 것이다.

 

 

4. 웹페이지 성능을 높이고 싶은 경우

HTML이 구문 분석될 때 요청이 이루어지므로 성능 면에서 낫다.

 

 

CSS backgound-image는 언제 사용하는 것이 좋을까?

 

1. 순전히 디자인적으로만 사용되는 경우 

2. 이미지가 콘텐츠의 일부가 아닌경우

3. 작은 이미지인 경우. CSS 스프라이트처럼 다운로드 시간을 개선해야하는 경우

4. 반복되는 이미지인 경우(e.g. 블로그 작성자 아이콘, 날짜 아이콘 등) 

 

 

 

이미지 스프라이트

backgound-image를 사용하고 backgound-position 을 이용하여 표현하는 것

 

✅ 여러 개의 이미지가 필요한 아주 많은 웹앱에서 사용

✅ 이미지 각각을 별도의 파일로 추가하는 대신 이미지들을 하나의 파일로 만들어서 포함하면 HTTP 요청 수가 줄기 때문에 메모리와 네트워크 사용량 측면에서 효율적임

 

cf) HTTP/2를 사용할 땐 오히려 작은 요청을 여러번 날리는 게 네트워크 사용량에 더 좋을 수도 있다.

 

---

Reference

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Images/Implementing_image_sprites_in_CSS

CSS로 이미지 스프라이트 구현하기 - CSS: Cascading Style Sheets | MDN

 

 

https://blog.px-lab.com/html-img-tag-vs-css-background-image/

HTML img tag vs CSS background-image

https://poiemaweb.com/html5-semantic-web

Semantic Web | PoiemaWeb