Responsive Views/Images

Developing with Prismic
1

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

2

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.

4

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

5

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
7

Thank @Pau :slight_smile:

2 Likes
9

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

11

Hello @jon1

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

Thanks,
Priyanka

15

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

17

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.

19

@Pau Shouldn't be easier to provide a helper function that detects the width of the viewport or the html parent element containing the image? then these dimensions could be sent to imgix dynamically to create responsive images on demand. Also it would be great if you could add a feature to specify the focus point when using an image, DatoCMS does this and it also uses imgix behind the scenes

20

@riuciadmin Thanks for these ideas. I'll make sure that they are added to the feature request tracker.

21

Hey i just realized that this issue was fixed a few months ago with the release of 0.5.1. You can see the changelog here :