Adjust opacity/transition injected into image tag

🆘 Support
1

We’re using the out of the box Dato SDK to bring in images from Dato in conjunction with our React app. I’ve noticed that the images are getting injected with a 500ms opacity transition, code example below. While this is fine for images further down the page it seems to be impacting our page performance as that delay ultimately impacts the largest contentful paint from what I can tell.

<img src="https://www.datocms-assets.com/103631/1704222087-purrs-advance-hero-1.png?auto=compress%2Cformat" 
alt="Purrs Advance for Cats" 
style="opacity: 1; 
transition: 
opacity 500ms ease 0s; 
position: absolute;
left: 0px; top: 0px;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
object-fit: contain;
object-position: center center;"
>

I attempted to add in some parameters (lazyLoad={false} and fadeInDuration={0}) to the returned image object (below is what we have in place right now) but that didn’t seem to do the trick, any other ideas?

return (
    <div
      ref={observe}
      style={{
        width: '100%'
      }}
    >
      <DatoImage
        {...params}
        data={{
          ...data,
          srcSet,
          // We override implicit sizes because we use a dynamic srcSet with dpr
          sizes: undefined
        }}
      />
    </div>
2

Hi @andrew.kerr, can you please share more of that code snippet, like what params and data are showing? In my tests, setting fadeInDuration={0} should remove the opacity animation.

image
image1920×753 75.5 KB

If that’s not the case for you, can you please provide the entire file (or as much of it as you can share) so we can take a look at what might be going on?

Thanks!

3

Hey Roger, thanks for the reply, I was misinterpreting the documentation and placement of the params, with your example I was able to get it working, thanks.

1 Like