PrismicNextImage and Responsive Views Explanation

[matt8 (sonsofnero Hay)]

Can someone explain and show an example on how to render a responsive image using PrismicNextImage and the Responsive Views option in Prismic. Here is and example of an image, what is rendered and a screenshot of an example Responsive View:

<PrismicNextImage
  field={data.feature_image} 
  width={900}
  height={500}
  loading="lazy"
  sizes="(max-width: 600px) 100vw, (max-width: 1023px) 48vw, 48vw"
  className="w-full h-full object-cover transition-all ease-in-out duration-300 group-hover:scale-110 aspect-video"
/>

feature_image: {
  dimensions: [Object],
  alt: 'Alt Goes Here...',
  copyright: null,
  url: 'https://images.prismic.io/*redacted*/*redacted*_002.webp?auto=format,compress',
  id: 'ZnGqbZm09995VX12gX',
  edit: [Object]
},

[Pau]

Hey team. When rendering responsive images with <PrismicNextImage> you can either use multiple <PrismicNextImage> components and control which image to display through CSS media queries, allowing different images to load based on the viewport size. This method is recommended because it takes full advantage of Next.js's image optimization and tends to offer better performance.

Or, you could use asImageWidthSrcSet() with a standard <img> tag. This will generate the src and srcSet attributes to simulate the responsive views from Prismic’s image field. While both methods are effective, using multiple <PrismicNextImage> components tends to be simpler and more aligned with Next.js's optimization capabilities.

[matt8 (sonsofnero Hay)]

@Pau thank you for the reply. This makes sense but where I'm really struggling is how to access those responsive image. Please see these screenshots. In my slice, I have an Image Field - I have added a responsive view of "main" and "mobile_image". If you upload and image, I'm not given the option to crop the "mobile_image" nor are the thumbnails available in the slice. Can you please provide a code example on how to best utilize this feature? Any assistance would be appreciated.