PrismicNextImage explicit width and height

Developing with Prismic
1

Hello Prismic People!

As I have just jumped from a Gatsby+Prismic Project to a Next+Prismic project, I am loving the slice machine. Kudos to the team!

In one of my slices, I'm using something that looks like this:

<PrismicNextImage field={herofigure} priority={lcp} imgixParams={{w: 260, h:400}} />

My question is related to the lighthouse critical warning:

Image elements do not have explicit width and height

I see in the @prismicio/next documentation it says:

It automatically forwards the image’s URL and dimensions to next/image. It accepts all next/image props except src, width, and height.

How then can I/we address the no explicit width/height issue?

Additionally, when I use PrismicNextImage, lighthouse dings me on best practices as follows:

Serves images with low resolution

When I replace with next/future/image these issues go away but then my LCP takes a huge hit. Oy! :face_with_head_bandage:

Thank you! :pray:

2

Hi Neil!

Glad to hear you're liking Slice Machine! :slightly_smiling_face:

width and height props

I just published an update to @prismicio/next, v0.1.6, that allows the width and height props on <PrismicNextImage> to override the image's intrinsic dimensions. The width and height props should be used over imgixParams's w and h properties.

You can update to the latest version with the following command:

npm install @prismicio/next@latest

The dimension props can only be provided when layout is set to intrinsic (the default) or fixed. If layout is set to responsive or fill, the image's intrinsic width and height will be used automatically, so the width and height props are not allowed.

You can find more details and examples on GitHub here: feat: support `width` and `height` props in `<PrismicNextImage>` when layout is `intrinsic` or `fixed` by angeloashmore · Pull Request #42 · prismicio/prismic-next · GitHub

Lighthouse warning

Regarding the Lighthouse warning, the above mentioned update will not resolve it. next/image does not add width or height attributes to images by design. The warning is supposedly a bug in Lighthouse since the image's wrapper container provides dimensions (see relevant issue here).

next/future/image changes this design by adding width and height attributes explicitly. <PrismicNextImage> does not yet support next/future/image, but an update will be published once next/future/image becomes the default Next.js image component.

<PrismicNextImage> is a light wrapper around next/image, so any LCP or Lighthouse warnings are likely from next/image, not the Prismic wrapper. Unfortunately, there isn't much we (Prismic) can do to resolve the Lighthouse issues, so I recommend submitting an issue to the Next.js repository if this continues to be an issue.

If you have any additional questions, please let me know and I'll try to help. :slight_smile:

1 Like
3

Angelo,

Thank you so much for this. I just updated the package to the version you mentioned. I then tested adding the width="400" height="260" to the I was expecting to see explicit width and height attributes applied to the image element.

I'm not seeing it. (See code below).

I also then tried removing the width/height and tested the layout="fluid" just to see what behavior I'd get with that, and my image ended up with 0 width and was therefore invisible. Yikes. Is this just me?
New JSX

<PrismicNextImage
  field={herofigure}
  priority={lcp}
  width="260"
  height="400"
  layout="intrinsic"
  className="rounded"
/>

(full URLs removed)

<img 
  alt="Book" 
  srcset="Fresh.png?auto=compress%2Cformat&amp;rect=0%2C0%2C260%2C400&amp;w=384&amp;fit=max 1x, Fresh.png?auto=compress%2Cformat&amp;rect=0%2C0%2C260%2C400&amp;w=640&amp;fit=max 2x" src="Fresh.png?auto=compress%2Cformat&amp;rect=0%2C0%2C260%2C400&amp;w=640&amp;fit=max"
  decoding="async" 
  data-nimg="intrinsic" 
  class="rounded"
  style="position:absolute;top:0;left:0;bottom:0;right:0;box-sizing:border-box;padding:0;border:none;margin:auto;display:block;width:0;height:0;min-width:100%;max-width:100%;min-height:100%;max-height:100%">
4

Hey Neil,

Even after adding width="400" height="260", next/image (and <PrismicNextImage> as a result) won't add width and height attributes to the <img> element. This is how next/image is designed. Instead, you'll see one of the adjacent <img> attributes with an SVG source that contains the correct width and height dimensions.

Once next/future/image becomes the default image component in Next.js, the width and height attributes will be added. This should happen in the next major release, Next.js 13.

layout="fluid" is an invalid value and will throw in development. You can set layout to one of the following:

  • "intrinsic"
  • "fixed"
  • "responsive"
  • "fill"
  • undefined

Each value is described here: next/image | Next.js

The component should work provided one of those values are used.

If you are still seeing issues with <PrismicNextImage>, could you share how you are querying your content? Additionally, could you share what your herofigure variable looks like? I'm curious if it contains the whole image object.

Thanks!

1 Like
5

Thank you Angelo!

I've started a new Next+Prismic prototype using NextJS 13. When using PrismicNextImage I get the warning:

[next] Image with src "https://images.prismic.io/*redacted*fundraising.jpg?auto=compress,format" has legacy prop "layout". Did you forget to run the codemod?

I am assuming this due to PrismicNextImage using the "old" next/image, is that correct?
Is there a timeframe whereby users of Next13 and up can reasonably expect PrismicNextImage to work with the new next/image (formerly next/future/image)?

With gratitude,
Neil

6

In the event that anyone stumbles upon this thread before PrismicNextImage is patched for NextJs version 13, here's the custom component I'm using to bridge the gap:

// Image.js inside the components directory
import Image from 'next/image'

const NextImage = props => {
  const { field } = props
  return (
    <Image
      src={field.url}
      alt={field.alt || ''}
      className={props.className || ''}
      width={props.width || field.dimensions.width}
      height={props.height || field.dimensions.height}
      priority={props.priority}
    />
  )
}
export default NextImage
1 Like
7

Hi @nf_mastroianni, sorry for the delayed reply. You are correct; @prismicio/next currently does not support Next 13.

I am working on updating <PrismicNextImage> to support the new next/image component. We will likely make this a breaking change on the package since supporting both Next 12 and Next 13 is not simple.

Updates can be seen on GitHub here: feat: support Next 13 by angeloashmore · Pull Request #48 · prismicio/prismic-next · GitHub

1 Like