TIL.04 background-image vs img tag

1. backgournd-image 사용법
2. 언제 background-image를 사용해야 하는가?
3. 언제 img tag를 사용해야 하는가?
4. 결론

1. background-image 사용법

---

### 1.1 div태그를 만들어준다. div태그의 영역을 확인하기 위해 background-color를 yellow로 설정. ```HTML ```

.bg-img {
	background-color: yellow;
}

원본이미지

1.2

클래스를 선택한 후 background-image를 적용하였지만 div태그가 가지고 있는 크기만큼만 이미지가 출력되는 것을 확인할 수 있다.

.bg-img {
	background-color: yellow;
    	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
}

1.3

div태그의 크기를 줄여서 전체이미지를 출력하면서 크기를 줄여보고자 한다. 하지만 의도한 바와 달리 원본 이미지의 크기는 그대로인 것 같고, div태그의 크기만 설정이 됐다.

.bg-img {
	background-color: yellow;
        background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
    	height: 500px;
    	width: 500px;
}

1.4

background-size 속성을 추가하고 100%로 설정했다. 이전보다는 낫지만 원본이미지에 잘린 부분이 여전히 있다.

.bg-img {
	background-color: yellow;
   	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
   	background-size: 100%;
    	height: 500px;
    	width: 500px;
}

1.5

height속성을 700만큼 늘려보니 원본이미지의 세로 비율보다 div태그의 세로 비율이 길어서 이미지가 반복되고 있다.

.bg-img {
	background-color: yellow;
   	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
   	background-size: 100%;
    	height: 700px;
        width: 500px;

1.6

반복되는 이미지를 없애려고 background-repeat을 no-repeat으로 설정했다. 이미지는 의도되로 출력되지만 div태그는 여전히 700px의 크기를 차지하고 있기 때문에 background-color의 yellow가 여전히 표현되고 있다.

.bg-img {
	background-color: yellow;
    	background-image: url(https://images.unsplash.com/photo-1622495488655-498a6e9bb902?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=976&q=80);
        background-size: 100%;
      	background-repeat: no-repeat;
      	height: 700px;
      	width: 500px;
}

2. 언제, 왜 background-image를 사용해야 하는가?

---

• 순수하게 디자인적인 목적으로 이미지를 사용할 때
• 이미지가 컨텐츠의 내용 부분과 무관할 때
• 동일 이미지를 반복해서 표현하고 싶을 때
• CSS sprites를 이용해서페이지 다운로드의 성능을 향상 시키고 싶을 때(작은 이미지용)
• 로딩 실패 시 broken 이미지와 alt text를 보여주지 않는다.
• 유저들이 해당페이지를 프린트할 때, 그 이미지를 기본적으로 프린트 되지 않게 하기 위해(예제 페이지를 프린트하려고 하니 예제의 이미지가 프린트 미리보기에 표시되지 않는다.)
  
  
  

3. 언제, 왜 img tag를 사용해야 하는가?

---

• 이미지가 디자인적인 요소가 아닌 내용 그 자체일 때
• 검색 엔진이 페이지에 대한 주제를 잘 해석할 수 있게 하여 검색 노출에 도움을 준다.
• CSS에 여러 개의 큰 배경 이미지가 선언된 경우 브라우저는 CSS 파일을 parsing 하고 다운로드하는 시간이 오래 걸리므로, 전체 페이지의 로드가 지연된다. <img>태그를 사용하면 HTML이 parsing 될 때 request가 이루어지므로 img태그 앞에 오는 모든 컨텐츠를 사용자가 먼저 읽을 수 있다.(성능 향상)
• 로딩 실패 시 broken 이미지와 alt text를 보여준다.
• 인쇄시 이미지를 포함할 수 있다.
• alt속성을 포함하고 있으므로 스크린 리더가 이해할 수 있다.

4. 결론

---

제공하는 서비스에서 해당 이미지가 검색 엔진에 노출되어야 하고 맥락적으로 컨텐츠의 일부분이라면 img 태그를 사용해야한다. 반면에 이미지를 디자인적으로 사용할 때는 background-imgage 속성을 사용하도록 하자.

reference

---

https://blog.px-lab.com/html-img-tag-vs-css-background-image/
https://velog.io/@skyosk123/img-vs-background-image
https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern