6.1 srcset과 sizes 속성 사용
애플의 Retina 디스플레이 같은 고해상도 화면은 많은 최신 기기에서 표준이 되었어. 이런 디스플레이는 인치당 픽셀 수(PPI)가 많아서 더 선명하고 세부적으로 보여줘. 웹 개발자에게는 이런 화면에 그래픽을 최적화하는 게 중요해. 사용자 경험을 최고로 만들려면 어떻게 해야 할지 한번 보자.
고해상도 화면 문제점
고해상도 화면에서는 일반 이미지는 흐릿하거나 픽셀화될 수 있어, 이미지의 한 픽셀이 화면의 여러 픽셀에 걸쳐 보여지기 때문이지. 이 문제를 해결하려면 해상도가 높은 이미지를 사용해서, 고해상도 화면에 맞게 브라우저가 스케일링할 수 있도록 해야 해.
srcset과 sizes 속성은 서로 다른 픽셀 밀도를 위한 다양한 이미지 버전을 제시할 수 있어. 브라우저가 특정 기기에 가장 적합한 이미지를 선택하도록 도와주지.
srcset과 sizes 사용 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레티나 디스플레이 최적화</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="레티나 디스플레이용 예시 이미지">
</body>
</html>
코드 설명:
srcset: 다양한 픽셀 밀도를 위한 세 가지 이미지 버전을 지정해 (1x,2x,3x)-
sizes: 다양한 화면 조건에 따른 이미지의 너비를 정의해:600px이하 — 이미지가 뷰포트 너비의100%를 차지해1200px이하 — 이미지가 뷰포트 너비의50%를 차지해- 그 외 경우 — 이미지가 뷰포트 너비의
33%를 차지해
6.2 벡터 그래픽(SVG) 사용
벡터 그래픽(SVG)은 고해상도 화면에 적합한 해결책이야, SVG 파일은 품질 저하 없이 확장할 수 있거든. 로고, 아이콘 및 기타 인터페이스 요소에 이상적이지.
SVG 사용 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레티나 디스플레이용 SVG 사용</title>
</head>
<body>
<img src="images/logo.svg" alt="로고">
</body>
</html>
코드 설명:
src="images/logo.svg": 품질 저하 없이 어떤 크기로든 확대할 수 있는 SVG 파일 경로를 지정해
6.3 CSS 사용
배경 이미지의 경우, 미디어 쿼리와 CSS 속성을 사용해서 기기의 픽셀 밀도에 따라 다른 이미지 버전을 로드할 수 있어.
배경 이미지에 CSS 사용 예제:
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
코드 설명:
.background: 기본 배경 이미지를 정의해@media only screen and (min-resolution: 2dppx):2x해상도 디스플레이에 대한 배경 이미지를 변경해@media only screen and (min-resolution: 3dppx):3x해상도 디스플레이에 대한 배경 이미지를 변경해
6.4 picture 요소
<picture> 태그를 사용하면 다양한 조건에 맞춰 여러 이미지 소스를 지정할 수 있어. 이는 이미지 적응에 대한 더 복잡한 사례에 유용해.
<picture> 사용 예제:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레티나 디스플레이용 <picture> 사용</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="레티나 디스플레이용 예시 이미지">
</picture>
</body>
</html>
코드 설명:
<source>: 각각의 조건에 맞춘 다양한 이미지 소스를 지정해<img>:<picture>을 지원하지 않는 디바이스를 위한 기본 이미지를 설정해
6.5 이미지 최적화 예제
예제 1: 고해상도 적응형 이미지
고해상도 화면에 맞춰 srcset과 sizes 속성을 사용하여 이미지가 최적화된 예제를 만들어보자:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레티나 디스플레이용 적응형 이미지</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="레티나 디스플레이용 예시 이미지">
</body>
</html>
코드 설명:
srcset: 다양한 픽셀 밀도를 위한 세 가지 이미지 버전을 지정해 (1x,2x,3x)-
sizes: 다양한 화면 조건에 따른 이미지의 너비를 정의해:600px이하 — 이미지가 뷰포트 너비의100%를 차지해1200px이하 — 이미지가 뷰포트 너비의50%를 차지해- 그 외 경우 — 이미지가 뷰포트 너비의
33%를 차지해
예제 2: SVG를 사용한 확장 가능한 이미지
모든 기기에서 품질 높은 표시를 보장하기 위해 SVG를 사용하는 예제를 만들어보자:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>레티나 디스플레이용 SVG 사용</title>
</head>
<body>
<img src="images/logo.svg" alt="로고">
</body>
</html>
코드 설명:
src="images/logo.svg": 품질 저하 없이 어떤 크기로든 확대할 수 있는 SVG 파일 경로를 지정해
GO TO FULL VERSION