{"id":319488,"date":"2020-08-20T14:56:06","date_gmt":"2020-08-20T21:56:06","guid":{"rendered":"https:\/\/css-tricks.com\/?p=319488"},"modified":"2020-08-20T14:56:07","modified_gmt":"2020-08-20T21:56:07","slug":"optimize-images-with-a-github-action","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/optimize-images-with-a-github-action\/","title":{"rendered":"Optimize Images with a GitHub Action"},"content":{"rendered":"\n

I was playing with GitHub Actions<\/a> 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<\/a> of Actions wanting to do work for you. <\/p>\n\n\n\n

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.<\/p>\n\n\n\n\n\n\n\n

There is an action for this already, Calibre’s image-actions<\/a>, 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Then you make a file at .\/github\/workflows\/optimize-images.yml<\/code>. 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.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
name: Optimize images\non: pull_request\njobs:\n  build:\n    name: calibreapp\/image-actions\n    runs-on: ubuntu-latest\n    steps:\n      - name: Checkout Repo\n        uses: actions\/checkout@master\n\n      - name: Compress Images\n        uses: calibreapp\/image-actions@master\n        with:\n          githubToken: ${{ secrets.GITHUB_TOKEN }}<\/code><\/pre>\n\n\n\n
Now if you make a pull request, you’ll see it run:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
That successful run then leaves a comment on the pull request saying what it was able to optimize:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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.<\/p>\n\n\n\n
I can look at that automatic commit and see the difference:<\/p>\n\n\n\n
\"\"
The commit preview in Git Tower.<\/figcaption><\/figure>\n\n\n\n
How I can merge the PR knowing all is well:<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
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.<\/p>\n","protected":false},"excerpt":{"rendered":"
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. […]<\/p>\n","protected":false},"author":3,"featured_media":319533,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[638,1513],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/github-actions-image-opt.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":277728,"url":"https:\/\/css-tricks.com\/introducing-github-actions\/","url_meta":{"origin":319488,"position":0},"title":"Introducing GitHub Actions","date":"October 17, 2018","format":false,"excerpt":"It\u2019s a common situation: you create a site and it\u2019s ready to go. It\u2019s all on GitHub. But you\u2019re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you're not manually running commands all the time.\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/10\/github-actions-beta.jpg?fit=810%2C590&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":325833,"url":"https:\/\/css-tricks.com\/upptime\/","url_meta":{"origin":319488,"position":1},"title":"Upptime","date":"November 18, 2020","format":false,"excerpt":"GitHub Actions are like free computers. Well, there is pricing, but even free plans get 2,000 minutes a month. You write configuration files for what you want these computers to do. Those configuration files go into a repo, so typically they do things specific to that repo. I'm sure that\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/upptime-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331233,"url":"https:\/\/css-tricks.com\/continuous-performance-analysis-with-lighthouse-ci-and-github-actions\/","url_meta":{"origin":319488,"position":2},"title":"Continuous Performance Analysis with Lighthouse CI and GitHub Actions","date":"December 23, 2020","format":false,"excerpt":"Lighthouse is a free and open-source tool for assessing your website\u2019s performance, accessibility, progressive web app metrics, SEO, and more. The easiest way to use it is through the Chrome DevTools panel. Once you open the DevTools, you will see a \u201cLighthouse\u201d tab. Clicking the \u201cGenerate report\u201d button will run\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/lighthouse-scores.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":346449,"url":"https:\/\/css-tricks.com\/from-a-single-repo-to-multi-repos-to-monorepo-to-multi-monorepo\/","url_meta":{"origin":319488,"position":3},"title":"From a Single Repo, to Multi-Repos, to Monorepo, to Multi-Monorepo","date":"August 17, 2021","format":false,"excerpt":"I've been working on the same project for several years. Its initial version was a huge monolithic app containing thousands of files. It was poorly architected and non-reusable, but was hosted in a single repo making it easy to work with. Later, I \u201cfixed\u201d the mess in the project by\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/connected-repos.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":305646,"url":"https:\/\/css-tricks.com\/continuous-deployments-for-wordpress-using-github-actions\/","url_meta":{"origin":319488,"position":4},"title":"Continuous Deployments for WordPress Using GitHub Actions","date":"April 6, 2020","format":false,"excerpt":"Continuous Integration (CI) workflows are considered a best practice these days. As in, you work with your version control system (Git), and as you do, CI is doing work for you like running tests, sending notifications, and deploying code. That last part is called Continuous Deployment (CD). But shipping code\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/03\/github-actions-wordpress.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":323503,"url":"https:\/\/css-tricks.com\/how-to-automate-project-versioning-and-releases-with-continuous-deployment\/","url_meta":{"origin":319488,"position":5},"title":"How to Automate Project Versioning and Releases with Continuous Deployment","date":"November 2, 2020","format":false,"excerpt":"Having a semantically versioned software will help you easily maintain and communicate changes in your software. Doing this is not easy. Even after manually merging the PR, tagging the commit, and pushing the release, you still have to write release notes. There are a lot of different steps, and many\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/senantic-versioning-github-actions.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319488"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=319488"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319488\/revisions"}],"predecessor-version":[{"id":319532,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/319488\/revisions\/319532"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/319533"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=319488"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=319488"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=319488"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}