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?
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.
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.
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.
@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
