반응형 이미지

웹의 텍스트는 텍스트가 넘치지 않도록 화면 가장자리에서 자동으로 줄바꿈됩니다. 이미지에서는 다릅니다. 이미지에는 고유 크기가 있습니다. 이미지가 화면보다 넓으면 이미지가 오버플로되어 가로 스크롤바가 표시됩니다.

다행히 CSS에서 조치를 취하여 이러한 일이 발생하지 않도록 할 수 있습니다.

이미지 제한

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

브라우저 지원

  • 57
  • 79
  • 41
  • 12.1

소스

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

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

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

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

스크린샷 두 개. 첫 번째는 브라우저 너비를 넘어 확장되는 이미지를 보여주며, 두 번째는 브라우저 표시 영역 내에서 제한된 동일한 이미지를 보여줍니다.

block-sizeauto를 추가하면 이미지의 가로세로 비율이 일정하게 유지됩니다.

예를 들어 콘텐츠 관리 시스템을 통해 이미지가 추가된 경우 이미지 크기를 제어할 수 없는 경우가 있습니다. 디자인에서 이미지의 실제 크기와 다른 가로세로 비율을 사용해야 하는 경우 CSS에서 aspect-ratio 속성을 사용합니다.

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

하지만 그러면 브라우저에서 원하는 가로세로 비율에 맞게 이미지를 찌그러뜨리거나 늘릴 수 있습니다.

입에 공을 물고 있는 행복해 보이는 잘생긴 강아지의 옆모습이 보이지만 이미지가 눌려 있습니다.

이를 방지하려면 object-fit 속성을 사용하세요.

브라우저 지원

  • 32
  • 79
  • 36
  • 10

소스

containobject-fit 값은 위아래에 빈 공간을 남겨두는 경우에도 이미지의 가로세로 비율을 유지하도록 브라우저에 지시합니다.

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

coverobject-fit 값은 이미지의 가로세로 비율을 유지하도록 브라우저에 지시합니다. 이는 이미지의 상단과 하단에서 이미지를 자르는 경우에도 마찬가지입니다.

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
입에 공을 물고 있는 행복해 보이는 잘생긴 강아지의 옆으로 이미지 양쪽에 여분의 공간이 있습니다. 입에 공을 물고 행복해 보이는 잘생긴 강아지의 옆모습이 상단과 하단이 잘렸습니다.
동일한 이미지에 'object-fit'에 대해 다른 두 값이 적용되었습니다. 첫 번째는 `contain` 이라는 `object-fit` 값이 있습니다. 두 번째는 `cover` 라는 `object-fit` 값을 포함합니다.

상단과 하단을 균등하게 자르는 것이 문제가 되는 경우 object-position CSS 속성을 사용하여 자르기의 포커스를 조정하세요.

브라우저 지원

  • 32
  • 79
  • 36
  • 10

소스

가장 중요한 이미지 콘텐츠가 계속 표시되도록 할 수 있습니다.

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

입에 공을 물고 행복해 보이는 잘생긴 강아지의 옆모습이 있으며 이미지 하단만 잘렸습니다.

이미지 전송

이러한 CSS 규칙은 이미지를 렌더링하는 방식을 브라우저에 지정합니다. 브라우저가 이러한 이미지를 처리하는 방법에 대한 힌트를 HTML에 제공할 수도 있습니다.

크기 조정 힌트

이미지의 크기를 알고 있으면 widthheight 속성을 포함해야 합니다. max-inline-size: 100% 규칙으로 인해 이미지가 다른 크기로 렌더링되더라도 브라우저는 너비와 높이의 비율을 알고 있으므로 적절한 공간을 따로 확보할 수 있습니다. 이렇게 하면 이미지가 로드될 때 다른 콘텐츠가 이동하지 않게 됩니다.

<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" 속성을 자동으로 적용하는 경우 종종 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"를 설정하세요.

힌트 미리 로드

일부 이미지는 JavaScript로 추가한 경우 또는 CSS에서 배경 이미지로 추가한 경우 초기 HTML에서 사용하지 못할 수 있습니다. 미리 로드를 사용하여 이러한 중요한 이미지를 미리 가져올 수도 있습니다. 매우 중요한 이미지의 경우 fetchpriority 속성과 결합할 수 있습니다.

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

브라우저의 우선순위 지정 휴리스틱을 너무 많이 재정의하여 성능이 저하되는 것을 방지하기 위해 이 속성도 드물게 사용해야 합니다.

imagesrcsetimagesizes 속성을 통해 srcset (아래에서 설명)을 기반으로 반응형 이미지를 미리 로드하는 기능은 고급 기능이며 일부 브라우저에서 지원되지만 일부 브라우저에서는 지원되지 않습니다.

href 대체를 제외하면 이 기능을 지원하지 않는 브라우저에서 잘못된 이미지를 미리 로드하지 않도록 할 수 있습니다.

현재 브라우저에서 지원하는 이미지에 기반한 다른 이미지 형식을 기반으로 한 미리 로드는 지원되지 않으며 추가 다운로드가 발생할 수 있습니다.

가장 좋은 방법은 가능하면 미리 로드를 피하고 초기 HTML에서 이미지를 사용할 수 있도록 하고 코드 반복을 피하며 브라우저에서 지원하는 모든 옵션에 액세스할 수 있도록 하는 것입니다.

이미지 디코딩

img 요소에 추가할 수 있는 decoding 속성도 있습니다. 이미지를 비동기식으로 디코딩할 수 있음을 브라우저에 알릴 수 있습니다. 그러면 브라우저에서 다른 콘텐츠 처리 우선순위를 정할 수 있습니다.

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

이미지 자체가 우선순위를 두어야 할 가장 중요한 콘텐츠인 경우 sync 값을 사용할 수 있습니다.

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

decoding 속성은 이미지가 디코딩되는 속도를 변경하지 않으며, 단순히 브라우저가 다른 콘텐츠를 렌더링하기 전에 이 이미지 디코딩이 발생할 때까지 기다리는지 여부만 변경합니다.

대부분의 경우 이렇게 해도 영향이 거의 없지만 특정 시나리오에서는 이미지나 콘텐츠가 약간 더 빠르게 표시될 수 있습니다. 예를 들어 렌더링하는 데 시간이 걸리는 요소가 많고 디코딩에 시간이 걸리는 큰 이미지가 있는 큰 문서의 경우 중요한 이미지에 sync를 설정하면 브라우저에서 이미지를 기다린 후 한 번에 렌더링하도록 지시하게 됩니다. 또는 async를 설정하면 이미지가 디코딩될 때까지 기다리지 않고 콘텐츠를 더 빠르게 표시할 수 있습니다.

하지만 일반적으로 과도한 DOM 크기를 방지하고, 디코딩 시간을 줄이기 위해 반응형 이미지를 사용하여 디코딩 속성의 효과가 거의 없도록 하는 것이 좋습니다.

srcset 반응형 이미지

max-inline-size: 100% 선언 덕분에 이미지가 컨테이너에서 벗어나지 않습니다. 하지만 크기에 맞게 축소되는 큰 이미지가 있으면 괜찮아 보이지만 괜찮은 느낌이 들지 않습니다. 낮은 대역폭 네트워크에서 작은 화면의 기기를 사용하는 사용자는 불필요하게 큰 이미지를 다운로드합니다.

동일한 이미지의 여러 버전을 다양한 크기로 만드는 경우 srcset 속성을 사용하여 브라우저에 이를 알릴 수 있습니다.

너비 설명어

쉼표로 구분된 값 목록을 전달할 수 있습니다. 각 값은 이미지의 URL과 그 뒤에 공백과 이미지에 대한 메타데이터가 와야 합니다. 이 메타데이터를 설명어라고 합니다.

이 예에서 메타데이터는 w 단위를 사용하여 각 이미지의 너비를 설명합니다. 1w은 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 속성을 대체하지 않습니다. 대신 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이면 이미지가 화면의 3분의 1보다 넓지 않게 (예: 3열 레이아웃 내부) 표시되도록 브라우저에 지시합니다.

표시 영역 너비가 44em~66em이면 이미지를 화면의 절반 너비로 표시합니다 (2열 레이아웃).

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

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

픽셀 밀도 설명어

동일한 이미지의 여러 버전을 제공해야 하는 경우도 있습니다.

일부 기기에는 고밀도 디스플레이가 있습니다. 이중 밀도 디스플레이에서는 한 픽셀의 공간에 두 개의 픽셀에 상당하는 정보를 담을 수 있습니다. 이렇게 하면 이러한 종류의 디스플레이에서 이미지가 선명하게 표시됩니다.

입에 공을 물고 있는 행복한 모습의 잘생긴 강아지 이미지를 두 가지 버전으로 보여줍니다. 하나는 선명하게 보이고 다른 하나는 흐릿하게 보입니다.

밀도 설명자를 사용하여 src 속성의 이미지와 관련하여 이미지의 픽셀 밀도를 설명합니다. 밀도 설명어는 숫자 뒤에 문자 x(1x, 2x 등)가 옵니다.

<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 속성과 동일하지 않습니다. 빈 alt 속성은 스크린 리더에 이 이미지가 표시용임을 전달합니다.

이상적으로는 표시용 또는 장식용 이미지가 HTML에 전혀 포함되지 않아야 합니다. HTML은 구조용입니다. CSS는 프레젠테이션용입니다.

배경 이미지

CSS에서 background-image 속성을 사용하여 프레젠테이션 이미지를 로드합니다.

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

background-imageimage-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 요소가 하나 더 있습니다.

학습 내용 확인하기

이미지에 관한 지식 테스트

이미지가 표시 영역에 맞도록 스타일을 추가해야 합니다.

포함하지 않은 이미지는 원래 크기만큼 큽니다.
거짓
스타일은 필수 항목입니다.

이미지의 높이와 너비가 부자연스러운 가로세로 비율로 변경될 때 이미지가 비율에 맞게 조정되는 데 도움이 되는 스타일은 무엇인가요?

object-fit
contain, cover 등의 키워드로 이미지를 얼마나 잘 활용하는지 지정합니다.
image-fit
존재하지 않는 속성입니다. 내가 만든 것입니다.
fit-image
존재하지 않는 속성입니다. 내가 만든 것입니다.
aspect-ratio
이렇게 하면 비정상적인 이미지 비율이 발생하거나 해결될 수 있습니다.

이미지에 heightwidth를 배치하면 CSS에서 스타일을 다르게 지정할 수 없습니다.

규칙이라기보다는 힌트라고 생각하세요.
거짓
CSS에는 높이와 너비가 태그에 인라인으로 존재하는 경우에도 이미지 크기를 조정할 수 있는 다양한 동적 옵션이 있습니다.

srcset 속성은 src 속성을 _______하는 것이 아니라 _______합니다.

보완, 대체
srcsetsrc 속성을 확실히 대체하지 않습니다.
대체, 보완
가능한 경우 브라우저에서 선택할 수 있는 추가 옵션을 제공합니다.

이미지에 누락된 alt는 빈 alt와 동일합니다.

alt 속성은 이 이미지가 프레젠테이션용임을 스크린 리더에 전달합니다.
거짓
alt가 누락되면 스크린 리더에 아무 신호도 전송되지 않습니다.