이미지는 웹에서 가장 무겁고 가장 널리 사용되는 리소스인 경우가 많습니다. 따라서 이미지를 최적화하면 웹사이트의 성능을 크게 개선할 수 있습니다. 대부분의 경우 이미지를 최적화한다는 것은 더 적은 바이트 수를 전송하여 네트워크 시간을 줄이는 것을 의미하지만, 사용자의 기기에 적합한 크기의 이미지를 게재하여 사용자에게 전송되는 바이트 수를 최적화할 수도 있습니다.
이미지는 <img> 또는 <picture> 요소 또는 CSS background-image 속성을 사용하여 페이지에 추가할 수 있습니다.
이미지 크기
이미지 리소스를 사용할 때 수행할 수 있는 첫 번째 최적화는 이미지를 올바른 크기로 표시하는 것입니다. 여기서 크기라는 용어는 이미지의 크기를 나타냅니다. 다른 변수를 고려하지 않으면 500x500픽셀 컨테이너에 표시되는 이미지의 최적 크기는 500x500픽셀입니다. 예를 들어 정사각형 1, 000픽셀 이미지를 사용하면 이미지가 필요한 크기의 두 배가 됩니다.
하지만 적절한 이미지 크기를 선택하는 데는 다양한 변수가 관련되어 있으므로 모든 경우에 적절한 이미지 크기를 선택하는 작업은 매우 복잡합니다. 2010년 iPhone 4가 출시되었을 때 화면 해상도(640x960)는 iPhone 3 (320x480)의 2배였습니다. 하지만 iPhone 4의 화면 실제 크기는 iPhone 3와 거의 동일하게 유지되었습니다.
모든 항목을 더 높은 해상도로 표시하면 텍스트와 이미지가 상당히 작아집니다. 정확히는 이전 크기의 절반이 됩니다. 대신 1개의 픽셀이 2개의 기기 픽셀이 되었습니다. 이를 기기 픽셀 비율 (DPR)이라고 합니다. iPhone 4 및 그 이후에 출시된 많은 iPhone 모델의 DPR은 2였습니다.
이전 예를 다시 살펴보면 기기의 DPR이 2이고 이미지가 500x500픽셀 컨테이너에 표시되는 경우 정사각형 1,000픽셀 이미지(기본 크기라고 함)가 최적의 크기입니다. 마찬가지로 기기의 DPR이 3인 경우 정사각형 1500픽셀 이미지가 최적의 크기입니다.
srcset
<img> 요소는 브라우저에서 사용할 수 있는 이미지 소스의 목록을 지정할 수 있는 srcset 속성을 지원합니다. 지정된 각 이미지 소스에는 이미지 URL과 너비 또는 픽셀 밀도 설명자가 포함되어야 합니다.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
위의 HTML 스니펫은 픽셀 밀도 설명자를 사용하여 DPR이 1인 기기에는 image-500.png, DPR이 2인 기기에는 image-1000.jpg, DPR이 3인 기기에는 image-1500.jpg를 사용하도록 브라우저에 힌트를 줍니다.
간단해 보이지만 화면의 DPR만 고려하여 특정 페이지에 가장 적합한 이미지를 선택하는 것은 아닙니다. 페이지의 레이아웃도 고려해야 할 사항입니다.
sizes
이전 솔루션은 모든 뷰포트에서 동일한 CSS 픽셀 크기로 이미지를 표시하는 경우에만 작동합니다. 대부분의 경우 페이지의 레이아웃과 컨테이너의 크기는 사용자의 기기에 따라 달라집니다.
sizes 속성을 사용하면 소스 크기 집합을 지정할 수 있습니다. 여기서 각 소스 크기는 미디어 조건과 값으로 구성됩니다. sizes 속성은 이미지의 의도된 디스플레이 크기를 CSS 픽셀로 설명합니다. srcset 너비 설명자와 결합하면 브라우저에서 사용자 기기에 가장 적합한 이미지 소스를 선택할 수 있습니다.
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
srcset="/image-500.jpg 500w, /image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
위의 HTML 스니펫에서 srcset 속성은 브라우저에서 선택할 수 있는 이미지 후보 목록을 쉼표로 구분하여 지정합니다. 목록의 각 후보는 이미지의 URL과 이미지의 고유 너비를 나타내는 문법으로 구성됩니다. 이미지의 기본 크기는 크기입니다. 예를 들어 1000w의 설명자는 이미지의 고유 너비가 1, 000픽셀임을 나타냅니다.
브라우저는 이 정보를 사용하여 sizes 속성의 미디어 조건을 평가하고, 이 경우 기기의 표시 영역 너비가 768픽셀을 초과하면 이미지가 500픽셀 너비로 표시된다고 지시받습니다. 소형 기기에서는 이미지가 100vw 또는 전체 뷰포트 너비로 표시됩니다.
그러면 브라우저는 이 정보를 srcset 이미지 소스 목록과 결합하여 최적의 이미지를 찾을 수 있습니다. 예를 들어 사용자가 DPR이 3이고 화면 너비가 320픽셀인 휴대기기를 사용하는 경우 이미지는 320 CSS pixels x 3 DPR = 960 device pixels에 표시됩니다. 이 예에서 가장 근접한 크기의 이미지는 내부 너비가 1, 000픽셀 (1000w)인 image-1000.jpg입니다.
파일 형식
브라우저는 여러 가지 이미지 파일 형식을 지원합니다. WebP 및 AVIF와 같은 최신 이미지 형식은 PNG나 JPEG보다 압축률이 높을 수 있으므로 이미지 파일 크기가 작아지고 다운로드 시간이 단축됩니다. 최신 형식으로 이미지를 게재하면 리소스의 로드 시간을 줄일 수 있으며, 이로 인해 최대 콘텐츠 페인트 (LCP)가 낮아질 수 있습니다.
WebP는 모든 최신 브라우저에서 작동하는 널리 지원되는 형식입니다. WebP는 JPEG, PNG, GIF보다 압축률이 우수한 경우가 많으며 손실(lossy) 및 무손실 압축을 모두 제공합니다. 또한 WebP는 손실 압축을 사용할 때도 JPEG 코덱에서 제공하지 않는 알파 채널 투명도를 지원합니다.
AVIF는 최신 이미지 형식이며 WebP만큼 광범위하게 지원되지는 않지만 브라우저 전반에서 상당히 괜찮은 지원을 받습니다. AVIF는 손실 압축과 무손실 압축을 모두 지원하며, 테스트에 따르면 경우에 따라 JPEG보다 50% 이상 절감되는 것으로 나타났습니다. AVIF는 넓은 색상 영역 (WCG) 및 HDR (High Dynamic Range) 기능도 제공합니다.
압축
이미지와 관련하여 두 가지 유형의 압축이 있습니다.
손실 압축은 정량화를 통해 이미지 정확도를 줄여 작동하며, 크로마 하위 샘플링을 사용하여 추가 색상 정보가 삭제될 수 있습니다. 손실 압축은 노이즈와 색상이 많은 고밀도 이미지(일반적으로 비슷한 콘텐츠가 포함된 사진 또는 이미지)에 가장 효과적입니다. 손실 압축으로 생성된 아티팩트는 세부적인 이미지에서는 눈에 띄지 않을 가능성이 훨씬 적기 때문입니다. 하지만 선화, 유사하게 선명한 세부정보 또는 텍스트와 같이 날카로운 가장자리가 포함된 이미지의 경우 손실 압축이 덜 효과적일 수 있습니다. 손실 압축은 JPEG, WebP, AVIF 이미지에 적용할 수 있습니다.
무손실 압축은 데이터 손실 없이 이미지를 압축하여 파일 크기를 줄입니다. 무손실 압축은 인접한 픽셀과의 차이를 기반으로 픽셀을 설명합니다. 무손실 압축은 GIF, PNG, WebP, AVIF 이미지 형식에 사용됩니다.
Squoosh, ImageOptim 또는 이미지 최적화 서비스를 사용하여 이미지를 압축할 수 있습니다. 압축할 때는 모든 경우에 적합한 범용 설정이 없습니다. 이미지 품질과 파일 크기 간에 적절한 절충점을 찾을 때까지 다양한 압축 수준을 실험하는 것이 좋습니다. 일부 고급 이미지 최적화 서비스는 이를 자동으로 처리할 수 있지만 모든 사용자에게 비용적으로 적합하지 않을 수 있습니다.
<picture> 요소
<picture> 요소를 사용하면 여러 이미지 후보를 더 유연하게 지정할 수 있습니다.
<picture>
<source type="image/avif" srcset="image.avif">
<source type="image/webp" srcset="image.webp">
<img
alt="An image"
width="500"
height="500"
src="/image.jpg"
>
</picture>
<picture> 요소 내에 <source> 요소를 사용하면 AVIF 및 WebP 이미지에 대한 지원을 추가할 수 있지만 브라우저에서 최신 형식을 지원하지 않는 경우 더 호환되는 기존 이미지 형식으로 대체할 수 있습니다. 이 접근 방식을 사용하면 브라우저가 일치하는 지정된 첫 번째 <source> 요소를 선택합니다. 이 형식으로 이미지를 렌더링할 수 있으면 해당 이미지를 사용합니다. 그렇지 않으면 브라우저가 다음 지정된 <source> 요소로 이동합니다. 위의 HTML 스니펫에서 AVIF 형식이 WebP 형식보다 우선 적용되며 AVIF 또는 WebP가 모두 지원되지 않는 경우 JPEG 형식으로 대체됩니다.
<picture> 요소에는 그 안에 중첩된 <img> 요소가 필요합니다. alt, width, height 속성은 <img>에서 정의되며 선택된 <source>와 관계없이 사용됩니다.
<source> 요소는 media, srcset, sizes 속성도 지원합니다. 앞의 <img> 예와 마찬가지로, 이는 브라우저에 여러 뷰포트에서 선택할 이미지를 나타냅니다.
<picture>
<source
media="(min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
media 속성은 미디어 조건을 사용합니다. 위 예에서는 기기의 DPR이 미디어 조건으로 사용됩니다. DPR이 1.5 이상인 기기는 첫 번째 <source> 요소를 사용합니다. <source> 요소는 표시 영역의 너비가 768픽셀을 초과하는 기기에서 선택한 이미지 후보가 너비 500픽셀로 표시된다고 브라우저에 알립니다. 작은 기기에서는 전체 뷰포트 너비를 차지합니다. media 및 srcset 속성을 결합하면 사용할 이미지를 더 세부적으로 제어할 수 있습니다.
다음 표는 여러 뷰포트 너비와 기기 픽셀 비율이 평가되는 모습을 보여줍니다.
| 표시 영역 너비 (픽셀) | DPR 1개 | 1.5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 500.jpg | 1000.jpg |
| 480 | 500.jpg | 500.jpg | 1000.jpg | 1500.jpg |
| 560 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
DPR이 1인 기기는 image-500.jpg 이미지를 다운로드합니다. 여기에는 이미지를 가로 500픽셀의 외부 크기로 보는 대부분의 데스크톱 사용자가 포함됩니다. 반면 DPR이 3인 모바일 사용자는 DPR이 3인 데스크톱 기기에서 사용되는 것과 동일한 이미지인 더 큰 image-1500.jpg를 다운로드할 수 있습니다.
<picture>
<source
media="(min-width: 561px) and (min-resolution: 1.5x)"
srcset="/image-1000.jpg 1000w, /image-1500.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<source
media="(max-width: 560px) and (min-resolution: 1.5x)"
srcset="/image-1000-sm.jpg 1000w, /image-1500-sm.jpg 1500w"
sizes="(min-width: 768px) 500px, 100vw"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
이 예에서는 DPR이 높은 넓은 기기에 다른 이미지를 사용하도록 <source> 요소를 추가하여 <picture> 요소를 조정합니다.
| 표시 영역 너비 (픽셀) | DPR 1개 | 1.5 DPR | 2 DPR | 3 DPR |
|---|---|---|---|---|
| 320 | 500.jpg | 500.jpg | 1000-sm.jpg | 1000-sm.jpg |
| 480 | 500.jpg | 500.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 560 | 500.jpg | 1000-sm.jpg | 1000-sm.jpg | 1500-sm.jpg |
| 1024 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
| 1920 | 500.jpg | 1000.jpg | 1000.jpg | 1500.jpg |
이 추가 쿼리를 사용하면 image-1000-sm.jpg 및 image-1500-sm.jpg가 작은 뷰포트에 표시되는 것을 확인할 수 있습니다. 이 추가 정보는 이러한 크기와 밀도에서는 압축 아티팩트가 잘 보이지 않으면서도 데스크톱 기기의 이미지 품질을 저하시키지 않으므로 이미지를 더 압축할 수 있습니다.
또는 srcset 및 media 속성을 조정하여 작은 표시 영역에 큰 이미지를 게재하지 않을 수 있습니다.
<picture>
<source
media="(min-width: 561px)"
srcset="/image-500.jpg, /image-1000.jpg 2x, /image-1500.jpg 3x"
>
<source
media="(max-width: 560px)"
srcset="/image-500.jpg 1x, /image-1000.jpg 2x"
>
<img
alt="An image"
width="500"
height="500"
src="/image-500.jpg"
>
</picture>
위의 HTML 스니펫에서는 기기 픽셀 비율 설명자를 사용하기 위해 너비 설명자가 삭제되었습니다. 휴대기기에 제공되는 이미지는 DPR이 3인 기기에서도 /image-500.jpg 또는 /image-1000.jpg로 제한됩니다.
복잡성 관리 방법
반응형 이미지로 작업할 때는 각 이미지에 다양한 크기와 형식이 있을 수 있습니다. 위 예에서는 각 크기의 변형이 사용되지만 AVIF 및 WebP는 제외됩니다. 대안은 몇 개를 만들어야 하나요? 많은 엔지니어링 문제와 마찬가지로 답변은 '상황에 따라 다름'일 수 있습니다.
가장 적합한 결과를 제공하기 위해 다양한 변형을 많이 사용하고 싶을 수 있지만 이미지 변형을 추가할 때마다 비용이 발생하고 브라우저 캐시가 덜 효율적으로 사용됩니다. 대안이 하나만 있으면 모든 사용자가 동일한 이미지를 수신하므로 매우 효율적으로 캐시할 수 있습니다.
반면에 변형이 많은 경우 각 변형에 다른 캐시 항목이 필요합니다. 대안의 캐시 항목이 만료되어 이미지를 소스 서버에서 다시 가져와야 하는 경우 서버 비용이 증가하고 성능이 저하될 수 있습니다.
이 외에도 HTML 문서 크기는 각 변형마다 커집니다. 이미지마다 여러 KB의 HTML을 전송하게 될 수 있습니다.
Accept 요청 헤더를 기반으로 이미지 게재
Accept HTTP 요청 헤더는 서버에 사용자의 브라우저에서 이해하는 콘텐츠 유형을 알려줍니다. 이 정보를 사용하면 서버에서 HTML 응답에 추가 바이트를 추가하지 않고도 최적의 이미지 형식을 제공할 수 있습니다.
if (request.headers.accept) {
if (request.headers.accept.includes('image/avif')) {
return reply.from('image.avif');
} else if (request.headers.accept.includes('image/webp')) {
return reply.from('image.webp');
}
}
return reply.from('image.jpg');
위의 HTML 스니펫은 서버의 JavaScript 백엔드에 추가하여 최적의 이미지 형식을 선택하고 제공할 수 있는 코드의 단순화된 버전입니다.
요청 Accept 헤더에 image/avif가 포함된 경우 AVIF 이미지가 제공됩니다. 그렇지 않고 Accept 헤더에 image/webp가 포함된 경우 WebP 이미지가 제공됩니다. 이러한 조건 중 어느 것에도 해당하지 않으면 JPEG 이미지가 제공됩니다.
거의 모든 유형의 웹 서버에서 Accept 요청 헤더의 콘텐츠를 기반으로 응답을 수정할 수 있습니다. 예를 들어 mod_rewrite를 사용하여 Accept 헤더를 기반으로 Apache 서버에서 이미지 요청을 재작성할 수 있습니다.
이는 이미지 콘텐츠 전송 네트워크(CDN)에서 볼 수 있는 동작과 비슷합니다. 이미지 CDN은 이미지를 최적화하고 사용자의 기기와 브라우저를 기반으로 최적의 형식을 전송하는 데 매우 유용한 솔루션입니다.
균형을 찾고 적절한 수의 이미지 후보를 생성하고 사용자 환경에 미치는 영향을 측정하는 것이 중요합니다. 이미지에 따라 결과가 달라질 수 있으며 각 이미지에 적용되는 최적화는 페이지 내 크기와 사용자가 사용하는 기기에 따라 다릅니다. 예를 들어 전체 너비 히어로 이미지의 경우 전자상거래 제품 등록정보 페이지의 썸네일 이미지보다 더 많은 옵션이 필요할 수 있습니다.
지연 로드
loading 속성을 사용하여 이미지가 표시 영역에 표시될 때 브라우저에 이미지를 지연 로드하도록 지시할 수 있습니다. 속성 값이 lazy이면 브라우저에 이미지가 뷰포트 내에 있거나 뷰포트 근처에 있을 때까지 이미지를 다운로드하지 말라고 지시합니다. 이렇게 하면 대역폭이 절약되므로 브라우저가 이미 표시 영역에 있는 중요한 콘텐츠를 렌더링하는 데 필요한 리소스에 우선순위를 둘 수 있습니다.
decoding
decoding 속성은 브라우저에 이미지를 디코딩하는 방법을 알려줍니다. async 값은 브라우저에 이미지를 비동기식으로 디코딩할 수 있다고 알리므로 다른 콘텐츠를 렌더링하는 시간이 개선될 수 있습니다. sync 값은 브라우저에 이미지가 다른 콘텐츠와 동시에 표시되어야 한다고 알려줍니다.
기본값 auto를 사용하면 브라우저가 사용자에게 가장 적합한 것을 결정할 수 있습니다.
이미지 데모
학습한 내용 테스트
무손실 압축을 지원하는 이미지 형식은 무엇인가요?
손실 압축을 지원하는 이미지 형식은 무엇인가요?
너비 설명자 (예: 1000w)는 srcset 속성에 지정된 이미지 후보에 관해 브라우저에 무엇을 알려 줍니까?
sizes 속성은 적용되는 <img> 요소에 관해 브라우저에 무엇을 알려 줍니까?
<img> 요소의 srcset에 지정된 후보 중에서 로드해야 하는 후보를 표현하는 로직입니다.
<img> 요소의 srcset 속성에서 로드할 이미지의 기본 너비입니다.
다음 단계: 동영상 실적
이미지는 웹에서 사용되는 가장 널리 사용되는 미디어 유형이지만 성능과 관련하여 유의해야 할 유일한 요소는 아닙니다. 동영상은 웹에서 널리 사용되는 또 다른 일반적인 미디어 유형으로, 자체적인 성능 고려사항이 있습니다. 이 과정의 다음 모듈에서는 동영상 최적화와 동영상을 효율적으로 로드하는 방법에 관한 몇 가지 기법을 살펴봅니다.