Responsive Views/Images

I'm a little confused with the responsive views/images feature and how Prismic or Imgix creates smaller width variations of an uploaded image? If it even does that? The docs are not particularly clear.

I'm using srcret and sizes but I'm getting Lighthouse warnings to use images that are properly sized on mobile. Does Prismic create smaller variations of an uploaded image for the browser to display what it thinks is the best size for a particular viewport size?

I have created a 'mobile' sized variant for one image upload, and using the picture tag can display the larger image for desktop and smaller mobile variant on mobile - works perfectly well. Is it a case of creating views in Prismic for a variety of sizes? Seems a lot of work?

Any insight on this would be helpful

Thanks

Hello @jon1, thanks for reaching out.

Yes, that's precisely how you should handle responsive views on Prismic. After you define these constraints, you'll see the thumbnails in the API response of the Image field. You can add as many as you need.

Thanks @Pau, is there a way to not set a height for a responsive view? It seems in Slice Machine I can't just add the width, each view has to have a height added? Only the main image can I leave the height field empty. Sorry if this is simple stuff, in other CMS's these options have been more fleshed out in the past.

Thanks

Hey @jon1, thanks for the additional information. I just tested it with Slice Machine, and I can confirm that this is an issue. I've passed it to the dev team. We'll update this thread when we have news.

1 Like

Thank @Pau :slight_smile:

2 Likes

Hi @Pau, is there any update on this fix?

Hello @jon1

We haven't received any update on the issue at the moment. I have sent a reminder to the team.

Thanks,
Priyanka

Hi @Priyanka,

Is there any update on this yet? I feel it is an area which needs fixing, as Slice Machine is not behaving how the documentation explains it does.

Thanks

Hey @jon1, we've added this to our product board as an enhancement request, we will tackle these kinds of requests for the simulator in the near future.