이미지 최적화 사용 사례

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

변환 순서

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

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

예: Resize 다음에 Crop

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

  1. 크기 조정: 이미지가 먼저 1,000 × 1,000px 에서 height=200 매개변수를 충족하도록 200 × 200px로 축소됩니다.

  2. 자르기: left=0.5 작업은 이미 축소된 이미지의 왼쪽 절반을 삭제합니다.

결과: 콘텐츠의 오른쪽 50% 를 나타내는 100 x 200px 최종 이미지입니다. 자르기 전에 전체 이미지가 축소되었으므로 최종 영역은 세부정보가 훨씬 적게 유지됩니다.

예 : Crop 다음에 Resize

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

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

  2. 크기 조정: height=200 작업은 잘린 섹션의 크기를 최종 높이로 조정합니다.

결과: 100 * 200px 최종 이미지입니다. 원본 이미지가 먼저 잘리고 나중에 크기가 조정되었으므로 최종 출력은 훨씬 더 많은 세부정보와 선명도를 유지합니다.

늘리기 및 업스케일링 동작

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

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

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

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

  • 단일 크기 제약조건: 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 Cloud 콘솔: 네트워크 서비스 > Cloud CDN으로 이동하고 원본을 선택한 후 캐시 무효화 탭으로 이동합니다. Google Cloud 또는 네트워크 서비스 > 부하 분산으로 이동하고 부하 분산기를 선택한 후 캐시 무효화 탭을 사용합니다.

  • 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 색상 프로필 메타데이터를 읽고 픽셀 그리드에 물리적으로 적용합니다. 이렇게 하면 후속 cropresize 매개변수의 좌표 예측 가능성을 보장할 수 있습니다.

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

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

다음 단계