reactjs – I need to resize the images in my project react + gatsby

It would depend on where are you using react-image-file-resizer package. For what is worth, I would say that is not worth it at all. Gatsby handles the image treatment/resizing/transforming process during the build process using some Python-based code, which runs in the server directly (not in the front-end like the library you’ve shared) so the performance won’t be affected. Of course, this can increase the build time, but doesn’t affect the PageSpeed Insights score, in fact, otherwise, because of that performance, you images will be optimized as soon as they are served, unlike react-image-file-resizer, where it’s React-based code that triggers all the image treatment.

That said, your image optimization should be done by your queries (where you fetch those images), taking fluid or fixed sizes (in v2) or StaticImage or GatsbyImage (in v3), lifted with the needed sizes to serve the images that you need in each device because Gatsby will serve the image sizes that you are telling to, so if you need some treatment should be done there.

Source link