빠른 로드 시간 등을 위한 이미지 정책

최적화된 이미지 정책을 사용하여 사이트에서 실적이 가장 우수한 이미지를 사용하도록 하세요.

Luna Lu
Luna Lu

이미지는 상당한 양의 시각적 공간을 차지하고 웹사이트에서 다운로드되는 바이트의 대부분을 차지합니다. 이미지를 최적화하면 로드 성능이 개선되고 네트워크 트래픽이 줄어듭니다.

놀랍게도 웹상의 사이트 중 절반 이상이 압축이 잘 안 되거나 불필요하게 큰 이미지를 게재하고 있습니다. 따라서 이미지를 최적화하기만 해도 성능을 개선할 여지가 많이 남습니다.

이미지가 최적화되었는지는 어떻게 알 수 있으며 최적화는 어떻게 해야 하는지 궁금하실 것입니다. 이미지 최적화를 위한 새로운 기능 정책(oversized-images, unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict)을 실험하고 있습니다. 이제 모두 출처 무료 체험판으로 제공됩니다.

권한 정책에서는 개발 시간 시행으로 적용할 수 있는 이미지에 관한 새로운 제한사항을 도입합니다. 제한사항을 위반하는 이미지는 쉽게 식별하고 수정할 수 있는 자리표시자 이미지로 렌더링됩니다. 이러한 정책은 보고서 전용 모드에서 지정할 수 있습니다. 이 모드에서는 이미지가 시정 조치 없이 정상적으로 렌더링되는 반면 위반사항은 보고서를 통해 관찰됩니다. 자세한 내용은 아래의 실제 환경에서의 보고 전용 모드를 참고하세요.

oversized-images

oversized-images 권한 정책은 컨테이너 크기와 관련하여 이미지의 고유한 크기를 제한합니다.

문서에서 oversized-images 정책을 사용하는 경우 기본 해상도가 어느 한 쪽에서 컨테이너 크기보다 X배 이상 큰 <img> 요소는 자리표시자 이미지로 대체됩니다.

왜냐하면

보기 기기에서 렌더링할 수 있는 것보다 큰 이미지를 제공하면(예: 데스크톱 이미지를 모바일 컨텍스트에 제공하거나 픽셀 밀도가 낮은 기기에 픽셀 밀도가 높은 이미지를 제공) 네트워크 트래픽과 기기 메모리가 낭비됩니다. 이미지 최적화에 관한 자세한 내용은 올바른 크기의 이미지 게재반응형 이미지 게재를 참고하세요.

다음은 몇 가지 예입니다. 다음은 이미지의 디스플레이 크기를 절반으로 자르는 경우의 기본 동작을 보여줍니다.

기본 크기 조절 동작입니다.
기본 크기 조절 동작

다음 권한 정책을 적용하면 자리표시자 이미지가 표시됩니다.

Permissions-Policy: oversized-images *(2);

이미지가 컨테이너에 비해 너무 큰 경우
이미지가 컨테이너에 비해 너무 큰 경우.

너비나 높이만 낮추어도 유사한 결과를 얻게 됩니다.

크기가 조정된 너비 높이 조정됨
너비 및 높이의 크기를 조절합니다.

사용 방법

요약하면 oversized-images 정책은 다음 중 하나를 통해 지정할 수 있습니다.

  • Permissions-Policy HTTP 헤더
  • <iframe> allow 속성

oversized-images 정책을 선언하려면 다음을 제공해야 합니다.

  • 기능 이름, oversized-images (필수)
  • 출처 목록 (선택사항)
  • 소스의 기준점 값 (즉, 축소 비율 X)으로, 괄호 안에 지정됩니다 (선택사항).

2.0 이하의 축소 비율을 권장합니다. 다양한 화면 크기, 해상도 등에 최상의 이미지를 제공하려면 다양한 해상도의 반응형 이미지를 사용하는 것이 좋습니다.

예시 더보기

Permissions-Policy: oversized-images *(2.0)

이 정책은 임곗값이 2.0인 모든 출처에 적용됩니다. 축소 비율이 2.0보다 큰 이미지가 포함된 모든 <img> 요소는 허용되지 않으며 자리표시자 이미지로 대체됩니다.

Permissions-Policy: oversized-images *(inf) 'self'(1.5)

이 정책은 사이트 출처에서 임곗값 1.5로 시행됩니다. 최상위 탐색 컨텍스트 및 동일한 출처 중첩 탐색 컨텍스트의 <img> 요소는 축소 비율이 1.5 이하인 경우에만 정상적으로 렌더링됩니다. 다른 모든 위치의 <img> 요소는 정상적으로 렌더링됩니다.

unoptimized-{lossy,lossless}-images

unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict 기능 정책은 이미지의 기본 해상도와 관련하여 이미지의 파일 크기를 제한합니다.

unoptimized-lossy-images
손실 형식은 고정된 1KB 오버헤드 허용량으로 픽셀당 바이트 비율 X를 초과해서는 안 됩니다. WxH 이미지의 경우 파일 크기 기준점은 WxHxX + 1024로 계산됩니다.
unoptimized-lossless-images
무손실 형식은 고정된 10KB 오버헤드 허용으로 픽셀당 바이트 비율 X를 초과해서는 안 됩니다. 너비 x 높이 이미지의 경우 파일 크기 기준은 너비 x 높이 x X + 10240으로 계산됩니다.
unoptimized-lossless-images-strict
무손실 형식은 고정된 1KB 오버헤드 허용량으로 픽셀당 바이트 비율 X를 초과해서는 안 됩니다. WxH 이미지의 경우 파일 크기 기준점은 WxHxX + 1024로 계산됩니다.

문서에서 이러한 정책을 사용하는 경우 제약조건을 위반하는 모든 <img> 요소는 자리표시자 이미지로 대체됩니다.

왜냐하면

다운로드 크기가 클수록 이미지가 로드되는 데 시간이 더 오래 걸립니다. 이미지를 최적화할 때는 메타데이터를 제거하고, 적절한 이미지 형식을 선택하고, 이미지 압축을 사용하는 등 파일 크기를 최대한 작게 유지해야 합니다. 이미지 최적화에 관한 자세한 내용은 Imagemin을 사용하여 이미지 압축하기WebP 이미지 사용하기를 참고하세요.

다음은 기본 브라우저 동작을 보여줍니다. 권한 정책이 없으면 최적화되지 않은 손실 이미지가 최적화된 이미지와 동일하게 표시될 수 있습니다.

최적화된 이미지와 최적화되지 않은 이미지를 비교합니다.
최적화된 이미지를 최적화되지 않은 이미지와 비교합니다.

다음 권한 정책을 적용하면 자리표시자 이미지가 표시됩니다.

Permissions-Policy: unoptimized-lossy-images *(0.5);

이미지가 최적화되지 않은 경우
이미지가 최적화되지 않은 경우.

사용 방법

권한 정책을 처음 접하는 경우 권한 정책 소개에서 자세한 내용을 확인하세요.

요약하면 unoptimized-{lossy,lossless}-images 정책은 다음을 통해 지정할 수 있습니다.

  • Permissions-Policy HTTP 헤더
  • <iframe> allow 속성

unoptimized-{lossy,lossless}-images 정책을 선언하려면 다음을 제공해야 합니다.

  • 특성 이름(예: unoptimized-lossy-images(필수))
  • 출처 목록 (선택사항)
  • 소스의 기준점 값 (즉, 픽셀당 바이트 비율 X)으로, 괄호 안에 지정됩니다 (선택사항).

unoptimized-lossy-images의 경우 픽셀당 바이트 비율이 0.5 이하이고 unoptimized-lossless-imagesunoptimized-lossless-images-strict의 경우 픽셀당 바이트 비율이 1 이하인 것이 좋습니다.

WebP 형식은 다른 형식보다 압축률이 우수합니다. 가능하면 모든 이미지를 WebP 손실 형식으로 게재하세요. 그래도 충분하지 않다면 WebP 무손실 형식을 사용해 보세요. WebP 형식을 지원하지 않는 브라우저에서는 JPEG를 사용하세요. 이러한 형식 중 어느 것도 작동하지 않으면 PNG를 사용하세요.

WebP 형식을 사용하는 경우 더 엄격한 기준을 사용해 보세요.

  • WEBPV8의 경우 0.2
  • WEBPL의 경우 0.5

예시 더보기

Feature-Policy:  unoptimized-lossy-images *(0.5);
                 unoptimized-lossless-images *(1.0);
                 unoptimized-lossless-images-strict *(1.0);

이 정책은 기준 값이 0.5 (손실 형식의 경우) 및 1 (무손실 형식의 경우)인 모든 출처에 적용됩니다. 이미지의 비트당 픽셀 비율이 제약 조건을 초과하는 <img> 요소는 허용되지 않으며 자리표시자 이미지로 대체됩니다.

Feature-Policy: unoptimized-lossy-images *(inf) 'self'(0.3);
                unoptimized-lossless-images *(inf) 'self'(0.8);
                unoptimized-lossless-images-strict *(inf) 'self'(0.8);

이 정책은 사이트의 출처에 적용되며 기준점 값은 0.3 (손실이 있는 형식의 경우) 및 0.8 (무손실 형식의 경우)입니다. 최상위 브라우징 컨텍스트 및 동일한 출처 중첩 브라우징 컨텍스트의 <img> 요소는 픽셀당 바이트 비율이 이러한 제약 조건을 충족하는 경우에만 정상적으로 렌더링됩니다. 다른 모든 위치의 <img> 요소는 정상적으로 렌더링됩니다.

실제 환경에서의 보고 전용 모드

자리표시자 이미지가 포함된 사이트를 게시하는 것은 바람직하지 않습니다. 개발 및 스테이징 중에는 시행 모드 (최적화되지 않은 이미지가 자리표시자 이미지로 렌더링됨)에서 정책을 사용하고 프로덕션에서는 보고서 전용 모드를 사용할 수 있습니다. 자세한 내용은 권한 정책 신고를 참고하세요. Permissions-Policy HTTP 헤더와 마찬가지로 Permissions-Policy-Report-Only 헤더를 사용하면 시정 조치 없이 실제 위반 신고를 관찰할 수 있습니다.

제한사항

이미지 정책은 HTML 이미지 요소(<img>, <source> 등)에서만 작동하며 아직 배경 이미지나 생성된 콘텐츠에서는 지원되지 않습니다. 더 광범위한 콘텐츠에 정책이 적용되기를 원하는 경우 알려주세요.

이미지 최적화

이미지 최적화에 대해 많이 말씀드렸지만 방법은 말씀드리지 않았습니다. 이 주제는 이 도움말에서 다루지 않지만 아래 링크 및 이 도움말의 끝부분에 나열된 Codelab에서 자세히 알아볼 수 있습니다.

의견 보내기

이 자료가 이미지 정책을 이해하는 데 도움이 되고 유익한 시간이 되었기를 바랍니다. 정책을 사용해 보고 의견을 보내주시면 감사하겠습니다.

이 도움말에 언급된 각 기능에 관한 의견은 메일링 리스트(feature-control@chromium.org)로 보내주세요.

사용해 보고 유용하다고 생각한 임곗값을 알려주세요. unoptimized-lossless-imagesunoptimized-lossless-images-strict 중 어느 것이 더 직관적이고 사용하기 쉬운지 또는 대신 차액 오버헤드 허용액을 사용해야 하는지 알려주시기 바랍니다. 체험판 기간이 끝날 무렵에 설문조사를 전송할 예정입니다. 계속해서 많은 관심 부탁드립니다.