I was playing with GitHub Actions the other day. Such a nice tool! Short story: you can have it run code for you, like run your build processes, tests, and deployments. But it’s just configuration files that can run whatever you need. There is a whole marketplace of Actions wanting to do work for you.
What I wanted to do was run code to do image optimization. That way I never have to think about it. Any image in the repo has been optimized.
There is an action for this already, Calibre’s image-actions, which we’ll leverage here. You’ll also need to ensure Actions is enabled for the repo. I know in my main organization we only flip on Actions on a per-repo basis, which is one of the options.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/github-actions-branch.png?resize=1024%2C731&ssl=1)
Then you make a file at ./github/workflows/optimize-images.yml
. That’s where you can configure this action. All your actions can have separate files, if you want them to. I made this a separate file because (1) it only works with “pushes to pull requests,” so if you have other actions that run on different triggers, they won’t mix nicely, and (2) That’s what is in their docs and looks like the suggested usage.
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-18-at-9.06.48-AM.png?resize=1024%2C549&ssl=1)
name: Optimize images
on: pull_request
jobs:
build:
name: calibreapp/image-actions
runs-on: ubuntu-latest
steps:
- name: Checkout Repo
uses: actions/checkout@master
- name: Compress Images
uses: calibreapp/image-actions@master
with:
githubToken: ${{ secrets.GITHUB_TOKEN }}
Now if you make a pull request, you’ll see it run:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-18-at-8.57.15-AM.png?resize=1024%2C827&ssl=1)
That successful run then leaves a comment on the pull request saying what it was able to optimize:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-18-at-8.56.07-AM.png?resize=1024%2C331&ssl=1)
It will literally re-commit those files back to the pull request as well, so if you’re going to stay on the pull request and keep working, you’ll need to push again before you can push to get the optimized images.
I can look at that automatic commit and see the difference:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-18-at-8.57.30-AM.png?resize=1004%2C954&ssl=1)
How I can merge the PR knowing all is well:
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2020/08/Screen-Shot-2020-08-18-at-9.10.44-AM.png?resize=1024%2C485&ssl=1)
Pretty cool. Is optimizing your images locally particularly hard? No. Is never having to think about it again better? Yeah. You’re taking on a smidge of technical debt here, but reducing it elsewhere, which is a very fair trade, at least in my book.
Does this create a loop by triggering the workflow again after the commit?
No. It saves what images where already optimized.
All images are only optimized once.
This is so useful and time saving. Thank you
Yeah it is pretty nice. Note that currently it only works on pull requests from the same repo. Due to GitHub security permissions it won’t work from forks.
But we’re working on a work around: https://github.com/calibreapp/image-actions/pull/54