최적화된 이미지 정책을 사용하여 사이트에서 실적이 가장 우수한 이미지를 사용하도록 하세요.
이미지는 시각적 공간을 크게 차지하며 웹사이트에서 다운로드된 바이트의 대부분을 차지하는 경우가 많습니다. 이미지를 최적화하면 로드 성능을 개선하고 네트워크 트래픽을 줄일 수 있습니다.
놀랍게도 웹 사이트의 절반 이상이 제대로 압축되지 않거나 불필요하게 큰 이미지를 제공하고 있습니다. 따라서 이미지를 최적화하는 것만으로도 성능을 개선할 여지가 많습니다.
이미지가 최적화되었는지 어떻게 알 수 있고 어떻게 최적화해야 하는지 궁금하실 것입니다. 이미지 최적화를 위한 새로운 기능 정책(oversized-images, unoptimized-lossy-images, unoptimized-lossless-images, unoptimized-lossless-images-strict)을 실험하고 있습니다.
이제 출처 체험판을 모두 사용할 수 있습니다.
최적화된 이미지 정책
권한 정책에는 개발 시 시행과 함께 적용할 수 있는 이미지에 관한 새로운 제한사항이 도입됩니다. 제한사항을 위반하는 이미지는 식별 및 수정이 쉬운 자리표시자 이미지로 렌더링됩니다. 이러한 정책은 보고서를 통해 위반이 관찰되는 동안 이미지가 시정 조치 없이 정상적으로 렌더링되는 보고서 전용 모드에서 지정할 수 있습니다. 자세한 내용은 아래의 실제 보고서 전용 모드를 참조하세요.
대형 이미지
oversized-images 권한 정책은 컨테이너 크기와 관련하여 이미지의 고유 크기를 제한합니다.
문서에서 oversized-images 정책을 사용하면 고유 해상도가 각 크기의 컨테이너 크기보다 X배 이상 큰 <img> 요소는 자리표시자 이미지로 대체됩니다.
왜냐하면
보기 기기에서 렌더링할 수 있는 것보다 큰 이미지를 제공하면(예: 데스크톱 이미지를 모바일 컨텍스트에 제공하거나 고픽셀 밀도의 이미지를 저픽셀 밀도 기기에 제공) 네트워크 트래픽과 기기 메모리를 낭비하게 됩니다. 이미지 최적화에 대한 자세한 내용은 올바른 크기로 이미지 제공 및 반응형 이미지 제공을 참조하세요.
예
몇 가지 예를 들어보겠습니다. 다음은 이미지의 디스플레이 크기를 절반으로 자를 때의 기본 동작을 보여줍니다.
다음 권한 정책을 적용하면 자리표시자 이미지가 대신 표시됩니다.
Permissions-Policy: oversized-images *(2);
너비나 높이만 줄이면 비슷한 결과가 나옵니다.
How to use
요약하면 oversized-images 정책은 다음 중 하나를 통해 지정할 수 있습니다.
Permissions-PolicyHTTP 헤더allow속성<iframe>개
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-images, unoptimized-lossless-images, unoptimized-lossless-images-strict 기능 정책은 고유 해상도와 관련하여 이미지의 파일 크기를 제한합니다.
unoptimized-lossy-images- 손실형 형식은 고정된 1KB의 오버헤드 허용과 함께 X의 픽셀당 바이트 비율을 초과해서는 안 됩니다. 너비x높이 이미지의 경우 파일 크기 기준점은 WxHxX+1024로 계산됩니다.
unoptimized-lossless-images- 무손실 형식은 고정된 10KB의 오버헤드 허용과 함께 X의 픽셀당 바이트 비율을 초과해서는 안 됩니다. 너비x높이 이미지의 경우 파일 크기 기준점은 WxHxX+10240으로 계산됩니다.
unoptimized-lossless-images-strict- 무손실 형식은 고정된 1KB의 오버헤드 허용과 함께 X의 픽셀당 바이트 비율을 초과해서는 안 됩니다. 너비x높이 이미지의 경우 파일 크기 기준점은 WxHxX+1024로 계산됩니다.
문서에서 이러한 정책을 사용하면 제약조건을 위반하는 모든 <img> 요소가 자리표시자 이미지로 대체됩니다.
왜냐하면
다운로드 크기가 클수록 이미지를 로드하는 데 시간이 오래 걸립니다. 파일 크기는 이미지를 최적화할 때 메타데이터 제거, 적절한 이미지 형식 선택, 이미지 압축 사용 등 이미지를 최적화할 때 가능한 한 작게 유지해야 합니다. 이미지 최적화에 관한 자세한 내용은 Imagemin을 사용하여 이미지 압축 및 WebP 이미지 사용을 참고하세요.
예
다음은 기본 브라우저 동작을 보여줍니다. 권한 정책이 없으면 최적화되지 않은 손실 이미지가 최적화된 이미지와 동일하게 표시될 수 있습니다.
다음 권한 정책을 적용하면 자리표시자 이미지가 대신 표시됩니다.
Permissions-Policy: unoptimized-lossy-images *(0.5);
How to use
권한 정책을 처음 사용한다면 권한 정책 소개에서 자세한 내용을 확인하세요.
요약하면 unoptimized-{lossy,lossless}-images 정책은 다음을 통해 지정할 수 있습니다.
Permissions-PolicyHTTP 헤더allow속성<iframe>개
unoptimized-{lossy,lossless}-images 정책을 선언하려면 다음을 제공해야 합니다.
- 기능 이름(예:
unoptimized-lossy-images)(필수) - 출처 목록 (선택사항)
- 괄호 안에 지정된 출처의 임계값 (즉, 픽셀당 바이트 비율 X)(선택사항)
unoptimized-lossy-images의 경우 픽셀당 바이트 비율이 0.5 이하이고 unoptimized-lossless-images 및 unoptimized-lossless-images-strict의 경우 픽셀당 바이트 비율이 1 이하인 것이 좋습니다.
WebP 형식은 다른 형식보다 압축률이 높습니다. 가능하면 모든 이미지를 WebP 손실(lossy) 형식으로 제공하세요. 이것으로 충분하지 않으면 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> 등)에서만 작동하며 배경 이미지나 생성된 콘텐츠에서는 아직 지원되지 않습니다. 더 광범위한 콘텐츠에 대한 정책이 지원되도록 하려면 Google에 알려 주세요.
이미지 최적화
이미지 최적화에 관해서는 충분히 설명했지만 최적화 방법에 대해서는 아직 언급하지 않았습니다. 이 주제는 이 문서에서 다루지 않지만 아래 링크 및 도움말 끝에 나열된 Codelab에서 자세히 알아볼 수 있습니다.
의견을 보내주세요.
이 문서를 통해 이미지 정책을 잘 이해하고 도움이 되셨기를 바랍니다. 정책을 사용해 보시고 의견을 보내주세요.
이 도움말(feature-control@chromium.org)에 언급된 각 기능에 관한 의견을 메일링 리스트에 보낼 수 있습니다.
어떤 임곗값을 사용하셨고 유용했는지 알려주세요. unoptimized-lossless-images와 unoptimized-lossless-images-strict 중 어느 것이 더 직관적이고 사용하기 쉬운지, 아니면 차등 오버헤드 허용을 사용해야 하는지 알려주세요. 시험 운영이 끝날 무렵에 설문조사를 발송할 예정입니다. 계속해서 지켜봐 주세요.