Skip to content
Visit Cloudflare Image Optimization on GitHub
Set theme to dark (⇧+D)

Integration with frameworks

Next.js

Image Resizing can be used automatically with Next.js' next/image component. With a custom loader which applies Cloudflare Image Resizing, next/image will set an optimal width and quality for a given client.

import Image from "next/image";
const normalizeSrc = (src) => {
return src[0] === "/" ? src.slice(1) : src;
};
const cloudflareLoader = ({ src, width, quality }) => {
const params = [`width=${width}`];
if (quality) {
params.push(`quality=${quality}`);
}
const paramsString = params.join(",");
return `/cdn-cgi/image/${paramsString}/${normalizeSrc(src)}`;
};
const MyImage = (props) => {
return (
<Image
loader={cloudflareLoader}
src="/me.png"
alt="Picture of the author"
width={500}
height={500}
/>
);
};