lighthouse fail of images

[justinblayney]

hello,

I love this plugin but it is causing me to fail with google page speed insights in a few spots.

Next.js has lazyloading built in if I use its < Image /> component which helps with all my other images.

is there a way to rewrite the following to use that?

	<ReactCompareSlider
  itemOne={<ReactCompareSliderImage src="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" srcSet="https://res.cloudinary.com/djk8wzpz4/image/upload/v1611180870/MCA-pixel-portrait_jqm50p.jpg" alt="Image one" />} 

[justinblayney]

or just use a regular img tag within ReactCompareSlider (which i could swap out for next Image)

[nerdyman]

Hi @justinblayney, thanks for opening the issue.

The library is flexible and accepts any type of React component so you can use Next's Image component and optionally apply the styles used by ReactCompareSliderImage to make your component scale the same way, like so:

import { Image } from 'next/image';
import { ReactCompareSlider, styleFitContainer } from 'react-compare-slider';

// ...
<ReactCompareSlider
	itemOne={<Image alt="image 1" src="https://via.placeholder.com/200x200" style={styleFitContainer()} />}
	itemTwo={<Image alt="image 2" src="https://via.placeholder.com/400x400" style={styleFitContainer()} />}
/>

The docs provide more details on styleFitContainer.

Let me know if this solves the issue :)

Also, if possible, can you provide the issues reported by Lighthouse?

ReactCompareSliderImage renders a standard img tag so it shouldn't cause any performance or accessibility issues. The only warnings I can see from running the demos in Lighthouse are from Storybook.

[justinblayney]

Hello, that did it, thank you. It was Eliminate render-blocking resources for sure and either First Contentful Paint or Largest Contentful Paint

[justinblayney]

it also jumped my mobile score from 64 to 80 on just one slide..

[nerdyman]

Sweet! Thanks for opening the issue.