img 태그 vs background-image

https://inseq.co.kr/ko/bbs/i-24/show.do?seq=19&searchCl1=&searchMulti=&searchKeyword= 

인시퀀스

https://mygumi.tistory.com/369

<img> vs background-image :: 마이구미

https://nystudio107.com/blog/the-css-background-image-property-as-an-anti-pattern

The CSS background-image property as an anti-pattern

이글은 다음 글을 타이핑하며 공부하여 작성한 글입니다. 자세한 내용은 위 자료를 참고해주세요.

 

이미지 컨텐츠를 표현하는 방법에는 크게 두가지가 있다.

• HTML의 <img> 태그를 활용하는 방법
• CSS의 background-image를 사용하는 방법

두 방식 모두 목적은 같지만, 당연히 존재하는 용도는 다르다.

background-image는 배경 이미지를 사용하기위한 용도이다.

 

참고한 글의 저자분은 background-image를 사용할때 인라인으로 넣는 방식이 마음에 들지않아서 img 태그를 선호하셨다고 한다.

그것도 이유가 될 수 있겠다싶다. 둘중에 하나를 선택해야한다면 항상 이유를 가져야한다. 이유가 뭐든 상관없다. 논리적으로 설득만 가능하다면.

// React
// CSS background-image
<div class="thumb" style={{ backgroundImage: `url("${imageUrl}")` }} />

// HTML img tag
<img src={imageUrl} alt="" />
출처: https://mygumi.tistory.com/369 [마이구미의 HelloWorld:티스토리]

 

만약 img 태그를 사용할때 이미지로드에 실패하면 어떻게 될까?

-> broken image와 alt 텍스트가 보인다.

https://mygumi.tistory.com/369

물론 위처럼 이미지로드 실패시 broken-image와 alt 텍스트가 나오길 원하지 않는다면, alt를 넣지않으면 되고 broken image도 hide 처리면 된다고한다.

 

여기서 잠깐 

broken image를 hide 시킨다는게 뭔지 몰라서 해보기로 했다.

html 코드가 다음과 같다면 이미지는 broken-image가 된다.

  <img src="Error.src" />

이러한 디폴트 이미지를 원하지 않는다면 다음과 같은 onerror 를 추가해주면 되는 것이다. 

저게 hide 처리하는 것이라고 설명해주신 것 같다.

<img src="Error.src" onerror="this.style.display='none'"/>

 

이어서, 반대로 background-image에 넣은 이미지가 에러가 나면 어떻게 될까?

background-image 속성을 사용하면 alt 와 같은 설명을 할 수 없다. 

결과적으로 broken image도 어떠한 텍스트도 노출되지 않는다.

즉, 아무일도 일어나지 않습니다.

 

따라서 레이아웃에 배경이 필요하다! 하면 background-Image를 사용하면 되겠습니다. 

background-size 나 background-position 이 배경을 만들때는 참 좋거든요.

background-size
background-position

나머지는 img 태그를 사용하는게 좋습니다. 

왜냐하면 기능적인 차이 때문인데요. img 태그가 background-image보다 기능적 측면에서 훨씬 우수합니다.

이제 왜 더 우수한지 background-image를 img 태그에 비교했을때 더 좋지 못한점을 알려드리겠습니다.

 

1. SEO에 좋지 않습니다.

SEO란, 검색 결과에서 상위에 노출될 수 있도록 내 콘텐츠를 최적화하는 방식입니다.

CSS 속성에 있는 background-image는 Google에서 크롤링하거나 색인을 생성하지 않습니다.

 

Google에서 수행되는 검색의 1/3 은 이미지에 대한 것이라고 합니다. background-image로 이미지를 넣게되면 이러한 점에서 img 태그보다 우선적으로 검색되는 순위에서 밀려 불리해집니다. (힘들게 만든 웹사이트가 하단에 있으면 속상하니까요.)

 

2. 접근성이 좋지않음

CSS 속성은 background-image 접근성에 좋지 않습니다. 스크린 리더는 background-image를 완전히 무시합니다.

 

3. 성능에 좋지않음

background-image는 화면의 너비나 해상도에 관계없이 속성에 하나의 이미지만 사용되기 때문에 반응형 레이아웃을 만들때 미디어 쿼리로 일일히 이미지를 변경해야할 수 있습니다.

 

이렇게 background-image 와 img 태그에 대해 알아보는 시간을 가졌습니다.

글 읽어주셔서 감사합니다!