Next image dynamic size and aspect ratio - css

Question

I'm creating a blog page using next.js with one main image for each post. The image is of unknown dimensions and an unknown aspect ratio (as each post has a different image). How can I make the image maintain its own aspect ratio and just scale on smaller screens without specifying a fixed height?
I'm forced to use fill with a fixed height container, but that just distorts the image due to the fixed height. The first image below is next/image with fixed height, and the one below it is a plain img tag. How can I get next image to behave like the img tag with dynamic images?
I want each image to maintain its initial aspect ratio, but not lock all images to the same aspect ratio. Is it even possible as it will break next.js rule on layout shift?
Code for next image:
<div className="container relative imageContainer rounded-lg mb-4 overflow-hidden max-w-7xl">
<Image
src={props.post.imageUrl}
alt={props.post.title}
layout="fill"
/>
</div>
imageContainer CSS:
.imageContainer {
height: 30rem;
}
Code for img tag:
<img
className="rounded-lg mb-4 "
src={props.post.imageUrl}
alt={props.post.title}
></img>

Answer 1

One of the main goals of next/image is performance-related, which as you mentioned, involves the elimination of CLS entirely by always requiring some dimensions.
You have a couple of options here.
Option 1 - Use local images
If you are storing all of your blog images with the source code in some sort of /assets folder, you can import them and use them like so and they will not require width or height and will assume their original dimensions (source docs)
import localImage from './assets/some-local-image.png'
function ExampleComponent() {
return (
<Image
src={localImage}
alt="local image"
/>
)
}
Option 2 - Use getStaticProps + probe-image-size
I'm assuming you're reusing a single, generic <Post /> component or something similar, so if you wanted to dynamically grab widths and heights from a list, you could retrieve that info server-side in getStaticProps and pass as props to the component. This comes with a slight performance hit on your server, but assuming you're not regenerating these images often, it shouldn't be a huge problem.
import probe from 'probe-image-size'
function ExampleComponent(props) {
return (
<Image
src={props.img.src}
width={props.img.width}
height={props.img.height}
alt={props.img.alt}
/>
)
}
export async function getStaticProps() {
// Probably will come from a route param, etc.
const imgPath = '/public/some-path.png'
const img = fs.createReadStream(path.join(process.cwd(), imgPath))
// Read img dimensions
const probedImg = await probe(img)
return {
props: {
img: {
width: probedImg.width,
height: probedImg.height,
src: imgPath,
alt: 'some dynamic alt attribute'
}
}
}
}
Option 3 - use an image CDN
Most image CDNs will give you the ability to transform images on the fly and will provide all of these properties for you. You can set them up with a custom Next.js loader.
Option 4 - use the regular <img /> HTML tag
If none of the above solutions work, it's likely that image optimization isn't your #1 concern, and therefore, using the native image tag works totally fine and shouldn't cause any conflicts with other Next.js <Image /> elements on your page.