In addition to statically imported images you can even use the NextJS Image component with urls. This gives us a number of the same optimization benefits we’ve previously covered with static images and additionally it even works if the image is hosted on remote servers.

Dimensions Required

The first thing to be aware of when using URLs for images is that a predefined height and width are required. This is used for image optimization and for preventing layout shifts.

The below example demonstrates this by using a local image url.

app/basic/page.tsx

import Image from "next/image";

export default function Page() {
  return (
    <div>
      <Image alt="dog" src="/images/dog.png" width={960} height={960} />
      <div>Nice Doggy</div>
    </div>
  );
}

Note that:

the width and height are used as a part of the image optimization
you need to preserve the original image aspect ratio otherwise there will be a layout shift

Fill

If the width and height of the source image is not known to you. The image component also provides a fill prop which allows you to scale the image with the dimensions determined by its container.

For this to work,

the parent needs to have position set to relative | fixed | absolute to make it a layout root.
the image automatically uses relative positioning to attach itself to the parent.

This is demonstrated in the below example.

app/fill/page.tsx

import Image from "next/image";

export default function Page() {
  return (
    <div
      style={{
        position: "relative",
        width: 480,
        height: 480,
      }}
    >
      <Image fill alt="dog" src="/images/dog.png" />
    </div>
  );
}

ObjectFit

By default If you don’t want to skew an image placed in a container that doesn’t the provide a matching aspect ratio, you can scale the image instead by using the CSS property called objectFit.

This is demonstrated below:

app/object-fit/page.tsx

import Image from "next/image";
import { Column } from "./Column";

export default function Page() {
  return (
    <Column>
      <div
        style={{
          background: "lightgray",
          position: "relative",
          width: 480,
          height: 240,
        }}
      >
        <Image
          fill
          style={{ objectFit: "cover" }}
          alt="dog"
          src="/images/dog.png"
        />
      </div>
      <div>Nice Doggy</div>
    </Column>
  );
}

Fill Cheatsheet

To recap, for an Image with fill, the options for a parent that doesn't have a matching aspect ratio are:

default: the image is skewed
objectFit: contain: the image is scaled down, extra space is left empty
objectFit: cover: the image is scaled up, the edges of the image are trimmed

Remote Images

The optimizations and features we have looked at for local url images even work for remote urls, but in order for nextjs to download and optimize images from remote servers we need to explicitly add the remote domains to the images allow list.

As an example, the following adds booleanart.com as a valid url for Image components:

const nextConfig: NextConfig = {
  images: {
    domains: ["booleanart.com"],
  },
};

This is demonstrated in the example below:

app/remote/page.tsx

import Image from "next/image";

export default function Page() {
  return (
    <div>
      <Image
        alt="dog"
        src="https://booleanart.com/images/examples/dog.png"
        width={960}
        height={960}
      />
      <div>Nice Doggy</div>
    </div>
  );
}

Transcript