Are you automatically optimizing your assets in react native? Because you should!
Optimizing assets in your React Native apps provides an easy way to achieve big performance gains with little effort.
Why? PNG’s definitely aren’t created equal, especially if you’re working with multiple designers who use various export settings when creating assets.
Tell me how!
ImageOptim is the application we’re looking for. It works by optimizing pngs and jpgs losslessly, by applying several different compression algorithms, stripping all metadata and other things that you don’t need in production. Better yet, it even has a CLI!
Setting It Up
npm install -g imageoptim-cli
Open your terminal and go to the root of your project folder. Once you are there run:
Automating the process (Optional, but recommended!)
Wether you are in a small or big setup, its always awesome to not have to worry about another manual step. As imageOptim has a CLI, the automation can be setup easily through a git hook:
- in your project
cd /.git/hooksand edit the file
pre-commit. If you dont have one already — edit the pre-commit.sample and rename it pre-commit to enable it
- Insert the following
git diff --cached --name-only --diff-filter=ACM | imageOptim './assets/**/*.png'
'./assets/**/*.png' is the path to your assets
That’s it! You are good to go. Now whenever you commit, ImageOptim will run automatically.
After running this, it managed to optimize the projects image assets by 56% on average and lowered the total app size by 31% which is a pretty significant improvement! 🏎️
Hopefully we won’t have to worry about image optimization for the foreseeable future with the pre-commit hook! 🔥
How much smaller did your app get using ImageOptim? Let me know in the comments!