들어가며

웹페이지에 이미지를 삽입하는 방법은 <img> 태그를 사용하거나, CSS background-image 속성을 사용하거나 크게 두 가지가 있습니다.

하지만 저는 어떤 상황에 어떤 방식을 사용해야하는지 정확하게 알지 못했습니다.

img tag vs css background-image 등의 키워드로 검색하다 자세히 설명된 글을 읽었고, 더 많은 분들이 볼 수 있도록 번역해보았습니다.

아래는 nystudio107의 블로그 글 "The CSS background-image property as an anti-pattern"을 원작자의 허락을 받아 번역한 글입니다.

의역, 오역이 있을 수 있습니다. 피드백은 환영입니다. 댓글로 남겨주세요.

안티 패턴으로서의 CSS background-image 속성

CSS background-image 속성은 여러가지 놀라운 일들을 할 수 있었지만, 대부분의 경우에는 더 이상 사용하지 않는 것이 좋습니다.

많은 사람들이 CSS background-image 속성으로 다양한 일들을 해왔습니다. 이 속성은 오래 사용되어 왔지만, 이제는 작별 인사를 해야합니다.

진짜 문제는 CSS background-image 속성 자체가 아니라, 메인 이미지나 UI 이미지와 같은, 실제로 사용해서는 안되는 곳에서 사용된다는 것입니다.

부적절하게 사용된 background-image는 안티 패턴입니다. background-image의 좋은 사용 사례도 있을까요? 당연히 있습니다.

하지만, CSS background-image 속성에는 몇 가지 단점이 있습니다. 더 중요한 것은, 오늘날 최신 브라우저에서는 이미지를 위한 더 좋은 방법들이 있습니다.

호랑이 담배피던 시절의 시대지난 이야기는 하지맙시다.

그러면 이제 CSS background-image 속성의 단점과, 이 속성 대신 사용할 수 있는 것들에 대해 이야기 해봅시다.

CSS background-image 속성이 나쁜 이유는 아래와 같습니다.

1. SEO에 좋지 않다

CSS background-image 속성에 있는 이미지는 Google 봇이 크롤링하거나 색인하지 않습니다. 별거 아니라구요? 글쎄요, Moz.com의 글Google 이미지 검색에서 순위를 매기는 방법에서 인용한 이 글을 봅시다.

… Google 모든 검색의 3분의 1은 이미지 검색이며, 검색결과의 12.5%는 이미지를 보여줍니다…

Google 검색의 33%는 이미지 검색입니다. 이미지가 페이지의 주제나 사업과 관련이 있다면, 당신은 분명 검색에 색인되길 원할 것입니다.

background-image를 사용하는 경우, 이미지의 alt=""으로 이미지에 대한 설명과 컨텍스트를 Google에 제공할 수 조차 없습니다.

2. 접근성에 좋지 않다

CSS background-image 속성은 접근성에 적합하지 않습니다. Screen readers는 background-image를 완전히 무시합니다.

Accessibility Conscerns를 봅시다:

브라우저는 보조 기술(assistive tech)을 위해 배경 이미지에 대한 특별한 정보를 제공하지 않습니다. 이는 스크린 리더에 중요한데, 스크린 리더는 그 정보를 알리지 않기 때문에 사용자에게 아무것도 전달하지 않습니다.

스크린 리더가 이미지를 완전히 무시하지 않았더라도, 이미지에 대한 설명이나 컨텍스트를 설명할 수 있는 alt="" 텍스트조차 없습니다.

Pro Tip: 실제로 스크린 리더가 이미지를 무시하도록 하려면(디자인적 요소일 때), 빈 alt 태그를 사용하세요. 예: alt="" (role="presentation" 속성은 ARIA의 첫 번째 규칙을 위반하므로, 최선이 아닙니다.)

3. 성능에 좋지 않다

어떻게 background-image 속성이 성능에 나쁜 영향을 미칠 수 있을까요? 일반적으로 디바이스 화면 너비나 해상도에 관계없이 background-image 속성에 하나의 이미지만 사용되기 때문입니다.

이상적으로 우리가 원하는 것은 반응형 이미지를 사용하여 브라우저가 디바이스의 화면 너비나 해상도에 따라 다른 크기의 이미지를 로드하도록 하는 것입니다.

일반적인 사이트에서 이미지는 전송되는 데이터 중에서 가장 큰 청크입니다. 우리는 이 이미지들을 최적화해야합니다.

@media 쿼리와 CSS background-image를 사용할 수도 있지만, 이미지를 변경하거나 이름을 바꿔야하는 경우 굉장히 번거로워집니다.

이것이 번거로운 이유는 이미지가 CSS에 포함되어있기 때문입니다. 일반적으로 CSS는 클라이언트가 제어하지 않는 빌드 프로세스에 의해 빌드됩니다.

그래서 이것이 어렵기 때문에 많은 사람들은 보통 포기하고 모든 디바이스 화면 크기와 해상도에 대해 하나의 이미지만 사용합니다.

이를 도와주는 bgset과 같은 JavaScript 라이브러리가 있지만, 왜 다른 단점이 많은 문제를 해결하기 위해 JavaScript를 더 추가해야하나요?

게다가 webp와 같은 next-generation 포맷의 프로그레시브 이미지를 사용하려고 해도, background-image로 인해 더 번거로워집니다.

브라우저가 CSS를 다운로드하고 파싱하기 전까지 이미지 다운로드를 시작할 수 없습니다

또 다른 성능 단점은, 이미지가 background-image로 CSS에 포함된 경우, 이미지를 요청하기 전에 브라우저가 CSS를 먼저 다운로드하고 파싱해야 한다는 것입니다.

즉, 메인 hero 이미지가 다운로드 대기열 우선순위가 낮아지고, 로드가 느려질 수 있습니다. 대신 HTML 요소를 통해 이미지를 사용하는 경우, CSS가 다운로드되기 전에 브라우저가 훨씬 더 빠르게 이미지를 요청할 수 있습니다.

4. CMS와 CDN에 좋지 않다.

CSS background-image 속성은 Content Management Systems과 Content Distribution Networks (CDNs)와 함께 사용할 때에도 좋지 않습니다.

<div>에 background-image로 설정된 이미지로 구현된 웹사이트에 메인 hero 이미지가 있다고 가정해 봅시다.

전세계 사람들이 이 사이트를 방문하고 있으며, 저는 CDN을 사용하여 이러한 리소스들를 최적으로 제공하고자 합니다.

CSS에 이미지 URL이 포함되어 있다면, 저는 프로젝트 전체의 이미지들을 검색하여 모든 이미지를 local URL에서 CDN URL로 교체해야합니다.

CSS 변수를 사용하여 미리 모든 이미지의 URL을 준비한 경우엔 괜찮을 수 있습니다. 하지만, 대부분은 이미지를 변경할 때마다 새로운 CSS 에셋 번들을 만들고 배포하지 않습니다. 아니면 이를 위해 동적으로 inline CSS를 생성할수도 있지만... 그렇게까지 하진 맙시다.

CMS가 URL prefix를 처리하게하는 것이 훨씬 쉬울 수 있지만, CSS background-image를 사용하면 인라인 스타일을 생성하거나 다른 트릭이 필요해서 더 귀찮아 질 수 있습니다.

CSS에 이미지 URL을 넣는 것은 항상 "하드 코딩"하는 느낌이 듭니다.

그러면 어떨 때 좋은건가요?

그러면, 지금까지 단점에 대해서만 이야기했지만, CSS background-image 속성이 실제로 좋은 상황은 언제일까요?

전혀 불필요해 보일 수도 있지만, 실제로 이미지를 순수 장식 이미지 배경으로 사용하는 경우… background-image를 사용하세요!

실제로 배경 이미지를 사용해야할 경우 background-image를 사용하는 것이 좋습니다

그렇게한다면, image-set()을 background-image와 함께 사용하여 위에서 언급한 성능 문제를 해결할 수 있습니다.

이 속성이 본질적으로 나쁘다는 것이 아니라, 이 속성을 사용하는 것이 최선의 선택이 아니라는 것을 말하기 위함입니다.

대신 <PICTURE>를 사용하세요!

저는 많은 사람들이 background-image를 사용하는 가장 큰 이유는 CSS background-size: cover; 속성 때문이라고 생각합니다. 이를 통해 이미지를 매우 쉬운 방식으로 "덮을(cover)" 수 있습니다.

이는 object-fit 속성으로 해결할 수 있습니다!

object-fit 속성과 함께 semantic HTML 요소 <picture>를 사용하면, background-size: cover;와 동일한 효과를 얻을 수 있습니다. 하지만 아래와 같은 것들 또한 얻을 수 있습니다.

• SEO 친화적 이미지
• 접근성 친화적 이미지 (alt="" 속성 사용)
• CMS-generated 이미지, CDN과 함께 잘 동작함
• 이미지 최적화를 위한 srcset과 함께 잘 동작함
• .webp 같은 next-generation 이미지 포맷을 위해 <source>를 사용 가능

이는 실제 구현하기는 어렵지않은데 비해 이점은 정말 많습니다! object-fit 속성은 이미지나 비디오가 부모 컨테이너에 어떻게 맞아야하는지 알려줍니다. 다음과 같이 변경하면 됩니다.

<div
  style="background-image: url('/some/man-with-a-dog.jpg');
            background-size: cover;"
></div>
<!-- The old way -->

이렇게 변경합니다.

<picture>
  <img
    src="/some/man-with-a-dog.jpg"
    alt="Man with a dog"
    style="object-fit: cover;"
  />
</picture>
<!-- The new way -->

분명 두 케이스 모두, inline 스타일을 사용하지는 않을 것입니다. 하지만 background-image 속성을 버리고 <picture>와 <img> 같은 의미적 HTML 요소를 사용하는 접근 방식이 얼마나 유연한지 알기를 바랍니다.

그 다음 srcset을 통해 반응형 사이즈 이미지들을 쉽게 추가할 수 있습니다. 또한 브라우저가 <source>를 통해 선택할 수 있는 .webp와 같은 next-generation 이미지 포맷을 쉽게 추가할 수도 있습니다.

그러면 Chrome이나 다른 브라우저의 native image lazy load 기능과 같은 다른 장점 또한 얻을 수 있습니다.

이 모든 작업을 하는 최종 코드는 다음과 같습니다.

<picture>
  <source
    srcset="
      /some/_1170x658_crop_center-center/man-with-a-dog.webp 1170w,
      /some/_970x545_crop_center-center/man-with-a-dog.webp   970w,
      /some/_750x562_crop_center-center/man-with-a-dog.webp   750w,
      /some/_320x240_crop_center-center/man-with-a-dog.webp   320w
    "
    sizes="100vw"
    type="image/webp"
  />
  <source
    srcset="
      /some/_1170x658_crop_center-center/man-with-a-dog.jpg 1170w,
      /some/_970x545_crop_center-center/man-with-a-dog.jpg   970w,
      /some/_750x562_crop_center-center/man-with-a-dog.jpg   750w,
      /some/_320x240_crop_center-center/man-with-a-dog.jpg   320w
    "
    sizes="100vw"
  />
  <img
    src="/some/man-with-a-dog-placeholder.jpg"
    alt="Man with a dog"
    style="object-fit: cover;"
    loading="lazy"
  />
</picture>
<!-- The final way -->

이는 다음과 같은 장점을 얻을 수 있습니다.

• 브라우저가 지원하는 경우 lazy loading (지원하지 않으면 기본 동작)
• 브라우저가 지원하는 경우 webp 포맷 (지원하지 않으면 skip)
• 브라우저가 선택할 수 있는 최적화된 반응형 이미지의 srcset.

SEO 친화적, 점진적 향상, 접근성, 성능이 모두 하나의 작은 코드 번들로 통합됩니다.

Boom. 💥

또한, 모든 이미지는 ImageOptimize와 같은 도구를 통해 CMS에서 크기가 자동으로 조정되어 CDN이나 Amazon S3을 가리킬 수 있습니다. 마지막으로, object-fit으로 독창적인 이미지 크롭핑을 할 수 있습니다.

OUT WITH THE OLD, IN WITH THE NEW

<picture>와 srcset의 브라우저 지원은 굉장히 좋습니다. (필요하다면 polyfill 사용), object-fit에 대한 브라우저 지원 또한 마찬가지입니다. (역시 필요하다면 polyfill 사용). polyfill.io는 또 다른 좋은 폴리필 사용 패턴입니다.

실제 배경 이미지를 원하는 드문 경우는 제외하고, 이제 background-image를 버릴 때가 되었습니다.

다수의 사용자를 위해 모범사례로 코드를 작성하고, 필요할 때 점진적 향상과 폴리필을 사용하세요. 방문자의 비율이 아주 적은 예전 브라우저에 대해 너무 동요하지 마세요.

콘텐츠 이미지를 장식(decoration)으로 사용하지 마세요. 의미있는 HTML 컨텐츠 이미지 요소를 사용하세요.

저는 당신이 SEO에 더 친화적이고, 더 접근하기 쉽고, 더 성능이 좋은 웹 사이트를 구축하게될 뿐만 아니라, 의미있는 HTML로 작성하기 더욱 만족스럽게 느끼게될 것이라고 생각합니다.

CSS background-image 속성은 메인 hero 이미지나 UI 요소에 사용하기위한 것이 아닙니다. 이제 더 좋은 방법들이 있으니, 이를 사용하세요.

이미지 최적화에 관심이 많다면, images.guide를 확인해보세요.

Enjoy your object-fit!

더 읽기

• A Pretty Website Isn't Enough
• Setting Up Your Own Image Transform Service
• Autocomplete Search with the Element API & VueJS