image optimization

23 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

next/image introduced in v10.0.0

The next/image module was first introduced in Next.js version 10.0.0.

layout prop added in v10.0.1

The layout prop for the Image component was added in Next.js version 10.0.1.

Differentiating cache entry types in custom handler

The kind property in the cache handler methods can be used to differentiate between cache entry types. For image entries, kind will be 'IMAGE' and the data will include buffer, etag, extension, and revalidate properties. This allows handling images separately if needed, such as implementing an eviction policy or storing images in a different location.

images.customCacheHandler configuration for image optimization caching

Set images.customCacheHandler to true in next.config.js to enable the cacheHandler for caching optimized images from next/image. Example: module.exports = { cacheHandler: require.resolve('./cache-handler.js'), images: { customCacheHandler: true } }. This opt-in flag will become the default behavior in the next major version.

AWS CloudFront image loader configuration

Example loader for AWS CloudFront: export default function cloudfrontLoader({ src, width, quality }) { const url = new URL(`https://example.com${src}`); url.searchParams.set('format', 'auto'); url.searchParams.set('width', width.toString()); url.searchParams.set('quality', (quality || 75).toString()); return url.href }

Cloudinary image loader configuration

Example loader for 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}` }

Cloudflare image loader configuration

Example loader for Cloudflare: 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}` }

Contentful image loader configuration

Example loader for Contentful: 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 }

Fastly image loader configuration

Example loader for Fastly: export default function fastlyLoader({ src, width, quality }) { const url = new URL(`https://example.com${src}`); url.searchParams.set('auto', 'webp'); url.searchParams.set('width', width.toString()); url.searchParams.set('quality', (quality || 75).toString()); return url.href }

Gumlet image loader configuration

Example loader for 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()); return url.href }

ImageEngine image loader configuration

Example loader for ImageEngine: export default function imageengineLoader({ src, width, quality }) { const compression = 100 - (quality || 50); const params = [`w_${width}`, `cmpr_${compression}`]; return `https://example.com${src}?imgeng=/${params.join('/')}` }

Imgix image loader configuration

Example loader for Imgix: 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'); params.set('w', params.get('w') || width.toString()); params.set('q', (quality || 50).toString()); return url.href }

PixelBin image loader configuration

Example loader for PixelBin: 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` }

Sanity image loader configuration

Example loader for Sanity: 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 }

Sirv image loader configuration

Example loader for Sirv: 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 image loader configuration

Example loader for Supabase: 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 }

Thumbor image loader configuration

Example loader for Thumbor: export default function thumborLoader({ src, width, quality }) { const params = [`${width}x0`, `filters:quality(${quality || 75})`]; return `https://example.com${params.join('/')}${src}` }

ImageKit.io image loader configuration

Example loader for ImageKit.io: 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(',')}` }

Nitrogen AIO image loader configuration

Example loader for Nitrogen AIO: export default function aioLoader({ src, width, quality }) { const url = new URL(src, window.location.href); const params = url.searchParams; const aioParams = params.getAll('aio'); aioParams.push(`w-${width}`); if (quality) { aioParams.push(`q-${quality.toString()}`); } params.set('aio', aioParams.join(';')); return url.href }

Using loader prop alternative to custom loader file

As an alternative to configuring a custom loaderFile in next.config.js, you can use the loader prop to pass a loader function to each instance of the next/image component.

Custom image loader file requirements

The loaderFile must export a default function that receives an object with src, width, and quality properties, and returns a string URL. In the App Router, the loader file must use the 'use client' directive to serialize the function. The function signature is: export default function myImageLoader({ src, width, quality }) { return `...` }

Image loader function receives src, width, quality parameters

Image loader functions receive three parameters: src (the image source), width (the requested width), and quality (the quality setting, which defaults to 75 if not provided).

Akamai image loader configuration

Example loader for Akamai: export default function akamaiLoader({ src, width, quality }) { return `https://example.com/${src}?imwidth=${width}` }

Give your agent this brain