ExportedImage causes Layout shift according to Lighthouse about next-image-export-optimizer HOT 7 CLOSED

Hi @kopino4,

Thanks for the bug report. Could you please provide an example implementation of the ExportedImage component that causes a layout shift?

from next-image-export-optimizer.

Hi @Niels-IO,

This is an example of a usage with static image import, CAUSING Layout shift.

        <ExportedImage src={photo} alt="photo" layout="responsive" />

If i replace it with Image, everything works fine. NO Layout shift:

        <Image src={photo} alt="photo" layout="responsive" />

If i wrap the ExportedImage with an optimistic apect ratio, so that the height has some margin of safety. NO Layout shift:

      <div
        style={{
          width: '100%',
          aspectRatio: '1',
          position: 'relative',
          alignSelf: 'center',
        }}
      >
        <ExportedImage src={photo} alt="photo" layout="responsive" />
      </div>

The layout shift is very small. Not visible with the eye, but Lighthouse test recognizes it. Is it possible that you also set the aspect ration in your component but the result get rounded up/down? For example the aspect ratio of the image is 0.123 but the calculation results in 0.124? Just an idea.

Thanks

from next-image-export-optimizer.

Hey @kopino4,

For statically imported images, I had to wrap the ExportedImage component in another div that gets an aspect ration style prop. So the reason can very well be what you described with a rounding error. Could you please try to test it without the aspectRatio style prop in your outer div?
Thanks

from next-image-export-optimizer.

Hey @Niels-IO,

As expected, without the aspect ratio set in the outter div, Layout shift occurs:

      <div
        style={{
          width: '100%',
          position: 'relative',
          alignSelf: 'center',
        }}
      >
        <ExportedImage src={photo} alt="photo" layout="responsive" />
      </div>

The original dimensions of the source image are 1024 x 768. Which results into a 1,33333333 aspect ratio. If it gets rounded to 1.3330 somewhere. This could be it.

from next-image-export-optimizer.

Hi @Niels-IO ,

I think the issue is in the format of your aspect ratio. Look at the following situations:

WorkingOutterDiv (apect-ratio is applied to the div):

BrokenOutterDiv (aspect-ratio gets ignored because of the trailing px at the end):

This is because of the calculation you use in your ExportedImage implementation

style={{
    aspectRatio: 1024/768,
}}

Results in aspect-ratio:1.33333333px, which is an Invalid format for aspect-ratio

style={{
    aspectRatio: (1024/768).toString(),
}}

Results in aspect-ratio:1.33333333

from next-image-export-optimizer.

Hi @kopino4,

I have trouble reproducing your findings, unfortunately. Are you using the current version 0.14.5?

Your code here works for me without a layout shift:

<div
        style={{
          width: '100%',
          position: 'relative',
          alignSelf: 'center',
        }}
      >
        <ExportedImage src={photo} alt="photo" layout="responsive" />
      </div>

Also, the aspect ratio is calculated as expected:

from next-image-export-optimizer.

Hey @Niels-IO,

thanks to your answer I tried to update the react and nextjs version in my package.json.

This fixed the issue

from next-image-export-optimizer.