Next Image Alternative

是什么？

Next Image Alternative(i.getavif.com) 是一个按请求拉取图片、转为 AVIF 或 WebP 并缓存的在线服务。可作为 next/image 的 custom loader，原有 <Image src="/photo.png" />' 写法不变，即可获得现代格式与 CDN 缓存。

API

格式默认按请求的 Accept 头（支持 avif 则出 avif，否则 webp 等）。

使用方式

1. 完整 URL

图片在任意可公网访问的地址时，直接传完整 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. 路径 + origin

项目里习惯写相对路径 /photo.png 时，用 url 传路径、origin 传站点域名：

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 可带或不带 https://；url 可带或不带前导 /，Worker 会拼成合法 URL。

Next.js Image 接入

用 custom loader 把 <Image src="/xxx.png" '/> 转成上述带 url + origin 的 i.getavif.com 链接。

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

本地开发时 i.getavif.com 拉不到本机 localhost，图片会挂，所以 dev 下走 Next 自带；生产再用 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. 环境变量（可选）

NEXT_PUBLIC_SITE_ORIGIN=your-domain.com

在 .env 里设 NEXT_PUBLIC_SITE_ORIGIN，供 loader 拼 origin。

服务稳定吗？

i.getavif.com 部署在 Cloudflare 上，理论上和其他使用 Cloudflare 的服务一样稳定，我们相信 Cloudflare 服务的稳定性。

服务免费吗？

i.getavif.com 目前使用 Cloudflare 提供的免费服务，所以也不对外收取任何费用。当然你可以选择对项目进行赞助，这样可以升级使用 Cloudflare 更好的服务。

图片数据安全吗？

请放心，该服务不会使用任何技术查看或下载用户的图片。