Next/Image - Limit Fill to no more than max width/height of original image

[jrobsontull]

Goals

• Have Next/Image in fill mode deliver no more pixels than maximum dimensions of the original image

OR:

• Expose the original dimensions of the untransformed image in Next/Image

Background

Currently, Next/Image when set to fill={true} fills its parent container, no matter the dimensions of the original image. This results in low resolution images being larger than their original dimensions. Using Next/Image with specific width and height is a way to overcome this but this prevents the images from being as dynamic with relation to their size.

Because we do not know the image dimensions of fill={true} images ahead of time, this makes maintaining aspect ratio sometimes troubling, as seen by the numerous stack overflow posts: 1, 2, 3, 4 (some examples).

One implementation that sometimes works depending on the device is making use of naturalWidth and naturalHeight:

const ResponsiveImage = (url) => {
  const [meta, setMeta] = useState({ loaded: false, x: 0, y: 0 });
  return (
    <li className="relative flex h-full w-full items-center justify-center">
      <Image
        src={url}
        width={2000}
        height={2000}
        quality={100}
        sizes="100vw"
        alt="Post Image"
        className={`relative h-full w-full object-contain object-center`}
        style={{
          maxWidth: meta.loaded ? meta.x : 'none',
          opacity: meta.loaded ? '1' : '0',
        }}
        onLoadingComplete={(image) => {
          setMeta({
            loaded: true,
            x: image.naturalWidth,
            y: image.naturalHeight,
          });
        }}
      />
    </li>
  );
};

In situations where I know no image to bigger than certain dimensions (in the above example 2000px), I can use load images with width and height set to `2000` and then the `naturalWidth` and `naturalHeight` of the image should be close to the original dimensions of the image. Combined with `sizes={100vw}`, we still get a srcset for different screens and can deliver optimised images. The issue with this approach is that `naturalWidth` and `naturalHeight` can be modified by browsers and may not be correct [(reference)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/naturalWidth). We have seen this behaviour. This implementation would also require some work for it to handle browser resize events.

Proposal

If the original dimensions of the image were exposed within onLoadingComplete, a max-width and/or max-height could be set with styling. This would prevent the image from becoming larger than its original size.

An alternative approach would be to limit the size of image served by Next/Image when its fill mode is set to true. I imagine that to generate differently sized images, Next/Image must know the original dimensions of the image so this could be used to limit the maximum image size available.

This would solve a huge range of styling problems associated with Next/Image, an incredibly useful tool for optimising web performance.