Cloudflare Images 가 이미지가 사는 곳이라면, Cloudflare Image Transformations는 그것을 빠르게 만드는 엔진입니다. 이미지를 요청받는 순간에, 이미 가지고 있는 원본만 사용해 크기를 조정하고 압축하며 최신 포맷으로 변환합니다. 빌드 단계도, 미리 생성한 썸네일도, 스토리지를 어지럽히는 별도의 사본도 없습니다. 원하는 크기와 포맷을 URL에 요청하면 Cloudflare가 엣지에서 그것을 생성하고 캐시합니다.

이 가이드는 Cloudflare에서의 이미지 호스팅에 관한 제 개요의 실전 동반 글입니다. 변환을 실행하는 두 가지 방법, 중요한 매개변수, 2026년 비용, 그리고 WordPress와 PrestaShop에서 그 모든 것을 자동화하는 방법을 설명합니다.

요약

  • 변환은 하나의 원본에서 요청에 따라 이미지의 크기를 조정하고 압축하며 WebP/AVIF로 변환합니다
  • 두 가지 방법: 간단한 URL 형식(/cdn-cgi/image/...)과 완전한 제어를 위한 Cloudflare Worker
  • format=auto는 브라우저가 지원하는 것에 따라 AVIF 또는 WebP를 자동으로 전송합니다
  • 요금은 넉넉합니다. 월 처음 5,000회 고유 변환은 무료이며, 이후 1,000회당 0.50달러입니다
  • 변환은 더 이상 Pro 요금제를 요구하지 않으며, 이는 이전 몇 년과 비교해 의미 있는 변화입니다
  • 오리진 또는 Cloudflare R2 에서 이미지를 변환할 수 있고, 제 무료 플러그인과 Worker로 그 모든 것을 자동화할 수 있습니다

Cloudflare Image Transformations의 작동 방식

전통적으로 반응형 이미지를 제공하려면 모든 크기를 미리 생성해야 했습니다. 사진을 업로드하면 CMS가 썸네일, 중간 버전, 큰 버전 등을 만들어 각각을 별도의 파일로 저장합니다. 이는 스토리지를 낭비하고, 업로드를 느리게 하며, 그래도 특정 기기가 필요로 하는 정확한 크기에는 결코 들어맞지 않습니다.

이미지 변환은 이를 뒤집습니다. 원본 하나를 저장합니다. 방문자의 브라우저가 특정 크기를 요청하면 Cloudflare가 그 크기를 즉석에서 생성하고 최적화하며 결과를 엣지에 캐시합니다. 같은 버전을 필요로 하는 다음 방문자는 캐시된 사본을 즉시 받습니다. 파생물을 직접 생성하거나 저장하지 않는데도, 모든 기기가 그 화면과 포맷 지원에 맞춰진 이미지를 받습니다.

방문자에게 돌아가는 결과는 이렇습니다. 1MB 사진이 100~200KB AVIF로 도착하고, 뷰포트에 정확히 맞춰지며, 가까운 엣지 위치에서 전송됩니다.

방법 1: URL 형식을 통한 이미지 변환

이미지를 변환하는 가장 간단한 방법은 그 URL을 자신의 영역에 있는 특별한 경로로 감싸는 것입니다.

1https://example.com/cdn-cgi/image/<options>/<source-image-url>

폭을 800px로 조정하고 품질을 75로 설정하며 최적의 포맷을 자동 선택하는 실제 예입니다.

1https://example.com/cdn-cgi/image/width=800,quality=75,format=auto/https://example.com/uploads/photo.jpg

이를 사용하려면 Cloudflare 대시보드에서 영역의 Transformations를 활성화하세요(Images 아래). 활성화하면 그 영역의 어떤 이미지든 URL을 구성하기만 하면 변환할 수 있습니다. 가장 빠르게 시작하는 방법이며 코드가 필요 없습니다.

가장 유용한 옵션은 다음과 같습니다.

옵션하는 일
width, height목표 치수(픽셀)
fit상자에 맞추는 방식: scale-down, contain, cover, crop, pad
quality압축 수준, 1~100(75가 합리적인 기본값)
format=auto지원되면 AVIF/WebP, 아니면 원본 포맷을 전송
gravity자를 때의 초점(예: auto, face, 또는 좌표)
dpr레티나 디스플레이를 위한 기기 픽셀 비율
sharpen, blur선택적 후처리 효과

방법 2: Cloudflare Worker를 통한 이미지 변환

진정한 제어를 위해서는 Cloudflare Worker 안에서 fetch 요청의 cf.image 속성을 사용해 변환합니다. 이를 통해 로직을 적용할 수 있습니다. 기기에 따라 치수를 선택하거나, 어떤 이미지를 변환할 수 있는지 제한하거나, 페이지 전체의 이미지 링크를 다시 쓰는 것입니다.

 1export default {
 2  async fetch(request) {
 3    const options = {
 4      cf: {
 5        image: {
 6          width: 800,
 7          quality: 75,
 8          format: "auto",
 9          fit: "scale-down",
10        },
11      },
12    };
13
14    // The image you want to transform
15    const imageURL = "https://example.com/uploads/photo.jpg";
16    return fetch(imageURL, options);
17  },
18};

Worker 방식은 제 자체 도구를 구동하는 방식입니다. 사이트의 최종 HTML 출력을 다시 쓸 수 있기 때문이며, 여기에는 테마와 플러그인, 심지어 인라인 CSS가 삽입하는 이미지도 포함됩니다. 이는 URL만으로는 단독으로 닿을 수 없습니다. Workers를 더 폭넓게 배우고 싶다면 공식 Workers 문서 가 훌륭한 출발점입니다.

R2 또는 원격 소스에서 이미지 변환

같은 영역의 이미지에만 국한되지 않습니다. 변환은 원격 오리진에서 가져올 수 있어 Cloudflare R2 객체 스토리지의 완벽한 파트너가 됩니다. 원본을 R2 버킷에 보관하고 전송 시 변환하면, R2는 이그레스 요금을 부과하지 않으므로 이그레스에 아무것도 지불하지 않습니다. 이 구체적인 패턴은 Cloudflare R2에서의 이미지 호스팅 가이드에서 자세히 다룹니다.

자신의 영역에 없는 이미지를 변환할 때는 변환 설정에서 소스 도메인을 허용하는 것을 잊지 마세요. 그렇지 않으면 Cloudflare가 가져오기를 거부합니다.

Cloudflare Image Transformations 요금

여기서의 경제성은 특히 중소 규모 사이트에 친절합니다. 2026년 공식 Images 요금 을 기준으로:

구간비용
처음 5,000회 고유 변환 / 월무료
5,000회 초과고유 변환 1,000회당 0.50달러
이그레스 대역폭0달러(무료)

“고유 변환"이란 한 달 동안 하나의 원본 이미지에 적용된 옵션의 하나의 고유한 조합입니다. 한 사진의 같은 width=800,format=auto 버전을 천 번 요청해도 여전히 단일 고유 변환으로 계산됩니다. 나머지 999번은 캐시에서 제공되기 때문입니다. 그래서 바쁜 사이트에서도 실제 변환 횟수는 낮게 유지됩니다. 페이지 조회수보다 고유한 이미지-크기 조합의 수가 훨씬 적기 때문입니다.

반복할 가치가 있는 큰 변화: 변환은 예전에 유료 Pro 요금제 뒤에 있었습니다. 이제는 무료 요금제에서도 그 월 5,000회 한도까지 사용할 수 있습니다. 작은 블로그나 포트폴리오에게는 즉석 이미지 최적화가 이제 사실상 무료입니다.

WordPress와 PrestaShop에서 자동화하기

변환 URL을 손으로 구성하는 것은 몇 장이라면 괜찮지만, 실제 사이트에는 수백 장이 있고 그것들은 동적으로 생성됩니다. 그것이 어려운 부분이며, 바로 제 무료 도구가 해결하는 것입니다.

  • WordPress 플러그인. 제 Cloudflare Image Resizing 플러그인 (GitHub )은 이미지 링크를 다시 써서 자동으로 변환을 거치도록 합니다.
  • Cloudflare Worker. 제 Cloudflare Image Resizing Worker 는 최종 HTML을 다시 써서 완전히 적용하며, 플러그인과 테마가 삽입하는 이미지와 CSS 내에서 참조되는 이미지까지 포함합니다.

완전한 복사-붙여넣기 안내는 WordPress용 Cloudflare Image Resizing 과 PrestaShop용 Cloudflare Image Resizing 을 읽어 보세요. 플러그인과 Worker 사이에서, 템플릿 하나 건드리지 않고도 사이트의 모든 이미지가 최적화됩니다.

이미지 라이브러리를 Cloudflare Images 제품을 통해 직접 저장하고 관리하고 싶다면, Easy Cloudflare Images 가 Windows, macOS, Linux 전반에서 이미지를 업로드하고 최적화하는 제 무료 데스크톱 앱입니다.

간단한 전후 테스트

어떤 최적화든 판단하는 정직한 방법은 그것을 측정하는 것입니다.

  1. 이미지가 많은 페이지를 골라 PageSpeed Insights 로 실행하세요. Largest Contentful Paint와 총 이미지 용량을 기록하세요.
  2. 변환을 활성화하고 그 페이지의 이미지에 width와 format=auto를 적용하세요(URL 방식, Worker, 또는 제 플러그인으로).
  3. 테스트를 다시 실행하세요. 이미지 페이로드가 급격히 줄고 LCP가 개선되며, 흔히 불합격 점수가 녹색으로 바뀝니다.

그 측정 가능한 개선이 사용자 경험과 검색 순위 양쪽을 움직이게 하는 것입니다.

핵심 요약

  • Cloudflare Image Transformations는 하나의 원본에서 최적화되고 올바른 크기의 이미지를 요청에 따라 생성합니다
  • URL 방식(/cdn-cgi/image/...)이 가장 빠른 출발점이고, Worker는 완전한 프로그래밍 제어를 제공합니다
  • format=auto는 AVIF/WebP 협상을 대신 처리하며, 구형 브라우저에는 안전한 대체가 있습니다
  • 처음 5,000회 고유 변환은 월 무료, 이후 1,000회당 0.50달러이며 이그레스 요금이 없습니다
  • 변환은 이제 Pro 구독 없이 무료 요금제에서도 작동합니다
  • 변환을 R2와 결합해 이그레스 없는 미디어 라이브러리를 만들고, 제 플러그인과 Worker로 모든 것을 자동화하세요

자주 묻는 질문

Cloudflare Images와 Image Transformations의 차이는 무엇인가요? Cloudflare Images는 이미지를 저장, 최적화, 전송하는 더 넓은 제품입니다. Image Transformations는 그 안의 크기 조정 및 최적화 기능입니다. Cloudflare Images, R2, 또는 자신의 오리진에 저장된 이미지에 대해, 반드시 Images 제품에 저장하지 않고도 변환을 사용할 수 있습니다.

이미지 변환을 사용하려면 유료 요금제가 필요한가요? 아니요, 더 이상 그렇지 않습니다. 변환은 무료 요금제에서 월 5,000회 고유 변환까지 사용할 수 있습니다. 그 이상은 1,000회당 0.50달러를 지불하며, 이그레스 요금은 없습니다.

format=auto는 무엇을 하나요? Cloudflare에게 브라우저의 Accept 헤더를 검사해 지원하는 가장 효율적인 포맷, 보통 AVIF 또는 WebP를 전송하고, 최신 포맷을 지원하지 않는 브라우저에는 원본 포맷(예: JPEG 또는 PNG)으로 대체하도록 지시합니다.

Cloudflare에 호스팅되지 않은 이미지를 변환할 수 있나요? 예. 변환 설정에서 해당 소스를 허용하기만 하면, 변환은 Cloudflare R2 버킷이나 외부 서버를 포함한 원격 오리진에서 가져올 수 있습니다.

과금에서 무엇이 고유 변환으로 계산되나요? 청구 월 내에 하나의 원본 이미지에 적용된 옵션의 하나의 고유한 조합입니다. 같은 변환 버전에 대한 반복 요청은 캐시에서 제공되어 한 번만 계산되므로 실제 비용이 낮게 유지됩니다.

이를 WordPress나 PrestaShop 사이트 전체에 적용하려면? 빠른 자동 설정에는 제 무료 WordPress 플러그인을 사용하거나, CSS 내의 것을 포함한 모든 이미지 링크를 다시 쓰는 완전한 적용에는 제 Cloudflare Worker를 배포하세요. 둘 다 제 단계별 플랫폼 가이드에 문서화되어 있습니다.