이미지 콘텐츠 전송 네트워크 (CDN)는 있습니다. 웹사이트를 이미지 CDN으로 전환하면 이미지 40~80% 절감 대부분의 경우 한 형식보다 이미지를 더 최적화할 수 있습니다. 빌드 시 이미지 최적화 스크립트를 작성할 수 있습니다
이미지 CDN이란 무엇인가요?
이미지 CDN은 이미지 변환, 최적화, 제공에 특화되어 있습니다. 나 또한 인코더-디코더는 이미지에 액세스하고 이를 조작하는 API로 확인할 수 있습니다 이미지 CDN에서 로드된 이미지의 경우 이미지 URL은 지정할 수 있으며 크기, 형식, 품질 등의 매개변수도 함께 표시됩니다. 이를 통해 다양한 사용 사례에 맞게 이미지의 변형을 만들 수 있습니다.
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">이미지 CDN은 빌드 시 이미지 최적화 스크립트와 필요에 따라 새 버전의 이미지를 만들 수 있습니다. 따라서 CDN은 일반적으로 개인에게 맞게 크게 맞춤설정된 이미지를 만드는 데 더 적합 클라이언트와 상호작용할 수 있습니다
이미지 CDN에서 URL을 사용하여 최적화 옵션을 나타내는 방법
이미지 CDN에서 사용하는 이미지 URL은 이미지에 대한 중요한 정보를 전달하며 변환 및 최적화를 적용할 수 있습니다 URL 형식 사용하는 이미지 CDN에 따라 다르지만 개략적으로 설명하자면 확인할 수 있습니다 다음은 가장 일반적인 몇 가지 기능입니다.
<ph type="x-smartling-placeholder">
출발지
이미지 CDN은 자체 도메인 또는 이미지 CDN의 도메인에 존재할 수 있습니다. 서드 파티 이미지 CDN은 일반적으로 있습니다. 자체 도메인을 사용하면 나중에 이미지 CDN을 쉽게 전환할 수 있습니다. URL을 변경하지 않아도 됩니다
이전 예에서는 이미지 CDN의 도메인('example-cdn.com')을 맞춤 도메인 대신 맞춤설정된 하위 도메인을 사용할 수 있습니다.
이미지
일반적으로 이미지 CDN은 자체 콘텐츠로부터 이미지를 자동으로 가져오도록
기존 위치에 게시할 수 있습니다 이 기능은 주로
이미지의 URL에 기존 이미지의 전체 URL을 포함합니다.
생성된 모든 프로세스와 일치합니다 예를 들어
https://my-site.example-cdn.com/https://flowers.com/daisy.jpg/quality=auto
이 URL은 https://flowers.com/daisy.jpg에 있는 이미지를 가져와 최적화합니다.
요청된 파일 형식 (예시의 JPG)은
이미지 파일 형식 (예시에서는 WebP)을 반환합니다. content-type HTTP
헤더는 URL을 처리할 수 있도록 URL의 형식을 브라우저에 알려줍니다.
적절하게 조정할 수 있습니다 따라서 파일이 디스크에 저장되고
형식이 파일 확장자와 일치할 것으로 예상되는 다른 프로그램을 찾습니다.
이미지 CDN에 이미지를 업로드하는 또 다른 널리 지원되는 방법은 이미지를 이미지 CDN API에 대한 HTTP POST 요청에서 제공됩니다.
보안 키
보안 키를 사용하면 다른 사용자가 내 이미지의 새 버전을 만들 수 없습니다. 이 기능을 사용 설정하면 이미지의 새 버전마다 고유한 있습니다.
누군가가 이미지 URL의 매개변수를 변경하려고 하지만 유효한 보안 키를 제공하지 않으면 새 보안 키를 만들 수 없습니다. 있습니다. 이미지 CDN은 생성 및 추적과 관련된 세부정보를 처리합니다. 보안 키를 자동으로 관리합니다
변환
이미지 CDN은 수십, 경우에 따라 수백 개의 서로 다른 이미지를 사용할 수 있습니다 이러한 변환은 URL 문자열에 지정되며 여러 변환을 동시에 사용하는 데 대한 제한이 없습니다. 웹 성능의 경우 가장 중요한 이미지 변환은 크기, 픽셀 수 밀도, 형식, 압축이 포함됩니다. 이러한 변환은 일반적으로 이미지 CDN으로 전환하면 사이트의 이미지 파일이 작아집니다.
보통 실적에 대해 객관적으로 최선의 설정이 있기 때문에 일부 이미지 CDN은 '자동' 모드 사용할 수 있습니다 예를 들어 이미지를 변환하도록 지정하는 대신 WebP 형식으로 하려면 CDN이 자동으로 최적의 형식을 취할 수 있습니다. 이미지 CDN은 이미지를 변환하는 최상의 방법을 결정할 수 있습니다. 다음과 같은 신호를 사용합니다.
- 클라이언트 힌트 (예: 표시 영역 너비, DPR, 이미지 너비)
Save-Data헤더- 사용자 에이전트 요청 헤더
- Network Information API
예를 들어 이미지 CDN은 Chrome 브라우저에 AVIF를 제공하고, 에지에 WebP를 제공할 수 있습니다. 및 JPEG를 아주 오래된 브라우저로 변환합니다. 자동 설정이 인기 있는 이유는 이미지 CDN의 장점을 활용하여 이미지를 최적화하지 않고도 이미지 CDN이 시작될 때 새 기술을 채택하기 위해 코드를 변경해야 하는 경우 집중할 수 있게 되었죠
이미지 CDN 유형
이미지 CDN에는 두 가지 주요 카테고리가 있습니다. 자체 관리형과 서드 파티에서 관리합니다
자체 관리형 이미지 CDN
자체 관리형 CDN은 자체 인프라를 안심하고 유지관리할 수 있습니다
- Thumbor는 가장 많이 사용되는 자체 관리형 이미지 CDN을 지원합니다 오픈소스이며 무료로 사용할 수 있지만 기능이 대부분의 상용 CDN에 포함되어 있으며 관련 문서가 다소 제한됩니다. thumbor를 사용하는 사이트에는 위키백과, 정사각형, 99designs을 만나볼 수 있습니다. 자세한 내용은 Thumbor 이미지 CDN 설치 방법을 참조하세요. 설정 안내를 참조하세요.
- 상상의
- 이미지고르
서드 파티 이미지 CDN
서드 파티 이미지 CDN은 이미지 CDN을 서비스로 제공합니다. 같은 방식으로 클라우드 제공업체가 서버 및 기타 인프라를 유료로 제공, 이미지 CDN 이미지 최적화 및 게재 서비스를 제공합니다. 서드 파티 이미지 CDN은 기본 기술을 유지 관리하며, 일반적으로 CDN을 사용하여 시작할 수 있습니다. 그러나 대규모 사이트의 경우 완전히 이전하는 데는 더 오래 지속됩니다. 서드 파티 이미지 CDN은 일반적으로 사용 등급에 따라 가격이 책정되며 대부분의 이미지 CDN은 무료 등급 또는 무료 체험판을 제공하여 사용해 볼 수 있습니다. 있습니다.
이미지 CDN 선택
이미지 CDN에 적합한 옵션은 많습니다. 일부에는 다른 것보다 더 많은 기능이 있습니다. 그 중 어느 것이든 이미지의 바이트를 절약하여 더 빠르게 작업할 수 있습니다. 데이터 레이크를 선택할 때 특성 세트 외에도 이미지 CDN은 비용, 지원, 문서화, 설정 또는 마이그레이션의 용이성을 제공합니다.
최대 콘텐츠 페인트 (LCP)에 미치는 영향
이미지는 많은 웹사이트에서 사용자 경험에서 중요한 부분이므로 사이트의 최대 콘텐츠 페인트에 중요한 요소입니다. 다음과 같습니다. 이미지 CDN을 사용하기로 한 경우 다음과 같은 몇 가지 유의해야 할 사항이 있습니다.
- CDN에서 게재되는 이미지는 교차 출처 서버에서 가져올 수 있으며 사이트의 연결 설정 시간을 늘릴 수 있습니다. 가능하면 이미지를 사용하세요. 기본 출처를 통해 프록시 처리하므로 출처를 더 추가하지 않는 CDN 외부 IP 주소가 있어야 합니다. 자체 호스팅 이미지와 효과가 같습니다. 기본 출처에서 사용할 수 있습니다
"high"의fetchpriority속성 값을 사용해 보세요. 브라우저에서 곧바로 해당 이미지를 로드할 수 있도록 합니다. 할 수 있습니다.- 이미지가 초기 HTML에서 즉시 검색되지 않는 경우에는
rel=preload브라우저가 해당 이미지를 미리 로드할 수 있도록 LCP 후보 이미지에 대한 힌트를 줍니다. 있습니다. - 원본을 통해 프록시 처리할 수 없고 브라우저에서 어떤 이미지를 알지 못하는 경우 로드하기 전에 로드해야 한다면 가능한 한 빨리 교차 출처 이미지 CDN에 대한 연결 설정 잠재적 LCP 후보 이미지의 리소스 로드 단계를 단축할 수 있습니다.