Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details

The best Next.js & Sanity <Image/> Component

By Roboto Studio & Jono Alford

Okay, well it might be at least in the top 3. Using getDimensions and optimising the hell out of your images, check out this snippet

Size is dictated by image dimensions

import { ReactElement } from 'react';
import Image from 'next/image';
import { getImageDimensions } from '@sanity/asset-utils';
import { urlFor } from '~/lib/sanity';

export const IdealImage = ({ image }): ReactElement => {
  const alt = image?.alt ?? "An image without an alt, whoops";
  return (
    <div>
      ...
      {image?.asset && (
        <Image
          src={urlFor(image).url()}
          alt={alt}
          width={getImageDimensions(image).width}
          height={getImageDimensions(image).height}
          placeholder="blur"
          blurDataURL={urlFor(image).width(24).height(24).blur(10).url()}
          sizes="
            (max-width: 768px) 100vw,
            (max-width: 1200px) 50vw,
            40vw"
        />
      )}
      ...
    </div>
  );
};

Size is dictated by pre-defined size

import { ReactElement } from 'react';
import Image from 'next/image';
import { getImageDimensions } from '@sanity/asset-utils';
import { urlFor } from '~/lib/sanity';

export const IdealImage = ({ image }): ReactElement => {
  const alt = image?.alt ?? "An image without an alt, whoops";
  return (
    <div>
      ...
      {image?.asset && (
        <Image
          src={urlFor(image).width(1920).height(1080).dpr(2).url()}
          alt={alt}
          width={1920}
          height={1080}
          placeholder="blur"
          blurDataURL={urlFor(image).width(24).height(24).blur(10).url()}
          sizes="
            (max-width: 768px) 100vw,
            (max-width: 1200px) 50vw,
            40vw"
        />
      )}
      ...
    </div>
  );
};

If you're looking for a quick and easy snippet for implementing an image with Next.js, this is what you're looking for. There are two versions:

  1. A version where the image size dictates the size of the image on the page (this is what you would use if you want functionality closest to a default <img> tag).
  2. A version where the image adjusts using a pre-defined size. E.g. 1920px by 1080px (16:9 ratio).

One thing to notice is the dpr(value). If you're setting it to two, it's basically retina-ready but can massively impact performance. Think long and hard about adding this, but I've added it in for the hell of it.

Fancy trying to squeeze the very last drop out of your website performance? Get in touch with us; we've: been there, seen it, got the T-shirt with most questions.

Contributors

Other schemas by authors

Cursor Prompt

Thinking about getting started with AI? Well we're just going to share our latest and greatest prompt so you don't have to do the hard work

Portable Text Mock Content

If you're looking to mockup portable text in Storybook without a Sanity backend, this is the schema you're looking for