imagenext.jsimage-resizingimgix

Next.js and imgix image optimisation without knowing its size


I need to render images on my statically built Next.js website and I would like to do it according to today's best practices.

I have seen that Next.js includes next/Image which takes care of most optimisation out of the box. Given I won't have images saved in multiple sizes, I was looking at imgix to do this for me.

How I envisioned this setup is, I dump all images in an S3 bucket (I only know the filename) which will be used by imgix. Given the filename and a width requirement, I would then leave it to next/Image to resize and render the images via its imgix loader.

Where I get confused is, the Next.js docs mention both the width and height should be known prior. How would I know the height if I only provide the width to imgix and let it do its resize magic?

I am sure I am missing something obvious here, but a pointer would be highly appreciated.


Solution

  • I ended up uploading to imgix at build time, which would also return me the image's dimensions. Based on those I calculated the ratio, and based on that and the desired width, I could compute the height as well.