I need fixed height, full width next/image (imagine a horizontal stripe image). I could wrap it in a div with position="relative", fixed height and full width, and use layout="fill" on the image itself. However, this way I would still have to fetch full size image (that's what happens with layout fill). What is the most performance optimal way to achieve this?
Next image with fixed height and full width
Viewed 127
1 Answers
Consider that nextjs has no idea what size the image will be displayed at runtime. The user agent will check if a srcset attribute exists and fetch the image from the matching URL.
From the documentation it looks like this can be achieved in NextJs by setting device sizes and image sizes as appropriate
Related