Add image optimization

[sumanthratna]

the first step towards implementing #10467

This PR implements image optimization via Webpack. All image optimizations are lossless; if a user wants to customize optimization then they should either eject or optimize images themselves without ejecting.

I have added a unit test (which passes)—the unoptimized image is ~66.5 KB while the optimized image is ~32.1 KB

[stale]

This pull request has been automatically marked as stale because it has not had any recent activity. It will be closed in 5 days if no further activity occurs.

[sumanthratna]

Hi @iansu, sorry for the ping, but just wanted to see if you're willing to merge this feature.

[iansu]

Hi, thanks for the PR. I do think this seems like a good feature to include in our 5.1 release. There are a couple of things I'd like to do first:

1. Confirm that all these image optimizations are in fact lossless and also don't ever result in larger file size
2. Add a flag to opt out of image optimization (see https://create-react-app.dev/docs/advanced-configuration)

[sumanthratna]

Thanks for the comments!

Confirm that all these image optimizations are in fact lossless and also don't ever result in larger file size

good catch, imagemin does not guarantee that the returned image is indeed smaller than the input: https://github.com/imagemin/imagemin/blob/6832717d644ac69afc402939f5bca0d5f297697f/test.js#L65-L85

also, imagemin is unmaintained (imagemin/imagemin#385) so I think we should use squoosh instead.

The only downside I see to using squoosh is that JPEG images are not guaranteed to be lossless (GoogleChromeLabs/squoosh#85). (I don't know how to generate input cases where the optimization would be lossy). What do you think? Can we proceed with squoosh?

[sumanthratna]

@iansu friendly bump -- are you okay with using sqoosh for optimization per my previous message in this thread?

[YPCrumble]

@sumanthratna as a huge CRA fan I'm excited about this PR! And @iansu thank you for all your contributions here.

I just took a look at the NextJS ecosystem that has been doing image compression for a while and it seems they're moving to sharp over squoosh - perhaps we learn from their issues and use sharp?

I think it's hard to guarantee that image compression is lossless but to me that caveat can be documented with the flag to disable image compression, and any issues should be directed to the maintainers of sharp or whichever compression utility we're implementing.

Thanks for this PR @sumanthratna I'm looking forward to using it!