Next Image Alternative

What is it?

Next Image Alternative(i.getavif.com) is a service that fetches images on demand, converts them to AVIF or WebP, and caches the result. Use it as a custom loader for next/image so your existing <Image src="/photo.png" /> keeps working while getting modern formats and CDN caching.

API

Format defaults from request Accept header (avif if supported, else webp, etc.).

Usage

1. Full URL

When the image is publicly accessible, pass the full URL:

https://i.getavif.com/?url=https://example.com/photo.png
https://i.getavif.com/?url=https://cdn.xxx.com/img/abc.png&w=800&q=80

2. Path + origin

For relative paths like /photo.png, pass url as path and origin as your site domain:

https://i.getavif.com/?url=/photo.png&origin=example.com
https://i.getavif.com/?url=/static/hero.jpg&origin=my-site.com&w=1200

origin may include or omit https://; url may include or omit leading /. Worker builds a valid URL.

Next.js Image integration

Use a custom loader so <Image src="/xxx.png" '/> becomes i.getavif.com URLs with url + origin.

1. next.config.js / next.config.ts

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    loader: "custom",
    loaderFile: "./src/image-loader.ts",
	path: "https://i.getavif.com/",
	remotePatterns: [],
  },
};

module.exports = nextConfig;

2. src/image-loader.ts

In development, i.getavif.com cannot reach localhost, so the loader uses Next default; in production it uses i.getavif.com.

type ImageLoaderProps = { src: string; width: number; quality?: number };

export default function getavifLoader({ src, width, quality }: ImageLoaderProps) {
  const isDev = process.env.NODE_ENV === "development";
  if (isDev) {
    const params = new URLSearchParams({ url: src, w: String(width) });
    if (quality != null) params.set("q", String(quality));
    return `${params.get('url')}`;
  }
  const isFullUrl = src.startsWith("http://") || src.startsWith("https://");
  const params = new URLSearchParams({
    url: isFullUrl ? src : src.startsWith("/") ? src : `/${src}`,
    w: String(width),
  });
  if (!isFullUrl) params.set("origin", process.env.NEXT_PUBLIC_SITE_ORIGIN ?? "your-domain.com");
  if (quality != null) params.set("q", String(quality));
  return `https://i.getavif.com/?${params}`;
}

3. Environment variable (optional)

NEXT_PUBLIC_SITE_ORIGIN=your-domain.com

Set NEXT_PUBLIC_SITE_ORIGIN in .env so the loader can build the origin for path-based src.

Is the service stable?

i.getavif.com is deployed on Cloudflare. In theory it has the same stability as other services on Cloudflare; we trust Cloudflare's service reliability.

Is the service free?

i.getavif.com currently uses Cloudflare's free tier, so we don't charge anything. You can optionally sponsor the project to help us upgrade to better Cloudflare plans.

Is image data safe?

Rest assured: the service does not use any means to view or download your images.