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.

[Pau]

Is it possible that you're looking at a similar or different slice with almost identical image sizing configurations? This could explain why you're seeing just one. If you've set up the image field with specific sizing constraints, those should automatically appear during document selection.

If this doesn't seem to be the case and you're still unable to see the image fields, please share a recording in the support portal, and we'll take a closer look.