Are you automatically optimizing your assets in react native? Because you should!

Intro

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!

ImageOptim in action, simple and clean

Setting It Up

First you’ll need to download ImageOptim, then install the CLI by following the instructions here. Spoiler, its:

npm install -g imageoptim-cli

Open your terminal and go to the root of your project folder. Once you are there run:

imageoptim './*/*.png' 

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/hooks and 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'

Where the './assets/**/*.png' is the path to your assets

That’s it! You are good to go. Now whenever you commit, ImageOptim will run automatically.

Conclusion

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!