Better Nextjs Responsive Image Breakpoints

The Image Candidates List

The (Nextjs image component)[https://nextjs.org/docs/api-reference/next/image] enables us to easily provide Image Optimisation for either locally stored media, or by using a loader, from the Dynamic Media services from Cloudinary or Imgix.

Responsive Images using 'srcset' enables us to pass a 'candidate list' to the User Agent (the browser) such that it can select one most appropriate for the circumstances. The candidate list typically provides a series of variants of the same image but in different dimensions (using a w descriptor to advice the User Agent of their widths) - the user agent then uses details such as the viewport width, and device pixel density to choose the best dimension (typically the next size above - this is determined by the browser developer).

When using next/image the series of image dimensions provided are managed in next.config.js and the defaults are :

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
  },
}

deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840]

.... kb spreading considerations in the srcset candidate list... and CDN caching efficiency