- Chris Otto
Table of Contents
Image from @jruscello on Unsplash
Having my blog maintained in source control is awesome. I love having a commit log and be able to have my code and posts in the same spot, they're like roommates. Following the roommate analogy, sometimes your roommate may have some habits you aren't a fan of. For me, it's the images that go along with posts. There's a many to one relationship so considering not only repository size but built times with Gatsby I wanted to implement a utility to help with the situation. A mediary of sorts.
tinify a node package that with an API key gives you 500 image compression per month in the free tier. I set out to accomplish:
tinifyto compress the images in specific paths of my repository
- Create a registry of compressed images so the same image isn't compressed more than once using up more compressions per month than what is needed
huskyto add the utility script to execute in a pre-commit hook
Install packages 📦
Using whatever flavor of package manager you like install the dependencies.
Create Tiny PNG Account 🖼
Head over to Tiny PNG and create an account. Once you confirm your e-mail address you'll be able to access the developer dashboard. Copy your API key.
In your repository's
.env file create a new key-value pair for your API key.
Create the Utility File and Registry ⚙
If you don't have one already, create
utility folder in the root of your repository. Also, create two files
Stub Out Registry Structure
We'll want to give the JSON file a basic structure so we can update it accordingly in the utility function. For this, I chose to have just one top-level empty array called
done which we will read from and push the path to images to have been compressed.
Implement the Utility
We'll go over the implementation in chunks. First import the dependencies, create a variable for the file path to the registry and add the API key to
Next, we'll create a
registrar function that will be in charge of doing a few things:
- Take in an array as input
- Reading the contents of the registry
- Checking if an item from the array that's passed in is in the registry already
- If the path isn't in the registry, use
tinifyto the compress the image in the path
- Push the path of the image out to the registry
glob search our repository for files matching the images we want to compress. An array is returned from the search that
glob performed. So we'll just pass that directly to our
registrar. I wanted to break out the top-level folder for each glob search to the three main places I have images in my repository. This will exclude images from areas like
node_modules that we wouldn't want to compress.
Putting it all together:
Create Script and Add to Husky 🐕🦺
package.json create new script that will execute the
Run Compression and Check the Results 🏁
Before committing you may want to make sure everything is hooked up and working. Run the script:
Depending on how many images you have in your site or folder where you are running the script. You will see a large amount of images show up in your Git diff. Also, check out the registry and you should the images that were process in the
It's also worth while checking out the developer dashboard over at Tiny PNG to see how many images you compressed on your first go around. After I first ran the script I used up about 50 compressions and I don't have a lot of posts, yet.
I hope a utility like this has a lot of value for those using Gatsby, Next.js or any other markdown driven static site generator that isn't going through a CMS. Cheers 🍻!