이미 잘 알고 계시겠지만 콘텐츠 전송 네트워크 (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을 처음 방문할 때
너비 400px (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_, short)을 사용하여 원하는 압축 수준을 수동으로 지정할 수 있습니다.
'quality'로 그 뒤에 압축 수준을 나타내는 숫자가 표시됩니다.
<img src="https://res.cloudinary.com/demo/image/upload/w_400,q_60/sample.jpg" alt="…">
드물지만 매우 강력한 기능들이 제공되므로 이 정보를 수동으로 포함해야 합니다. 완전 자동 압축, 인코딩, 콘텐츠 협상 등 대부분의 이미지 CDN에서 제공합니다.
자동 압축
이미지 CDN은 컴퓨팅 파워를 마음대로 활용할 수 있으므로 놀라울 정도로 강력한 기능을 제공할 수 있습니다. 이미지의 콘텐츠를 사용하여 이상적인 압축 수준과 인코딩 설정을 알고리즘으로 결정합니다. 일일이 기억해야 합니다.
이러한 알고리즘은 파일 크기와 인지 품질의 균형을 맞출 수 있는 결정을 자동화하고, 이미지 콘텐츠를 분석하여 측정 가능한 저하 징후와 그에 따라 압축 설정을 미세 조정합니다. 이것은 종종 파일 및 시스템의 엄청난 감소를 압축 설정에 대한 일률적인 수동 접근 방식과 비교했을 때 더 큰 차이점이 있습니다.
이 프로세스가 복잡하게 들릴 수 있지만, 구현은 이보다 훨씬 간단했습니다. Cloudinary의 경우 q_auto을
이미지 URL을 사용하면 다음과 같은 기능을 사용할 수 있습니다.
<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은 브라우저가 지원하는 가장 최신 인코딩을
저작물 요청과 함께 브라우저에서 전송되는 HTTP 헤더, 특히
Accept 헤더 이 헤더는 동일한
type를 채우는 데 사용할 미디어 유형
<picture> 요소의 <source> 속성입니다.
예를 들어 애셋 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은 일반적으로 개인 용도로 사용할 수 있는 강력한 무료 요금제를 제공하는데, 이미지 애셋을 생성하고 업로드를 위한 대역폭과 저장공간이 이미지를 변환하기 위한 서버 및 캐시된 변환 결과를 위한 추가 공간 등, 고급 사용 및 트래픽이 많은 애플리케이션의 경우 유료 요금제가 필요할 수 있습니다.