gatsby-plugin-image missing fadeIn option

[lnikell]

Description

We migrate from Gatsby v2 to v3, unfortunately, there are some issues that are coming along the way. Lighthouse will penalize your website if it has animation on images in the hero section especially, so in v2 we used fadeIn={false} to have better scores. However in v3 with gatsby-plugin-image it is not possible and the only way of overriding it is ugly CSS !important styles.

It would be nice to have that option in v3 to so it makes the migration process smoother and will result in better performance scores.

[kelvindecosta]

Hello!

The placeholder option when set to "none" fades the images in once they are loaded, without any layout shift.

I think it might help with the migration and performance scores.

[lnikell]

Hi @kelvindecosta, placeholder NONE does not remove fade in animations. There is no issues with layout shifting, animation affects on LCP.

[MANTENN]

Fortunately, the animation is done with CSS--with the help of JS.

Set the opacity to 1 and set no transition on elements within the container class that have the eager loading attribute.

This is the selector

.gatsby-image-wrapper [data-main-image] {

[sn3h]

this is not a solution, just temporary hack.. the css selector may change and u'll never know

:( fadeIn needs to be boolean and fadeInSpeed reintroduced, or turned off completely, at least for placeholder : none

[allankiezel]

Bumping this. The fade-in is pretty brutal on above the fold images and does have an impact on google pagespeed.

[tlehren]

Bumping as well, is there any solution?

[robmarshall]

Not too fussed about stopping the animation CSS. I would like to remove the base64 weight from the page completely - never have it added.

[DennisKraaijeveld]

Just wanted to let you guys know that I also have been struggling with LCP and I thought (and hoped) that Gatsby Image was the cause of this. I think it is really the easy was to just think it's the image and I also thought this was my main problem. So I did tried all the tips I did read about here and on other places, like using the .gatsby-image-wrapper [data-main-image] { selector. But things got worse and worse.

My LCP was round 4-5s. I did some code splitting, removed the css selector and just let Gatsby Image do her work and kaboom, 0,8s LCP. Still need some other improvements btw..

[ErikAGriffin]

Just wanted to let you guys know that I also have been struggling with LCP and I thought (and hoped) that Gatsby Image was the cause of this. I think it is really the easy was to just think it's the image and I also thought this was my main problem. So I did tried all the tips I did read about here and on other places, like using the .gatsby-image-wrapper [data-main-image] { selector. But things got worse and worse.

My LCP was round 4-5s. I did some code splitting, removed the css selector and just let Gatsby Image do her work and kaboom, 0,8s LCP. Still need some other improvements btw..

How did you do your code splitting? Could you link to any resources on this

[dev-searchengineunity]

I would also like to know as well. Thanks in advance!

[MikeBroders]

hey, for me it's less the effect to core vitals... it's more the visual effect when you need to use rehydration... the page visibility loads twice. without the fade in effect of GatsbyImage at least you wouldn't recognise it. so a fade option would be really helpful.

[viidn]

Any update around here?