웹의 텍스트는 오버플로되지 않도록 화면 가장자리에서 자동으로 줄바꿈됩니다. 반면에 이미지에는 고유한 크기가 있습니다. 이미지가 화면보다 넓은 경우에는 이미지가 오버플로되며 사용자가 모든 이미지를 보려면 가로로 스크롤해야 합니다.
다행히 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 속성을 사용하세요.
contain의 object-fit 값은 이미지의 가로세로 비율을 보존하도록 브라우저에 지시하고 필요한 경우 이미지 주위에 빈 공간을 남겨둡니다.
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: contain;
}
cover의 object-fit 값은 이미지의 가로세로 비율을 유지하고 필요에 따라 이미지를 자르도록 브라우저에 지시합니다.
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;
}
object-position를 설정할 수 있습니다.이미지 전송
이러한 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를 지원하지 않는 브라우저에서도 올바른 이미지를 미리 로드할 수 있습니다.
특정 형식의 브라우저 지원 여부에 따라 다른 형식의 이미지를 미리 로드할 수 없습니다. 이를 시도하면 추가 다운로드로 인해 사용자 데이터가 낭비될 수 있습니다.
이미지 디코딩
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를 설정할 수 있습니다.
하지만 일반적으로 decoding를 사용하는 대신 과도한 DOM 크기를 방지하고 반응형 이미지를 사용하여 디코딩 시간을 줄이는 것이 더 좋습니다.
srcset 반응형 이미지
max-inline-size: 100% 선언 덕분에 이미지를 컨테이너 밖으로 벗어날 수 없습니다. 그러나 화면이 작고 대역폭이 낮은 네트워크를 사용하는 사용자가 큰 화면을 사용하는 사용자와 동일한 크기의 이미지를 다운로드하면 데이터가 낭비됩니다.
이 문제를 해결하려면 동일한 이미지의 여러 버전을 서로 다른 크기로 추가하고 srcset 속성을 사용하여 이러한 크기의 존재 여부와 사용 시기를 브라우저에 알립니다.
너비 설명어
쉼표로 구분된 값 목록을 사용하여 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 속성을 대체하지 않고 보완합니다.
여전히 유효한 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 속성의 이미지와 관련하여 이미지의 픽셀 밀도를 설명합니다. 밀도 설명어는 숫자 뒤에 문자 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 속성은 해당 정보를 제공하지 않습니다.
표시용 이미지 또는 장식용 이미지를 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 요소)가 하나 더 있습니다.
이해도 테스트
이미지에 대한 지식을 테스트합니다.
이미지가 표시 영역에 맞도록 스타일을 추가해야 합니다.
이미지의 높이와 너비가 부자연스러운 가로세로 비율로 강제 설정된 경우 어떤 스타일을 사용하면 이미지가 이러한 비율에 맞도록 조정할 수 있나요?
object-fitcontain, cover 등의 키워드와 이미지를 어떻게 맞출지 지정합니다.image-fitfit-imageaspect-ratio이미지에 height 및 width를 배치하면 CSS에서 이미지의 스타일을 다르게 지정할 수 없습니다.
srcset 속성은 src 속성이 아닌 _______합니다.
srcset는 src 속성을 대체하지 않습니다.이미지에 alt가 누락된 것은 빈 alt와 동일합니다.
alt 속성은 스크린 리더에 이 이미지가 표시용임을 알립니다.alt가 누락되면 스크린 리더에 아무 신호도 전송되지 않습니다.