What are the benefits of this package?

[kopax]

Hello and sorry if it sounds dumb, I am reading the README.md on npmjs and it starts with:

• Optimize images using WebAssembly (runs in every environment)
• React components for different use-cases (responsive images, WebP conversion, lazy loading placeholders, image manipulation, ...)
• Build cache for images for faster builds
• Convert to WebP automatically during a webpack build
• Inline small images automatically

I then see that it depend on optimized-images-loader which I also read.

It seems that most of those features are possible with it. I am using react, what is the major addition you have made with optimized images loader ?

I have tried to configure the plugin but I am stuck with https://github.com/cyrilwanner/optimized-images-loader/issues/23, all my images now look like:

[santaclauze]

Same question, it is unclear the benefits of the library would bring.

[EliteMasterEric]

From my understanding, react-optimized-image acts as a wrapper to simplify the use of optimized-images-loader (or next-optimized-images).

For example, with just optimized-images-loader you'd have to do this:

<img src={require('./images/my-small-image.png?webp')} />

With react-optimized-image you can do:

<Img src={require('./images/my-small-image.png')} webp />

As mentioned, this library is a wrapper that provides a component for convenient use of optimized-images-loader (for React) or next-optimized-images (for NextJS). You STILL NEED ONE OF THOSE for this library to work as expected.

[Mihai-github]

Hi, It works with dynamic images or just with local images saved on the disk?