Skip to main content

Examples

Set the deviceSizes​

next.config.js
module.exports = withExportImages({
  images: {
    deviceSizes: [640, 960, 1280, 1600, 1920],
  },
})

Set the placeholder​

<Image src="/img.png" width={1280} height={640} alt="" placeholder="blur" />

Use next/image separately from image components to be optimized at build time​

CMSImage.tsx
import { ImageLoaderProps, ImageProps } from 'next/image'
import { FC } from 'react'

type Props = ImageProps

const CMSLoader = ({ src, width, quality }: ImageLoaderProps) => {
  // Demo: https://static.imgix.net/daisy.png?auto=format&fit=max&w=300
  const url = new URL(`${config.path}${normalizeSrc(src)}`)
  const params = url.searchParams

  params.set('auto', params.get('auto') || 'format')
  params.set('fit', params.get('fit') || 'max')
  params.set('w', params.get('w') || width.toString())

  if (quality) {
    params.set('q', quality.toString())
  }

  return url.href
}

const CMSImage: FC<Props> = (props) => {
  return <Image loader={CMSLoader} {...props} />
}

export default CMSImage