사용자에게 애셋을 빠르고 효율적으로 전송하는 분산되지만 상호 연결된 서버의 네트워크인 콘텐츠 전송 네트워크 (CDN)의 핵심 개념은 이미 잘 알고 계실 것입니다. CDN 제공업체에 파일이 업로드되면 전 세계 CDN 네트워크의 다른 노드에 중복이 생성됩니다. 사용자가 파일을 요청하면 해당 사용자와 지리적으로 가장 가까운 노드에서 데이터를 전송하므로 지연 시간이 줄어듭니다. CDN의 분산 특성은 네트워크 중단 또는 하드웨어 장애가 발생할 경우 대비한 중복성을 제공하고 트래픽 급증을 완화하는 부하 분산을 제공합니다.
이미지 CDN은 이러한 모든 이점을 제공할 수 있지만 한 가지 중요한 차이점이 있습니다. 바로 URL이 액세스하는 데 사용하는 문자열을 기반으로 이미지 콘텐츠를 변환하고 최적화할 수 있다는 것입니다.
사용자가 제공업체에 표준 고해상도 이미지를 업로드하면 제공업체에 액세스하는 데 사용되는 URL이 생성됩니다.
https://res.cloudinary.com/demo/image/upload/sample.jpg
사용되는 정확한 구문은 제공업체마다 다르지만, 최소한 모든 이미지 CDN을 사용하면 소스 이미지의 크기, 인코딩, 압축 설정을 변경할 수 있습니다. 예를 들어 Cloudinary는 다음 구문을 통해 업로드된 이미지의 동적 크기 조절을 실행합니다. h_ 뒤에 픽셀 단위의 숫자 높이, w_, 너비, c_ 값(이미지 크기 조정 또는 자르기 방법에 관한 자세한 정보를 지정할 수 있음)을 사용합니다.
파일 이름과 확장자 앞에 쉼표로 구분된 값을 URL에 추가하여 여러 개의 변환을 적용할 수 있습니다. 즉, 업로드된 이미지를 요청하는 img 요소의 src를 통해 필요에 따라 이미지를 조작할 수 있습니다.
<img src="https://res.cloudinary.com/demo/image/upload/w_400/sample.jpg" alt="…">
사용자가 이러한 변환이 포함된 URL을 처음 방문하면 너비가 400픽셀 (w_400)에 비례하여 크기가 조정된 새 버전의 이미지가 생성되어 전송됩니다. 새로 생성된 파일은 CDN을 통해 캐시되므로 주문형으로 다시 만드는 대신 동일한 URL을 요청하는 모든 사용자에게 파일을 전송할 수 있습니다.
이미지 CDN 제공업체가 고급 사용 및 다양한 기술 스택과의 통합을 용이하게 하기 위해 소프트웨어 개발 키트를 제공하는 것은 드문 일이 아니지만 이 예측 가능한 URL 패턴만으로도 업로드된 단일 파일을 실행 가능한 srcset 속성으로 쉽게 변환할 수 있으므로 다른 개발 도구 없이 다음과 같은 작업이 가능합니다.
<img
src="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w"
srcset="https://res.cloudinary.com/demo/image/upload/w_1000/sample.jpg 1000w,
https://res.cloudinary.com/demo/image/upload/w_800/sample.jpg 800w,
https://res.cloudinary.com/demo/image/upload/w_600/sample.jpg 600w"
alt="…">
이제 익숙한 문법인 q_를 사용하여 원하는 압축 수준을 수동으로 지정할 수 있습니다. 'quality'의 줄임말, 압축 수준을 나타내는 숫자 약칭입니다.
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
이 정보를 수동으로 포함해야 하는 경우는 드뭅니다. 하지만 대부분의 이미지 CDN에서 제공하는 강력한 기능인 완전 자동 압축, 인코딩, 콘텐츠 협상 덕분입니다.
자동 압축
CDN은 컴퓨팅 성능 덕분에 놀라울 정도로 강력한 기능을 제공할 수 있습니다. 이미지 콘텐츠 분석을 통해 최적의 압축 수준과 인코딩 설정을 알고리즘 방식으로 결정할 수 있습니다. 이는 사용자가 각 이미지의 압축을 수동으로 미세 조정하는 것과 같습니다.
이러한 알고리즘은 파일 크기와 인지 품질의 균형을 맞추는 결정을 자동화하고, 이미지 콘텐츠에서 측정 가능한 성능 저하 징후가 있는지 분석하고, 그에 따라 압축 설정을 미세 조정합니다. 이는 압축 설정에 대한 일률적인 수동 접근 방식에 비해 파일 크기가 크게 감소됨을 의미합니다.
이 프로세스가 복잡하게 들릴 수도 있겠지만, 구현은 그다지 간단하지 않습니다. Cloudinary의 경우 이미지 URL에 q_auto를 추가하면 이 기능을 사용할 수 있습니다.
<img src="https://res.cloudinary.com/demo/image/upload/w_1400/sample.jpg" alt="…">
<!-- 250 KB-->
<img src="https://res.cloudinary.com/demo/image/upload/w_1400,q_auto/sample.jpg" alt="…">
<!-- 134 KB-->
자동 인코딩 및 콘텐츠 협상
이미지 요청을 수신하면 이미지 CDN은 애셋 요청(특히 Accept 헤더)과 함께 브라우저에서 전송한 HTTP 헤더를 통해 브라우저에서 지원하는 최신 인코딩을 결정합니다. 이 헤더는 <picture> 요소의 <source>의 type 속성을 채우는 데 사용하는 것과 동일한 미디어 유형을 사용하여 브라우저가 이해할 수 있는 인코딩을 나타냅니다.
예를 들어 애셋 URL의 이미지 변환 목록에 f_auto 매개변수를 추가하면 Cloudinary는 다음과 같이 브라우저에서 인식할 수 있는 가장 효율적인 인코딩을 제공하도록 명시적으로 지시할 수 있습니다.
<img src="https://res.cloudinary.com/demo/image/upload/w_1200,q_auto,f_auto/sample.jpg" alt="…">
그러면 서버는 이 인코딩을 사용하여 이미지 버전을 생성하고 동일한 수준의 브라우저 지원을 가진 모든 후속 사용자의 결과를 캐시합니다. 이 응답에는 파일 확장자에 관계없이 파일의 인코딩을 브라우저에 명시적으로 알리는 Content-Type 헤더가 포함됩니다. 최신 브라우저를 사용하는 사용자가 .jpg로 끝나는 파일을 요청하더라도 이 요청에는 서버에 AVIF가 지원된다는 것을 알리는 헤더가 함께 제공되며, 서버는 AVIF로 인코딩된 파일과 함께 이를 AVIF로 취급하라는 명시적 명령과 함께 전송합니다.
결과적으로 교대로 인코딩된 파일을 만들고 압축 설정을 수동으로 미세 조정하는 과정(또는 이러한 작업을 자동으로 실행하는 시스템을 유지)할 수 있을 뿐만 아니라 이러한 파일을 사용자에게 효과적으로 전송하기 위해 <picture> 및 type 속성을 사용할 필요가 없어집니다. 따라서 srcset 및 sizes 구문만 사용해도 AVIF로 인코딩된 이미지를 사용자에게 제공하고 WebP (Safari만의 경우 JPEG-2000)로 대체하고 가장 적절한 레거시 인코딩으로 다시 대체할 수 있습니다.
이미지 CDN을 사용할 경우의 단점은 기술적 측면보다 물류적인 측면이 있고 가장 큰 비용입니다. 이미지 CDN은 기능이 강력한 개인용 무료 요금제를 제공하는 것이 일반적이지만, 이미지 애셋을 생성하려면 업로드를 위한 대역폭 및 저장공간, 이미지를 변환하기 위한 서버에서의 처리, 캐시된 변환 결과를 위한 추가 공간이 필요합니다. 따라서 사용량이 많고 트래픽이 많은 애플리케이션에는 유료 요금제가 필요할 수 있습니다.