img tag 와 background img 차이

참고링크

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

HTML img tag vs CSS background-image

 

 

작업을 하다보면 이미지 삽입시  필요한 두 가지 형태

1.<img src="" alt=""> 태그와 

2.background-image: { url(링크)} 

1, 2  어떤것을 사용해야 하는지 고민하기 때문에 정리해본다.

 

 

1.<img src="" alt="">  사용

• 디자인 요소뿐만 아니라 콘텐츠 와 관련된 경우
• 색인을 생성한다. 검색 SEO에 좋다.
• 이미지 태그에는 대체 텍스트와 제목 속성을 추가할 수 있는 기능이 있으며, 검색 엔진에서 선택할 수 있습니다.
• CSS에 여러 개의 큰 배경 이미지가 선언되어 있는 경우 브라우저는 CSS 파일을 구문 분석하고 이미지를 풀다운하는 데 시간이 더 오래 걸리므로 전체 페이지의 로드가 지연됩니다. <img> 태그를 사용하면 HTML이 구문 분석될 때 요청이 이루어지므로 문서에서 태그 앞에 오는 모든 콘텐츠는 사용자가 읽기 시작할 수 있는 정보가 됩니다. 이는 성능 면에서 좋은 점입니다.
• 사람들이 페이지를 인쇄하도록 하고 기본적으로 이미지가 포함되도록 하려는 경우.

2.background-image: { url(링크)}

• 순전히 디자인에 사용되는 경우.
• 이미지가 콘텐츠의 일부가 아닌 경우.
• 작은 이미지의 경우 CSS 스프라이트와 같이 다운로드 시간을 개선해야 합니다.
• 사람들이 페이지를 인쇄하도록 하고 기본적으로 이미지를 포함하지 않으려는 경우.
• 이미지 반복 ( 블로그 작성자 아이콘 , 날짜 아이콘은 각 기사에 대해 반복됩니다 등).

정리

내가 이해한 바로는 현업에서 쓰게되면 검색 SEO, 색인생성은 중요한 점이다. 또한 성능면에서 <img> 태그가 더 유용하니 순전히 디자인을 위할때가 아니면 img태그를 사용해야 할 것 같다.

 

추가

이미지가 존재하지않거나 코드에 이상이 있어 이미지 표현이 안될 때 1, 2번은 화면 출력에 차이가 있다.

1.<img src="" alt="잘린이미지"> 는 아래와 같이 이미지가 잘린 표시와 대안인 alt값이 출력된다.

2.background-image: { url(링크)}  반면에 2번의 경우 이미지가 존재하지 않아도 잘리는 표시 없이 그냥 화면에 출력이 안된다.

 

이러한 차이는 왜 발생할까?

img 태그는 태그 자체가 '이미지'라는 의미를 갖고 있는 시맨틱 태그이며 위에 설명했듯이 alt 속성에 넣은 문자열을 검색엔진이 이해하여 웹에 노출 시키지만 background-image 는 태그가 아닌 스타일의 속성이기 때문에 '이미지'라는 의미를 가지지 못하고 검색엔진이 인식하지 못하는 것이다.(색인불가능)

 

시맨틱태그와 시맨틱웹

컴퓨터가 정보를 쉽게 수집할수 있도록 만든 의미적인 태그들(Semantic Tag)로 구성된 웹사이트가 시맨틱웹이다.
html5에 추가된 header 예
1. <div id="header">헤더입니다.
2. <header>헤더입니다.</header>

둘다 의미는 같지만 컴퓨터와 인간이 태그명만 보고 이해할 수 있다.