이미지 최적화, Next.js 내장 API 대신 클라우드 연동하기

안녕하세요! 오늘은 Next.js에서 기본 제공하는 이미지 최적화 API 대신, 클라우드 제공업체의 이미지를 활용하는 방법에 대해 알아볼게요.

Next.js 자체적으로 이미지 최적화 기능이 굉장히 편리하지만, 경우에 따라 AWS, Cloudinary, Imgix 같은 클라우드 서비스를 사용해야 할 때도 있죠. 그럴 땐 next.config.js에 약간의 설정만 추가하면 쉽게 커스터마이징 할 수 있어요.

module.exports = {
  images: {
    loader: 'custom',         // 커스텀 로더를 사용하겠다는 뜻이에요
    loaderFile: './my/image/loader.js', // 이미지 URL을 변환하는 함수가 담긴 파일 경로
  },
}

위 설정에서 loaderFile은 Next.js 프로젝트 루트 기준 상대 경로로 지정해야 해요. 그리고 이 파일은 기본(default)으로 함수를 내보내야 하죠. 이 함수는 이미지 URL을 문자열로 반환하게 만들면 됩니다.

예를 들면, 내 클라우드 이미지 서비스 URL을 붙이는 방식으로 직접 조절할 수 있게 만드는 거죠!

예시: loader.js 파일

export default function loader({ src, width, quality }) {
  return `https://your-cloud-service.com/${src}?w=${width}&q=${quality || 75}`;
}

src: 최종적으로 최적화할 이미지 경로
width: 요청하는 이미지의 너비 (Next.js가 필요에 따라 조절)
quality: 이미지 품질 (옵션, 없으면 기본값 75 사용)

이런 방식으로 자체 클라우드 이미지 URL 생성 로직을 자유롭게 구현할 수 있답니다.

추가 팁!

클라우드를 활용하면, 이미지 변환뿐 아니라 CDN을 통한 빠른 로딩까지 누릴 수 있어요.
AWS S3 + CloudFront, Cloudinary, Imgix 등이 대표적입니다.
next/image 컴포넌트와의 호환성을 유지하면서도 유연하게 커스터마이징 가능해요.
loaderFile을 지정하지 않고 loader: 'imgix'나 loader: 'cloudinary' 같은 기본 제공 로더를 쓸 수도 있어요.

이미지 최적화 전략을 고민 중이라면, 내 프로젝트에 가장 잘 맞는 방식을 찾아보고 적용하는 게 중요합니다. Next.js의 확장성 덕분에, 다양한 클라우드 서비스와 쉽게 연동할 수 있으니 걱정하지 마세요!

필요하면 다음 번에 각 클라우드 제공업체별 최적화 설정법도 소개할게요. 편하게 댓글로 요청해주세요~

안녕하세요 여러분! 오늘은 Next.js에서 이미지 최적화를 할 때 자주 사용되는 커스텀 이미지 로더 함수에 대해 이야기해볼게요.

위 코드를 보면 myImageLoader라는 함수가 있어요. 요 함수는 다음과 같이 생겼죠:

'use client'
 
export default function myImageLoader({ src, width, quality }) {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

이 함수가 하는 일?

이 함수는 이미지 URL을 받아서 다음과 같이 변형해줘요.

src: 원본 이미지 경로
width: 요청하는 이미지 너비 (이미지 최적화를 위해)
quality: 이미지 품질. 만약 입력 안 하면 기본값 75로 설정됨

즉, https://example.com/이미지경로?w=이미지너비&q=품질 형태로 URL을 만들어서 커스텀 이미지 서버나 CDN에 최적화된 이미지를 요청하게 만드는 거예요.

어떻게 쓰나요?

next/image 컴포넌트를 사용할 때 loader prop에 이 함수를 넘겨주면 돼요.

import Image from 'next/image'
import myImageLoader from './myImageLoader'

export default function MyComponent() {
  return (
    <Image
      loader={myImageLoader}
      src="path/to/image.jpg"
      alt="My Image"
      width={800}
      height={600}
    />
  )
}

여기서 알면 좋은 팁!

이 loader 함수를 커스텀하고 싶으면 use client 지시어를 꼭 붙여서 클라이언트 컴포넌트로 만들어야 해요. 그래야 함수가 직렬화되어 클라이언트에서 잘 작동하거든요.
Next.js 내장 이미지 최적화 API가 어떻게 동작하는지도 잘 이해해두면 좋아요. 공식 문서에서 Image Configuration Options 참고하시면 유용해요.

추가로 알아두면 좋은 점

커스텀 로더를 사용하면, Next.js가 제공하는 기본 최적화 기능을 일부 포기하는 경우가 있어요. 그렇기 때문에 중간 CDN 혹은 별도 이미지 서버가 있을 때 최적화 문제를 직접 해결하고 싶을 때 사용하면 좋습니다.
만약 여러 종류의 이미지를 각각 다른 서버에서 받는 경우, 로더 함수를 조금 더 복잡하게 만들어서 서버별 분기처리도 가능해요.

그러니까 상황에 맞게 잘 활용하면 공식 next/image 기능을 더 유연하고 강력하게 쓸 수 있다는 뜻이죠!

요약한 표도 준비했어요.

항목	설명
`src`	원본 이미지 경로
`width`	요청 이미지 너비, 최적화를 위해 사용
`quality`	이미지 품질, 기본값은 75
`loader` prop	next/image 컴포넌트에 커스텀 로더 함수를 전달하여 이미지 URL 생성 제어 가능
`use client`	커스텀 로더가 클라이언트 컴포넌트가 되도록 지시어를 붙여야 함 (함수 직렬화 필요)

이런 커스텀 로더 활용법으로 Next.js 이미지를 나만의 방식으로 최적화해보세요! 다음에도 개발 꿀팁 가지고 올게요 :)

예제 로더 구성

이미지 최적화 서비스를 만들 때, 각각의 CDN이나 이미지 서비스들이 요구하는 방식에 맞춰 URL을 만드는 게 중요해요. 여기서는 대표적인 서비스들의 로더 예시를 보여드릴게요.

서비스명	설명
Akamai	Akamai CDN 이미지 로더
AWS CloudFront	AWS의 CDN 서비스
Cloudinary	이미지와 비디오 관리 플랫폼
Cloudflare	웹 최적화 및 CDN 서비스
Contentful	컨텐츠 관리 시스템
Fastly	고성능 CDN
Gumlet	이미지 최적화 및 변환 서비스
ImageEngine	이미지 최적화 솔루션
Imgix	실시간 이미지 처리 서비스
PixelBin	이미지 최적화 플랫폼
Sanity	구조화된 컨텐츠 관리 시스템
Sirv	이미지 호스팅과 CDN
Supabase	오픈 소스 백엔드 플랫폼
Thumbor	오픈 소스 이미지 처리 서버
Imagekit	실시간 이미지 최적화 서비스
Nitrogen AIO	AI 기반 이미지 최적화 도구

Akamai 예시 코드

// 공식 문서: https://techdocs.akamai.com/ivm/reference/test-images-on-demand
export default function akamaiLoader({ src, width, quality }) {
  return `https://example.com/${src}?imwidth=${width}`
}

Akamai는 URL에 imwidth 파라미터로 원하는 이미지 너비를 지정하는 식으로 이미지를 요청할 수 있어요. 이처럼 각 서비스마다 URL 포맷이 다르니, 서비스를 사용할 때는 꼭 공식 문서를 확인해 주세요!

조금 더 유용한 팁!

quality 파라미터를 지원하는 경우, 이미지 품질 조절도 가능한데요. 품질을 조절하면 파일 크기를 줄이면서도 적당한 화면 퀄리티를 유지할 수 있어요.
width, height를 명확히 지정하면 브라우저가 레이아웃을 미리 잡는데 도움이 돼서 LCP(최대 콘텐츠 표시 시간) 개선에 유리합니다.
이미지를 다루는 서비스마다 URL 규칙이 다르기 때문에, 공통 인터페이스로 로더 함수를 만들어두면 코드 관리가 편해집니다.

이미지 최적화는 웹 성능에 엄청 큰 영향을 미치니까, 여러분만의 로더를 만들어서 꼭 활용해보세요!

AWS CloudFront 이미지 최적화 로더

AWS CloudFront는 CDN 서비스로 유명하지만, 이미지 최적화 기능도 정말 강력해요. 위 코드 예제는 CloudFront의 이미지 최적화 API와 연동하는 간단한 로더 함수입니다.

export default function cloudfrontLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  url.searchParams.set('format', 'auto') // 이미지 포맷을 자동으로 변환 (WebP, AVIF 등 지원)
  url.searchParams.set('width', width.toString()) // 원하는 이미지 너비 지정
  url.searchParams.set('quality', (quality || 75).toString()) // 퀄리티 조절 (기본 75)
  return url.href
}

format=auto: 브라우저가 지원하는 최적의 이미지 포맷(WebP, AVIF 등)을 자동으로 선택해줍니다. 이걸 사용하면 무조건 파일 사이즈가 줄어들어 빠른 로딩이 가능해지죠.
width와 quality 설정으로 원하는 사이즈와 품질을 자유롭게 조절할 수 있어요.

팁! AWS는 CloudFront 외에도 AWS Image Handler 솔루션을 제공합니다. 요구사항에 따라 서버리스 방식으로 이미지 리사이징, 최적화를 구현할 수도 있어요.

Cloudinary 이미지 최적화 로더

Cloudinary는 이미지 및 비디오 관리에서 거의 표준처럼 쓰이는 서비스인데요, 여기서도 자동 변환과 최적화 기능을 활용할 수 있습니다.

export default function cloudinaryLoader({ src, width, quality }) {
  const params = ['f_auto', 'c_limit', `w_${width}`, `q_${quality || 'auto'}`]
  return `https://example.com/${params.join(',')}${src}`
}

f_auto: 자동 이미지 포맷 변환
c_limit: 컨텐츠 제한 모드로 이미지가 지정한 width보다 크면 축소
w_300: 이미지 너비 300픽셀 설정 예시
q_auto: 이미지 퀄리티를 자동으로 최적화

Cloudinary는 다양한 트랜스포메이션 옵션을 제공하니, 공식 문서나 데모 페이지(링크)를 참고해서 꼭 활용해보세요!

한 줄 요약

서비스	이미지 최적화 키워드	특징 및 참고사항
AWS CloudFront	`format=auto`, `width`, `quality`	AWS 인프라 연동, 서버리스 이미지 최적화 가능
Cloudinary	`f_auto`, `c_limit`, `w_`, `q_`	다양한 이미지 변환/최적화 기능 제공, 쉽게 적용 가능

저도 예전에 이미지 최적화 때문에 엄청 고민했는데, 이런 CDN 서비스의 자동 최적화 기능을 이용하니 정말 편하더라고요. 직접 써보면서 서비스마다 조금씩 다른 파라미터와 특성을 비교해 보는 것도 좋은 공부가 될 거예요!

Cloudflare 이미지 로더 함수

// Docs: https://developers.cloudflare.com/images/transform-images
export default function cloudflareLoader({ src, width, quality }) {
  const params = [`width=${width}`, `quality=${quality || 75}`, 'format=auto']
  return `https://example.com/cdn-cgi/image/${params.join(',')}/${src}`
}

여기서는 Cloudflare의 이미지 변환 API를 이용해서 이미지를 자동 포맷(webp, avif 등)으로 변경하고, 지정한 너비(width)와 품질(quality)를 적용해주고 있어요. quality는 지정하지 않으면 기본값 75로 처리하니 참고하세요.

포인트는 URL에 쿼리스트링 대신 path 부분에 파라미터를 쉼표로 구분해서 넣는다는 거예요. Cloudflare 방식만 좀 특별하니 헷갈리지 말기!

Contentful 이미지 로더 함수

// Docs: https://www.contentful.com/developers/docs/references/images-api/
export default function contentfulLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  url.searchParams.set('fm', 'webp')
  url.searchParams.set('w', width.toString())
  url.searchParams.set('q', (quality || 75).toString())
  return url.href
}

Contentful 이미지 API를 쓸 때는 URLSearchParams를 이용해서 쿼리스트링을 붙여줘요. 여기서 fm=webp는 이미지 포맷을 webp로 강제 변환하는 옵션이고, w는 너비, q는 품질이에요.

Contentful은 URL에 쿼리파라미터를 붙이는 형식이라 Cloudflare와 달리 경로가 복잡하지 않아서 편리해요.

추가 팁

이미지 최적화할 때는 가능한 한 format=auto나 fm=webp 같은 포맷 자동 변환 기능을 꼭 쓰는 게 좋아요. 요즘 브라우저 대부분이 webp, avif 등 고효율 포맷을 지원해서 페이지 로딩 속도가 훨씬 빨라진답니다.
이미지 너비(width)를 꼭 지정해서 너무 큰 원본 이미지를 불필요하게 불러오지 않도록 하세요.
품질(quality)을 75 정도로 설정하면 품질과 파일 크기의 균형이 잘 맞는 편이에요. 필요하다면 조절해보세요.

이렇게 내가 쓰는 CDN이나 이미지 제공 서비스에 맞게 최적화 로더 함수를 만들어서 쓰면 Next.js 같은 프레임워크에서 자동으로 최적화된 이미지를 잘 뽑아줄 수 있어요. 한번 직접 만들어서 써보면 생각보다 간단하고 효과가 확실하니 도전해보세요!

Fastly와 Gumlet 이미지 로더 비교

이미지 최적화와 관련해서 Fastly와 Gumlet 두 가지 서비스를 많이 사용하죠. 여기서 각각의 간단한 커스텀 이미지 로더 함수 예제를 소개할게요. 이 함수들은 주로 Next.js 같은 프레임워크에서 이미지 URL을 동적으로 생성할 때 유용하게 쓰입니다.

// Fastly 로더 예제
export default function fastlyLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  url.searchParams.set('auto', 'webp') // 자동으로 WebP 포맷 변환
  url.searchParams.set('width', width.toString()) // 이미지 너비 설정
  url.searchParams.set('quality', (quality || 75).toString()) // 이미지 품질 설정 (기본 75)
  return url.href
}

// Gumlet 로더 예제
export default function gumletLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  url.searchParams.set('format', 'auto') // 자동 포맷 변환
  url.searchParams.set('w', width.toString()) // 이미지 너비 설정
  url.searchParams.set('q', (quality || 75).toString()) // 이미지 품질 설정 (기본 75)
  return url.href
}

항목	Fastly	Gumlet
포맷 자동변환	`auto=webp`	`format=auto`
이미지 너비	`width`	`w`
품질 설정	`quality` (기본값 75)	`q` (기본값 75)
공식 문서	Fastly IO Docs	Gumlet Docs

빠르게 정리하는 팁!

두 서비스 모두 이미지 포맷을 자동변환해서 WebP 같은 최신 포맷으로 최적화할 수 있어요.
파라미터 명칭이 조금 다르니 사용할 때 코드를 잘 확인해야 합니다.
quality 기본값을 75로 맞추는 건 적당한 품질 유지와 용량 절약 균형을 위해 많이 쓰입니다.
URL 생성시 new URL을 쓰면 쿼리 파라미터 세팅이 편해서 추천해요.

이렇게 커스텀 로더를 쓰면 내 서비스에 맞춰 최적의 이미지 URL을 자동으로 만들어주니까 퍼포먼스에 큰 도움이 됩니다. 나중에 더 심화된 옵션들도 활용해보면 좋아요!

ImageEngine

// 공식 문서: https://support.imageengine.io/hc/en-us/articles/360058880672-Directives
export default function imageengineLoader({ src, width, quality }) {
  const compression = 100 - (quality || 50)  // quality가 없으면 기본 50으로 지정 후 압축률 계산
  const params = [`w_${width}`, `cmpr_${compression}`]
  return `https://example.com${src}?imgeng=/${params.join('/')}`
}

ImageEngine은 이미지의 크기 조절과 압축률을 URL 파라미터로 조절해서 최적화해주는 서비스입니다. 위 코드에서는 너비(width)와 품질(quality)를 받아서 적절한 압축 비율로 변환하고, 이 매개변수를 URL에 붙여서 반환해줍니다.

w_{width} : 이미지 너비 지정
cmpr_{value} : 압축률 지정 (100에서 quality 값을 뺀 값)

참고로, quality 값을 0~100까지 넘겨주면 압축률을 구할 수 있어서 좀 더 세밀하게 이미지 품질과 용량을 조절할 수 있답니다.

Imgix

// 예제 이미지: https://static.imgix.net/daisy.png?format=auto&fit=max&w=300
export default function imgixLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  const params = url.searchParams
  params.set('auto', params.getAll('auto').join(',') || 'format')  // 자동 포맷 설정
  params.set('fit', params.get('fit') || 'max')                    // 이미지 fitting 방식 지정
  params.set('w', params.get('w') || width.toString())             // 너비 지정
  params.set('q', (quality || 50).toString())                      // 품질 지정
  return url.href
}

Imgix는 매우 인기있는 이미지 최적화 및 제공 서비스입니다. 위 예시 코드는 URL 객체를 활용해 기존 쿼리 파라미터를 유지하면서 자동 포맷, 맞춤 크기, 품질을 지정해서 반환하고 있어요.

auto=format : 브라우저에 최적화된 형식으로 자동 변환 (webp, jpeg 등)
fit=max : 이미지 fitting 방법으로 최대 크기까지 맞춤 (crop이나 clip도 가능해요)
w : 너비(width) 지정
q : 품질(quality) 지정 (기본값 50)

URL 객체를 쓰는 이유? 쿼리 파라미터를 쉽게 조작하면서 중복 제거하고 올바른 URL을 만들기 위해서에요.

한 번에 비교해보는 주요 파라미터

서비스	주요 파라미터	설명
ImageEngine	`w_{width}`	이미지 너비 지정
	`cmpr_{compression}`	압축률 지정 (100 - quality)
Imgix	`w`	이미지 너비 지정
	`q`	품질(quality) 지정
	`auto=format`	자동 포맷 변환
	`fit`	이미지 fitting 방식

참고 팁

이미지 최적화할 때는 무조건 품질을 최고로 올리는 것보다, 용량과 품질의 적절한 균형점을 찾는 게 중요해요.
'quality' 값을 너무 낮게 하면 이미지가 뭉개지고, 너무 높이면 로딩 속도가 느려지니까요. 보통 50~70 사이 조절이 많이 쓰입니다.
또한, auto=format 같은 기능을 지원하는 서비스는 유용해요. 브라우저에 맞는 최적 포맷으로 변환해주거든요.

기본적인 사용법과 개념부터 잡고, 필요에 따라 각 서비스 공식 문서를 참고해서 더 세밀하게 조정해보길 추천드립니다!

PixelBin 이미지 로더 함수

// Doc (Resize): https://www.pixelbin.io/docs/transformations/basic/resize/#width-w
// Doc (Optimise): https://www.pixelbin.io/docs/optimizations/quality/#image-quality-when-delivering
// Doc (Auto Format Delivery): https://www.pixelbin.io/docs/optimizations/format/#automatic-format-selection-with-f_auto-url-parameter
export default function pixelBinLoader({ src, width, quality }) {
  const name = '<your-cloud-name>'
  const opt = `t.resize(w:${width})~t.compress(q:${quality || 75})`
  return `https://cdn.pixelbin.io/v2/${name}/${opt}/${src}?f_auto=true`
}

PixelBin은 이미지 크기 조절, 압축, 포맷 자동 변환 등을 손쉽게 적용할 수 있게 해주는 이미지 CDN 서비스예요. 위 코드에서 width와 quality를 받아서 이미지를 최적화된 형태로 반환합니다.

t.resize(w:${width}): 원하는 가로 폭으로 이미지 크기를 조절
t.compress(q:${quality || 75}): 이미지 품질을 0~100으로 지정하며 기본값은 75
?f_auto=true: 브라우저에 맞춰 최적의 이미지 포맷(WebP, AVIF 등)을 자동 선택해줍니다.

직접 클라우드 이름(<your-cloud-name>)을 넣어서 사용하세요. PixelBin 덕분에 이미지 최적화가 훨씬 간편해져서 페이지 속도 개선에 아주 좋아요!

Sanity 이미지 로더 함수

// Docs: https://www.sanity.io/docs/image-urls
export default function sanityLoader({ src, width, quality }) {
  const prj = 'zp7mbokg'
  const dataset = 'production'
  const url = new URL(`https://cdn.sanity.io/images/${prj}/${dataset}${src}`)
  url.searchParams.set('auto', 'format')
  url.searchParams.set('fit', 'max')
  url.searchParams.set('w', width.toString())
  if (quality) {
    url.searchParams.set('q', quality.toString())
  }
  return url.href
}

Sanity는 헤드리스 CMS답게 이미지를 효과적으로 다룰 수 있는 내장 이미지 CDN을 제공합니다. 위 코드는 프로젝트 ID와 데이터셋만 맞춰주면 원하는 크기와 품질로 이미지를 요청할 수 있어요.

auto=format: 자동으로 최적의 이미지 포맷을 선택
fit=max: 지정한 크기 내에서 이미지 크기를 최대한 맞춤
w: 가로 폭 지정
q: 이미지 품질 지정 (optional)

Sanity를 쓰면서 매번 직접 URL 다루기 귀찮다면 이렇게 로더 함수로 한 번 만들어 두면 훨씬 편하겠죠?

추가 팁!

요즘은 다양한 디바이스가 많으니까 이미지 사이즈와 포맷 최적화는 필수가 됐어요. 위 두 예시 모두 자동 포맷 변환을 지원하는데, 이런 기능을 활용하면 꼭 WebP, AVIF 같은 최신 포맷을 개별 지원하지 않아도 되니 개발이 한결 수월해진답니다.

또한, quality 값을 너무 높게 잡으면 페이지 로딩 속도가 늦어지고, 너무 낮게 하면 화질이 떨어질 수 있으니 적절한 타협이 중요해요. 보통 70~80 정도가 밸런스가 잘 맞는 편입니다. 실제 서비스에 적용 전에는 꼭 여러 디바이스에서 테스트해보세요!

Sirv 이미지 로더

Sirv는 이미지 최적화와 다이나믹 이미징을 지원하는 서비스에요. 위 코드를 보면, 이미지 URL에 필요한 파라미터를 추가해서 최적화된 이미지를 불러올 수 있게 만들어두었죠.

format 파라미터는 이미지 형식을 지정하는데, 기본값은 'optimal'로 설정해서 브라우저에 맞는 포맷을 자동으로 선택합니다.
w는 이미지의 너비를 의미하고, 값을 넣어주지 않았다면 width 매개변수에서 받아 활용해요.
q는 이미지 품질(quality) 숫자로, 기본값 85를 사용하지만 필요에 따라 조절 가능해요.

export default function sirvLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  const params = url.searchParams
  params.set('format', params.getAll('format').join(',') || 'optimal')
  params.set('w', params.get('w') || width.toString())
  params.set('q', (quality || 85).toString())
  return url.href
}

Supabase 이미지 로더

Supabase의 스토리지를 이용해 이미지 변환 기능을 쓸 때는 URL 파라미터로 width와 quality을 넣으면 돼요.

width 파라미터로 원하는 이미지 너비를 지정하고,
quality를 통해 이미지 압축 정도를 조절할 수 있어요. 기본 75로 설정되어 있습니다.

export default function supabaseLoader({ src, width, quality }) {
  const url = new URL(`https://example.com${src}`)
  url.searchParams.set('width', width.toString())
  url.searchParams.set('quality', (quality || 75).toString())
  return url.href
}

추가 팁 — Next.js와 함께 쓸 때

이 두 로더는 Next.js의 next/image 컴포넌트에서 loader 옵션으로 지정해서 쓸 수 있어요. 이렇게 하면 이미지 최적화가 훨씬 간편해지죠.

import Image from 'next/image'
import sirvLoader from './sirvLoader'

export default function MyComponent() {
  return (
    <Image
      loader={sirvLoader}
      src="/my-image.png"
      width={800}
      height={600}
      alt="Example image"
    />
  )
}

Supabase도 마찬가지구요.

만약 여러분이 이미지 최적화나 변환 기능을 직접 구현하거나 타 서비스와 연동할 계획이라면, 이런 커스텀 로더 패턴을 잘 기억해 두는 게 좋아요. 서비스마다 요구하는 쿼리 파라미터가 다르니 꼭 공식 문서를 참고하세요!

Thumbor와 ImageKit.io 이미지 로더 함수 비교

안녕하세요! 오늘은 이미지 최적화 서비스인 Thumbor와 ImageKit.io를 사용할 때 자주 쓰이는 이미지 URL 생성 함수 예제를 소개할게요. 여러분이 Next.js 같은 프레임워크에서 커스텀 이미지 로더를 만들 때 참고하면 좋아요.

Thumbor

// 공식 문서: https://thumbor.readthedocs.io/en/latest/
export default function thumborLoader({ src, width, quality }) {
  const params = [`${width}x0`, `filters:quality(${quality || 75})`]
  return `https://example.com${params.join('/')}${src}`
}

사용법:
- width만 지정하고 높이(height)는 0으로 고정해서 비율을 유지합니다.
- quality는 필터로 적용하며 기본값은 75입니다.
Thumbor는 URL 구조가 /widthxheight/filters:.../image_path 형식이에요.
실제 사용할 때 https://example.com 대신 본인 서버 주소로 바꾸시면 됩니다.

ImageKit.io

// 공식 문서: https://imagekit.io/docs/image-transformation
export default function imageKitLoader({ src, width, quality }) {
  const params = [`w-${width}`, `q-${quality || 80}`]
  return `https://ik.imagekit.io/your_imagekit_id/${src}?tr=${params.join(',')}`
}

사용법:
- URL 쿼리 스트링 ?tr= 뒤에 변환 옵션을 쉼표로 구분해서 넣는 방식이에요.
- w-는 너비 지정, q-는 품질 설정이며 기본값은 80입니다.
your_imagekit_id를 본인 계정에 맞게 바꿔 주세요.

비교 및 팁

특징	Thumbor	ImageKit.io
URL 형식	`/widthxheight/filters:value/image`	`?tr=options` 쿼리 스트링
품질 기본값	75	80
비율 유지 방식	높이 0으로 설정해서 자동 맞춤	너비만 지정, 자동 비율 유지
공식 문서 링크	Thumbor Docs	ImageKit Docs

한마디

이미지 최적화는 페이지 로딩 속도에 직접적인 영향을 미치기 때문에 꼭 신경 써야 하는 부분이에요. Thumbor와 ImageKit.io 모두 강력한 기능을 제공하니 프로젝트 상황에 맞게 선택하세요. 특히 ImageKit은 CDN 연동이 원활하고, Thumbor는 직접 서버에서 동작하므로 관리 편의성이 달라요.

궁금한 점 있으면 댓글로 물어봐 주세요! 다음에도 더 유용한 개발 정보로 찾아올게요~

Nitrogen AIO

안녕하세요! 오늘은 Nitrogen AIO의 aioLoader 함수를 한번 같이 살펴볼게요. 이 코드는 이미지 URL을 받아서, 파라미터를 조작해 최적화된 이미지 URL을 자동으로 만들어주는 역할을 합니다.

// Docs: https://docs.n7.io/aio/intergrations/
export default function aioLoader({ src, width, quality }) {
  const url = new URL(src, window.location.href) // 주어진 src를 기반으로 URL 객체 생성
  const params = url.searchParams             // URL의 쿼리 파라미터 접근
  const aioParams = params.getAll('aio')      // 'aio' 키에 해당하는 모든 값 가져오기
  aioParams.push(`w-${width}`)                 // 너비 정보 추가 (예: w-800)
  if (quality) {
    aioParams.push(`q-${quality.toString()}`) // 품질 정보 추가 (예: q-75)
  }
  params.set('aio', aioParams.join(';'))       // 'aio' 파라미터를 새롭게 세팅. 여러 값은 ';'로 구분
  return url.href                              // 최종 변환된 URL 반환
}

코드 설명

new URL(src, window.location.href): 상대경로나 절대경로로 전달된 src를 URL 객체로 변환합니다. 이렇게 하면 쉽게 쿼리 파라미터를 조작할 수 있죠.
params.getAll('aio'): 하나의 쿼리 파라미터 키에 여러 값이 있을 때, 모두 배열로 가져올 수 있습니다. 예를 들어 ?aio=foo&aio=bar면 ['foo','bar']가 나오죠.
aioParams.push(...): 이미지의 너비와 품질 정보를 'aio' 파라미터 값 안에 추가해줍니다. 이렇게 하여 이미지 최적화 옵션을 전달하죠.
마지막으로 params.set('aio', aioParams.join(';')): 여러 옵션을 세미콜론(;)으로 연결하여 하나의 'aio' 쿼리 파라미터로 변환합니다.

추가 팁 🧐

왜 'aio' 파라미터를 여러 개 합쳐서 넣을까?

여러 옵션을 하나의 키(aio) 밑에 세미콜론으로 이어붙이면 URL이 깔끔해지고 쿼리 파라미터 키가 너무 많아지는 걸 방지할 수 있어요.
quality 값이 없으면 어떻게 될까요?

만약 quality가 주어지지 않으면 기본 품질 설정을 유지하거나 서버 쪽에서 기본값이 사용됩니다.
더 다양한 옵션 추가하기

필요하다면 aioParams.push(...) 부분을 확장해서 다른 이미지 최적화 옵션(예: 포맷 변환, 크롭 등)도 추가할 수 있어요.

이렇게 간단한 함수 하나로 이미지 URL을 동적으로 최적화할 수 있다는 게 Nitrogen AIO의 매력 중 하나랍니다! 만약 실제 프로젝트에 적용한다면, 이미지 로드시 항상 원하는 크기와 품질로 이미지를 불러오게 되어 사용자 경험이 한층 좋아질 거예요.

더 궁금한 점 있으면 언제든 물어보세요! 😊

2025년 최신 이미지 최적화 기술과 활용법 총정리

이미지 최적화, Next.js 내장 API 대신 클라우드 연동하기

예시: loader.js 파일

추가 팁!

이 함수가 하는 일?

어떻게 쓰나요?

여기서 알면 좋은 팁!

추가로 알아두면 좋은 점

예제 로더 구성

Akamai 예시 코드

조금 더 유용한 팁!

AWS CloudFront 이미지 최적화 로더

Cloudinary 이미지 최적화 로더

한 줄 요약

Cloudflare 이미지 로더 함수

Contentful 이미지 로더 함수

추가 팁

Fastly와 Gumlet 이미지 로더 비교

빠르게 정리하는 팁!

ImageEngine

Imgix

한 번에 비교해보는 주요 파라미터

참고 팁

PixelBin 이미지 로더 함수

Sanity 이미지 로더 함수

추가 팁!

Sirv 이미지 로더

Supabase 이미지 로더

추가 팁 — Next.js와 함께 쓸 때

Thumbor와 ImageKit.io 이미지 로더 함수 비교

Thumbor

ImageKit.io

비교 및 팁

한마디

Nitrogen AIO

코드 설명

추가 팁 🧐