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

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

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 중 어느 것이 더 직관적이고 사용하기 쉬운지 또는 대신 차액 오버헤드 허용액을 사용해야 하는지 알려주시기 바랍니다. 무료 체험이 종료될 무렵 설문조사를 보내드릴 예정입니다. 계속해서 많은 관심 부탁드립니다.