이미지 최적화 사용 사례

이 페이지에서는 고급 이미지 처리 동작, 파이프라인 순서 지정 효과, 자동 이미지 정규화 규칙의 예를 제공합니다.

변환 순서

imop 쿼리 매개변수 문자열의 작업은 metadata 또는 scale이 먼저 실행되고 canvas가 마지막으로 실행되는 경우를 제외하고 왼쪽에서 오른쪽으로 순차적으로 실행됩니다. 모든 작업은 이전 작업의 시각적 출력에 직접 작용하므로 매개변수의 순서는 파생 이미지의 최종 시각적 품질과 세부정보 보존에 영향을 미칩니다.

너비가 1,000 픽셀이고 높이가 1,000 픽셀인 소스 이미지를 고려해 보세요.

예: Resize 후 Crop

https://www.example.com/image.jpg?imop=Resize,width=200;Crop,left=0.5

  1. 크기 조정: 원래 1000×1000px 이미지가 200×200px로 크기가 조정됩니다 (가로세로 비율 1:1 유지).

  2. 자르기: left=0.5 작업은 이미 크기가 조정된 이미지의 왼쪽 절반을 자릅니다.

결과: 콘텐츠의 오른쪽 50% 를 나타내는 100x200px 이미지입니다.

예 : Crop 후 Resize

https://www.example.com/image.jpg?imop=Crop,left=0.5;Resize,width=200

  1. 자르기: left=0.5 작업은 먼저 고해상도 소스 이미지의 오른쪽 50% 를 추출하여 500 x 1000 px 중간 이미지를 만듭니다 (가로세로 비율을 1:2로 변경).

  2. 크기 조정: width=200 매개변수는 이 중간 이미지의 크기를 조정합니다. 새로운 1:2 가로세로 비율을 유지하기 위해 높이가 400px 로 조정됩니다.

결과: 200 * 400px 최종 이미지입니다.

늘이기 및 업스케일링 동작

기본적으로 이미지 최적화 서비스는 에지 전송 대역폭을 절약하고 시각적 품질을 보호하기 위해 엄격한 다운스케일링 전용 전략을 적용합니다. 원래 이미지보다 큰 크기를 요청하면 Cloud CDN은 확대를 무시하고 원래 크기로 이미지를 출력합니다.

이 동작을 재정의하고 애셋을 업스케일링하도록 강제하려면 stretch 값을 명시적으로 선언해야 합니다.

업스케일링의 유효성 검사 요구사항

  • 이중 크기 조정 규칙: stretch 값은 Resize 작업에서 width 및 height 매개변수를 모두 명시적으로 제공하는 경우에만 허용됩니다.

  • 단일 측정기준 제약조건: scaling=stretch를 정의하는 동안 width 또는 height와 같은 단일 측정기준만 정의하면 이미지 최적화 서비스에서 전체 요청을 거부합니다.

예를 들면 다음과 같습니다.

유효한 요청: ?imop=resize,width=500,height=500,scaling=stretch

잘못된 요청: ?imop=resize,width=500, scaling=stretch

캐싱 및 캐시 무효화

원본 서버에서 원본 이미지를 업데이트할 때는 Cloud CDN이 업데이트된 애셋을 가져와 제공하도록 캐시된 버전을 무효화해야 합니다.

캐싱 동작

이미지 URL에 추가된 변환 매개변수의 모든 고유한 조합은 에지에 별도의 고유한 캐시 항목을 만듭니다. 캐시 적중률을 최적화하려면 과도한 수의 고유한 매개변수 변형을 만들지 마세요. 예를 들어 단일 픽셀 변경사항이 있습니다.

Cloud CDN은 쿼리 문자열의 순서와 관계없이 동일한 변환 매개변수를 그룹화하도록 캐시 키를 정규화합니다.

무효화 동작

원본 서버에서 원본 이미지를 업데이트할 때는 기본 이미지 URL에 대해 단일 무효화 요청만 제출하면 됩니다. 향상된 Cloud CDN은 캐시된 원본 이미지와 자동으로 생성된 모든 변형(예: WebP 또는 최적화된 버전)을 전역적으로 자동으로 삭제합니다.

변형 무효화 작동 방식

기본 이미지 URL과 일치하는 경로 패턴(예: /images/my-picture.jpg)을 사용하여 캐시 무효화 요청을 실행하면 Cloud CDN은 다음을 자동으로 식별하고 삭제합니다.

  • 캐시된 원본 소스 이미지

  • 이전에 생성된 모든 변형

다음 방법을 사용하여 Cloud CDN 캐시 무효화를 적용할 수 있습니다.

  • Google Google Cloud Cloud 콘솔: 네트워크 서비스 > Cloud CDN으로 이동하고, 원본을 선택한 후 캐시 무효화 탭으로 이동합니다. 또는 네트워크 서비스 > 부하 분산으로 이동하고, 부하 분산기를 선택한 후 캐시 무효화 탭을 사용합니다.

  • Google Cloud CLI: Google Cloud CLI compute url-maps invalidate-cdn-cache 명령어를 사용합니다.

  • 캐시 태그 : 캐시 태그는 최적화된 이미지를 관리하는 데 권장되는 접근 방식입니다. 이를 통해 특정 태그를 타겟팅하는 무효화 요청을 실행하여 연결된 콘텐츠를 삭제하여 더 세밀하게 제어할 수 있습니다.

예를 들면 다음과 같습니다.

/images/my-picture.jpg 및 모든 최적화된 변형을 전역적으로 무효화하려면 다음 단계를 따르세요.

  • 경로: 정확한 경로 /images/my-picture.jpg를 지정합니다.

  • 호스트 (선택사항): 특정 도메인의 이미지만 지우려면 호스트를 지정합니다.

제출되면 이 단일 작업은 전역적으로 에지 캐시에서 이미지의 모든 최적화된 버전을 삭제하여 사용자가 다음 요청에서 업데이트된 버전을 즉시 수신하도록 합니다.

EXIF의 색상 프로필 및 이미지 방향 (정규화)

최신 스마트폰과 디지털 카메라는 회전되지 않은 원시 픽셀 그리드로 이미지를 저장하고 뷰어 기기에 이미지를 회전하도록 지시하는 내장된 EXIF 방향 태그를 사용하는 경우가 많습니다. 예를 들어 세로 방향의 경우 시계 방향으로 90도 회전합니다. 마찬가지로 내장된 ICC 색상 프로필은 여러 모니터에서 색상이 표시되는 방식을 정의합니다.

예측 가능한 작업을 보장하기 위해 이미지 최적화 에지 파이프라인은 변환을 실행하기 전에 이미지를 자동으로 정규화합니다.

정규화 프로세스

  • 변환을 실행하기 전에 에지 엔진은 EXIF 방향 태그와 ICC 색상 프로필 메타데이터를 읽고 픽셀 그리드에 물리적으로 적용합니다. 이렇게 하면 후속 crop 및 resize 매개변수의 좌표 예측 가능성을 보장할 수 있습니다.

  • crop, resize 또는 scale과 같은 작업은 시각적 오류를 방지하기 위해 실제 시각적 측정기준에 대해 올바르게 실행됩니다.

  • 핵심 픽셀에 조정을 적용한 후 에지 엔진은 크기 절약을 극대화하기 위해 파일에서 모든 필수적이지 않은 메타데이터를 삭제합니다. 기본적으로 메타데이터 작업에서 특정 값이 요청되지 않는 한 copyright가 유지됩니다.

다음 단계