반응형 이미지

웹의 텍스트는 화면 가장자리에서 자동으로 줄바꿈되어 오버플로되지 않습니다. 반면 이미지는 고유한 크기가 있습니다. 이미지가 화면보다 넓으면 이미지가 오버플로되어 사용자가 이미지를 모두 보려면 가로로 스크롤해야 합니다.

다행히 CSS에는 이러한 상황을 방지할 수 있는 도구가 있습니다.

이미지 제한하기

스타일시트에서 max-inline-size를 사용하여 이미지가 포함된 요소보다 넓은 크기로 렌더링될 수 없음을 선언할 수 있습니다.

img {
  max-inline-size: 100%;
  block-size: auto;
}

동영상, iframe과 같은 다른 종류의 삽입 콘텐츠에도 동일한 규칙을 적용할 수 있습니다.

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

이 규칙이 적용되면 브라우저에서 화면에 맞게 이미지를 자동으로 축소합니다.

block-size 값 auto을 추가하면 브라우저에서 이미지의 가로세로 비율을 유지하면서 이미지 크기를 조절합니다.

콘텐츠 관리 시스템 (CMS) 또는 기타 콘텐츠 전송 시스템에서 이미지의 크기를 설정하는 경우도 있습니다. 디자인에 CMS의 기본값과 다른 가로세로 비율이 필요한 경우 aspect-ratio 속성을 사용하여 사이트의 디자인을 유지할 수 있습니다.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

안타깝게도 이렇게 하면 브라우저가 의도한 공간에 맞게 이미지를 압축하거나 늘려야 하는 경우가 많습니다.

압축 및 늘림을 방지하려면 object-fit 속성을 사용하세요.

object-fit 값이 contain이면 브라우저에서 이미지의 가로세로 비율을 유지하여 필요한 경우 이미지 주변에 빈 공간을 남깁니다.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit 값이 cover이면 브라우저가 이미지의 가로세로 비율을 유지하고 필요한 경우 이미지를 자릅니다.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

object-position 속성을 사용하여 이미지 자르기의 위치를 변경할 수 있습니다. 이렇게 하면 자르기의 초점이 조정되므로 이미지의 가장 중요한 부분이 계속 표시되도록 할 수 있습니다.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

이미지 제공

이러한 CSS 규칙은 브라우저에 이미지를 렌더링하는 방법을 알려줍니다. 브라우저에서 이러한 이미지를 처리하는 방법에 관한 힌트를 HTML에 제공할 수도 있습니다.

크기 조정 힌트

이미지의 크기를 알고 있다면 항상 width 및 height 속성을 포함하세요. max-inline-size 규칙으로 인해 이미지가 다른 크기로 렌더링되더라도 브라우저는 여전히 너비와 높이의 비율을 알고 있으므로 적절한 공간을 확보할 수 있습니다. 이렇게 하면 이미지가 로드될 때 다른 콘텐츠가 움직이는 것을 방지할 수 있습니다.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

로드 힌트

loading 속성을 사용하여 이미지가 표시 영역에 있거나 표시 영역 근처에 있을 때까지 로딩을 지연할지 여부를 브라우저에 알립니다. 스크롤해야 볼 수 있는 부분 아래의 이미지에는 lazy 값을 사용합니다. 사용자가 이미지가 표시될 정도로 아래로 스크롤할 때까지 브라우저에서 지연 이미지를 로드하지 않습니다. 사용자가 스크롤하지 않으면 이미지가 로드되지 않습니다.

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

스크롤 없이 보이는 부분 위에 있는 히어로 이미지의 경우 loading을 사용하지 마세요. 사이트에서 loading="lazy" 속성을 자동으로 적용하는 경우 일반적으로 loading을 기본값인 eager로 설정하여 이미지가 지연 로드되지 않도록 할 수 있습니다.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

가져오기 우선순위

LCP 이미지와 같은 중요한 이미지의 경우 fetchpriority 속성을 high로 설정하여 가져오기 우선순위를 사용하여 로딩에 우선순위를 부여할 수 있습니다.

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

이렇게 하면 브라우저가 레이아웃을 완료하고 이미지를 정상적으로 가져올 때까지 기다리는 대신 이미지를 즉시 높은 우선순위로 가져오도록 브라우저에 지시합니다.

하지만 브라우저에 이미지와 같은 리소스의 다운로드에 우선순위를 부여하도록 요청하면 브라우저는 스크립트나 글꼴 파일과 같은 다른 리소스의 우선순위를 낮춰야 합니다. 이미지에 fetchpriority="high"를 설정하는 것은 정말 중요한 경우에만 하세요.

미리 로드 힌트

가능한 경우 초기 HTML 파일에 모든 이미지를 포함하여 미리 로드를 피하는 것이 좋습니다. 하지만 JavaScript 또는 CSS 배경 이미지로 추가된 이미지와 같이 일부 이미지는 사용할 수 없을 수 있습니다.

사전 로드를 사용하면 브라우저가 이러한 중요한 이미지를 미리 가져오도록 할 수 있습니다. 정말 중요한 이미지의 경우 이 사전 로드를 fetchpriority 속성과 결합할 수 있습니다.

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

브라우저의 우선순위 지정 휴리스틱을 너무 자주 재정의하지 않도록 이러한 속성을 적절히 사용하세요. 과도하게 사용하면 성능이 저하될 수 있습니다.

일부 브라우저는 imagesrcset 및 imagesizes 속성을 사용하여 srcset에 따라 반응형 이미지 미리 로드를 지원합니다. 예를 들면 다음과 같습니다.

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

href 대체를 제외하면 srcset 지원이 없는 브라우저에서도 올바른 이미지를 미리 로드할 수 있습니다.

특정 형식에 대한 브라우저 지원에 따라 다른 형식의 이미지를 미리 로드할 수 없습니다. 이렇게 하면 사용자의 데이터를 낭비하는 추가 다운로드가 발생할 수 있습니다.

srcset를 사용한 반응형 이미지

이 max-inline-size: 100% 선언 덕분에 이미지가 컨테이너에서 벗어날 수 없습니다. 하지만 사용자의 화면이 작고 네트워크 대역폭이 낮은 경우 화면이 큰 사용자와 동일한 크기의 이미지를 다운로드하면 데이터가 낭비됩니다.

이 문제를 해결하려면 크기가 다른 동일한 이미지를 여러 개 추가하고 srcset 속성을 사용하여 이러한 크기가 존재하며 언제 사용해야 하는지 브라우저에 알립니다.

너비 설명어

값의 쉼표로 구분된 목록을 사용하여 srcset를 정의할 수 있습니다. 각 값은 이미지의 URL과 공백, 이미지에 관한 메타데이터(설명어라고 함)로 구성됩니다.

이 예에서 메타데이터는 w 단위를 사용하여 각 이미지의 너비를 설명합니다. w 하나는 1픽셀의 너비입니다.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset 속성은 src 속성을 대체하는 것이 아니라 보완합니다. 여전히 유효한 src 속성이 있어야 하지만 브라우저가 값을 srcset에 나열된 옵션 중 하나로 대체할 수 있습니다. 대역폭을 절약하기 위해 브라우저는 더 큰 이미지가 필요한 경우에만 다운로드합니다.

크기

너비 설명자를 사용하는 경우 sizes 속성을 사용하여 브라우저에 더 많은 정보를 제공해야 합니다. 이를 통해 다양한 조건에서 이미지가 표시될 것으로 예상되는 크기를 브라우저에 알릴 수 있습니다. 이러한 조건은 미디어 쿼리에 지정됩니다.

sizes 속성은 미디어 쿼리와 이미지 너비의 쉼표로 구분된 목록을 사용합니다.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

이 예에서는 너비가 66em를 초과하는 뷰포트에서 화면의 1/3보다 넓지 않은 이미지를 표시해야 한다고 브라우저에 알립니다(예: 3열 레이아웃 내).

뷰포트 너비가 44em~66em인 경우 이미지를 화면 너비의 절반으로 표시합니다 (2열 레이아웃과 같음).

44em보다 좁은 경우 화면의 전체 너비로 이미지를 표시합니다.

즉, 가장 큰 이미지가 가장 넓은 화면에 사용되지 않을 수도 있습니다. 다중 열 레이아웃을 표시할 수 있는 넓은 브라우저 창은 한 열에 맞는 이미지를 사용합니다. 이 이미지는 좁은 화면에서 단일 열 레이아웃에 사용되는 이미지보다 작을 수 있습니다.

픽셀 밀도 설명자

설명자를 사용하여 고밀도 디스플레이에 표시할 이미지의 대체 버전을 제공하여 더 높은 해상도에서 이미지가 선명하게 표시되도록 할 수도 있습니다.

밀도 설명자를 사용하여 src 속성의 이미지와 관련된 이미지의 픽셀 밀도를 설명합니다. 밀도 설명자는 1x 또는 2x과 같이 숫자 뒤에 문자 x가 붙습니다.

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

small-image.png의 크기가 300x200픽셀이고 medium-image.png의 크기가 600x400픽셀인 경우 srcset 목록에서 medium-image.png 뒤에 2x가 올 수 있습니다.

정수를 사용하지 않아도 됩니다. 이미지의 다른 버전이 450x300픽셀 크기인 경우 1.5x로 설명할 수 있습니다.

프레젠테이션 이미지

HTML의 이미지는 콘텐츠입니다. 따라서 스크린 리더와 검색엔진을 위해 이미지 설명이 포함된 alt 속성을 포함합니다.

의미 있는 콘텐츠가 없는 장식용 이미지를 삽입하는 경우 빈 alt 속성을 사용할 수 있습니다.

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

alt 속성은 비어 있더라도 항상 포함해야 합니다. 빈 alt 속성은 스크린 리더에 이미지가 표현용임을 알려줍니다. alt 속성이 누락되면 해당 정보가 제공되지 않습니다.

표현용 또는 장식용 이미지는 HTML 대신 CSS에 포함하는 것이 좋습니다. HTML은 구조를 위한 것입니다. CSS는 프레젠테이션용입니다.

배경 이미지

CSS에서 background-image 속성을 사용하여 표현 이미지를 로드합니다.

element {
  background-image: url(flourish.png);
}

background-image에 image-set 함수를 사용하여 여러 이미지 후보를 지정할 수 있습니다.

CSS의 image-set 함수는 HTML의 srcset 속성과 매우 유사하게 작동합니다. 각 이미지의 픽셀 밀도 설명자가 포함된 이미지 목록을 제공합니다.

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

브라우저에서 기기의 픽셀 밀도에 가장 적합한 이미지를 선택합니다.

사이트에 이미지를 추가할 때는 다음을 비롯한 여러 요소를 고려해야 합니다.

• 각 이미지에 적합한 공간을 예약합니다.
• 필요한 크기 파악
• 이미지가 콘텐츠인지 장식인지 결정

이미지를 올바르게 설정하는 데 시간을 투자할 가치가 있습니다. 이미지 전략이 좋지 않으면 사용자가 짜증을 내고 불만을 느낄 수 있습니다. 이미지 전략을 잘 세우면 사용자의 기기나 네트워크 연결에 관계없이 사이트가 빠르고 선명하게 느껴집니다.

툴킷에는 이미지를 더 세부적으로 제어할 수 있는 HTML 요소가 하나 더 있습니다. picture 요소입니다.

이해도 테스트

이미지에 대한 지식을 테스트해 보세요.