이미지 CDN을 사용하는 이유
이미지 콘텐츠 전송 네트워크 (CDN)는 이미지 최적화에 탁월합니다. 이미지 CDN으로 전환하면 이미지 파일 크기를 40~80% 절약할 수 있습니다. 이론적으로는 빌드 스크립트만 사용하여 동일한 결과를 얻을 수 있지만 실제로는 드뭅니다.
이미지 CDN이란 무엇인가요?
Image CDN은 이미지의 변환, 최적화, 전송을 전문으로 합니다. 사이트에서 사용되는 이미지에 액세스하고 이를 조작하기 위한 API로 생각할 수도 있습니다. 이미지 CDN에서 로드된 이미지의 경우 이미지 URL은 로드할 이미지뿐만 아니라 크기, 형식, 품질과 같은 매개변수도 나타냅니다. 이렇게 하면 다양한 사용 사례에 맞는 이미지 변형을 쉽게 만들 수 있습니다.
Image CDN은 필요에 따라 새 버전의 이미지를 생성한다는 점에서 빌드 시간 이미지 최적화 스크립트와 다릅니다. 따라서 일반적으로 CDN은 빌드 스크립트보다 각 클라이언트에 맞게 고도로 맞춤설정되는 이미지를 만드는 데 더 적합합니다.
이미지 CDN이 URL을 사용하여 최적화 옵션을 나타내는 방법
이미지 CDN에서 사용되는 이미지 URL은 이미지에 대한 중요한 정보와 변환 및 이미지에 적용해야 하는 최적화를 전달합니다. URL 형식은 이미지 CDN에 따라 다르지만 개략적으로 보면 모두 비슷한 기능을 가지고 있습니다. 가장 일반적인 몇 가지 기능을 살펴보겠습니다.
출발지
이미지 CDN은 자체 도메인 또는 이미지 CDN의 도메인에 있을 수 있습니다. 서드 파티 이미지 CDN은 일반적으로 커스텀 도메인을 유료로 사용할 수 있는 옵션을 제공합니다. 자체 도메인을 사용하면 URL을 변경할 필요가 없으므로 나중에 이미지 CDN을 쉽게 전환할 수 있습니다.
위의 예에서는 커스텀 도메인이 아닌 맞춤설정된 하위 도메인이 있는 이미지 CDN 도메인 ('example-cdn.com')을 사용합니다.
이미지
일반적으로 이미지 CDN은 필요할 때 기존 위치에서 이미지를 자동으로 가져오도록 구성할 수 있습니다. 이 기능은 보통 기존 이미지의 전체 URL을 이미지 CDN에서 생성된 이미지의 URL에 포함하는 방식으로 얻을 수 있습니다. 예를 들어 https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto과 같은 URL이 표시될 수 있습니다. 이 URL은 https://flowers.com/daisy.jpg에 있는 이미지를 검색하고 최적화합니다.
이미지 CDN에 이미지를 업로드할 때 널리 지원되는 또 다른 방법은 HTTP POST 요청을 통해 이미지 CDN의 API에 이미지를 전송하는 것입니다.
보안 키
보안 키를 사용하면 다른 사용자가 이미지의 새 버전을 만들 수 없습니다. 이 기능을 사용 설정하면 이미지의 새 버전마다 고유한 보안 키가 필요합니다. 이미지 URL의 매개변수를 변경하려고 하지만 유효한 보안 키를 제공하지 않은 사용자는 새 버전을 만들 수 없습니다. 이미지 CDN이 보안 키 생성 및 추적의 세부정보를 자동으로 처리합니다.
변환
이미지 CDN은 수십, 경우에 따라 수백 가지의 서로 다른 이미지 변환을 제공합니다. 이러한 변환은 URL 문자열을 통해 지정되며 여러 변환을 동시에 사용하는 데에는 제한이 없습니다. 웹 성능 측면에서 이미지 변환에서 가장 중요한 것은 크기, 픽셀 밀도, 형식, 압축입니다. 이러한 변환 때문에 이미지 CDN으로 전환하면 이미지 크기가 크게 줄어듭니다.
성능 변환에 객관적으로 가장 적합한 설정이 있는 경향이 있으므로 일부 이미지 CDN은 이러한 변환에 '자동' 모드를 지원합니다. 예를 들어 이미지가 WebP 형식으로 변환되도록 지정하는 대신 CDN이 자동으로 최적의 형식을 선택하고 제공하도록 할 수 있습니다. 이미지 CDN이 이미지를 변환하는 가장 좋은 방법을 결정하는 데 사용할 수 있는 신호는 다음과 같습니다.
- 클라이언트 힌트 (예: 표시 영역 너비, DPR, 이미지 너비)
Save-Data헤더- User-Agent 요청 헤더
- Network Information API
예를 들어 이미지 CDN은 Chrome 브라우저에 AVIF를, Edge 브라우저에는 WebP를, 매우 오래된 브라우저에 JPEG를 제공할 수 있습니다. 자동 설정을 사용하면 이미지 CDN에서 지원되면 코드 변경 없이 이미지 CDN의 상당한 전문 지식을 활용하여 이미지 CDN을 지원한 후 새로운 기술을 채택할 수 있으므로 널리 사용됩니다.
이미지 CDN 유형
이미지 CDN은 자체 관리형과 서드 파티 관리형이라는 두 가지 카테고리로 나눌 수 있습니다.
자체 관리형 이미지 CDN
자체 관리형 CDN은 자체 인프라를 유지관리하는 데 익숙한 엔지니어링 직원이 있는 사이트에 적합합니다.
- Thumbor는 가장 널리 사용되는 자체 관리형 이미지 CDN입니다. 오픈소스이며 무료로 사용할 수 있지만 일반적으로 대부분의 상용 CDN보다 기능이 적고 문서화가 다소 제한적입니다. Wikipedia, Square, 99designs는 Thumbor를 사용하는 3가지 사이트입니다. 설정 안내는 Thumbor 이미지 CDN 설치 방법 게시물을 참조하세요.
- 가상
- Imagor
서드 파티 이미지 CDN
서드 파티 이미지 CDN은 이미지 CDN을 서비스로 제공합니다. 클라우드 제공업체가 서버와 기타 인프라를 유료로 제공하는 것처럼 이미지 CDN은 이미지 최적화와 전송을 유료로 제공합니다. 서드 파티 이미지 CDN은 기본 기술을 유지하므로 시작하기가 상당히 간단하며 일반적으로 10~15분 내에 완료할 수 있지만 대규모 사이트의 경우 완전히 마이그레이션하는 경우에는 훨씬 더 오래 걸릴 수도 있습니다. 서드 파티 이미지 CDN은 일반적으로 사용 등급을 기준으로 가격이 책정되며, 대부분의 이미지 CDN은 제품을 사용해 볼 기회를 제공하기 위해 무료 등급 또는 무료 체험판을 제공합니다.
이미지 CDN 선택
이미지 CDN에 적합한 여러 옵션이 있습니다. 일부 기능은 다른 기능보다 더 많을 수 있지만 모든 기능을 사용하면 이미지의 바이트를 줄여 페이지를 더 빠르게 로드할 수 있습니다. 기능 세트 외에도 이미지 CDN을 선택할 때 고려해야 할 다른 요소는 비용, 지원, 문서, 설정 또는 마이그레이션의 용이성입니다.
결정을 내리기 전에 직접 사용해 보는 것도 도움이 될 수 있습니다. 아래에서 여러 이미지 CDN을 빠르게 시작하는 방법에 관한 안내가 포함된 Codelab을 확인할 수 있습니다.
최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향
이미지는 많은 웹사이트에서 사용자 경험의 중요한 부분이므로 최대 콘텐츠 렌더링 시간에서 사이트의 성능을 결정하는 데 영향을 미칩니다. 다음은 이미지 CDN을 사용하기로 결정한 경우 유의해야 할 몇 가지 사항입니다.
- CDN에서 게재되는 이미지는 교차 출처 서버에서 제공될 수 있으며 이 경우 추가 연결 설정 시간이 필요합니다. 가능하면 기본 출처를 통해 프록시하는 이미지 CDN을 사용하여 브라우저가 연결할 원본을 추가하지 않도록 하세요. 이는 기본 출처의 자체 호스팅 이미지와 동일한 효과가 있습니다.
- 브라우저에서 최대한 빨리 이미지를 로드할 수 있도록 LCP 이미지 요소에
fetchpriority속성 값"high"을 사용하는 것이 좋습니다. - 이미지가 초기 HTML에서 즉시 검색되지 않는 경우 LCP 후보 이미지에
rel=preload힌트를 사용하여 브라우저에서 해당 이미지를 미리 로드할 수 있도록 하세요. - 원본을 프록시할 수 없고 로드할 정확한 이미지가 나중에 페이지 로드 중에 알 수 없는 경우 최대한 빨리 교차 출처 이미지 CDN에 대한 연결을 설정하여 페이지의 LCP 후보 이미지가 될 수 있는 리소스 로드 단계를 단축해야 합니다.
Image CDN은 이미지를 수동으로 최적화하는 수고를 덜어주는 필수적인 도구이므로 이를 고려해야 합니다. 그러나 항상 그렇듯이 고려해야 할 장단점이 있습니다. 웹사이트의 LCP 후보 이미지를 주시하고 적절히 힌트를 추가하면 주요 요청에 지연 시간이 추가되는 것을 완화할 수 있습니다.