Compress Images for the Web with GitHub Actions
Tags: github, devops, githubactions
Published: 2021-02-08 02:53:32

Now there's something that I always do when uploading images to my [bdougie.live](https://bdougie.live) site, which is nothing. If you have been following this Action series, you know I am looking for quick wins to improve my site's performance, and this Image Actions is just the trick.

The GitHub Marketplace is a directory to find and add tools to helping build and grow your development workflow. There I was able to search for image compression, and the Image Actions returned as the top result. 

![Screen Shot 2021-02-07 at 9.20.44 PM](https://dev-to-uploads.s3.amazonaws.com/i/58a1zs0jqvg9qxdt10v9.png) 

Images on my website are generally PNGs and JPEGs, and this action created by [Calibre](https://calibreapp.com/) looks to handle it all out of the box. 

By default, Image Actions will compress images so that they're smaller and leave your assets looking clear and crisp. If you want to change or expand those defaults, you can look in the README for details on how to configure the compression settings.

{% github https://github.com/calibreapp/image-actions %}

I went with the standard Push Request compression example in the README, which I opted to copied and paste into a new workflow YML file.

```yml
// https://github.com/bdougie/live/blob/main/.github/workflows/image-compression.yml
name: Compress Images
on:
  pull_request:
    # Run Image Actions when JPG, JPEG, PNG or WebP files are added or changed.
    # See https://help.github.com/en/actions/automating-your-workflow-with-github-actions/workflow-syntax-for-github-actions#onpushpull_requestpaths for reference.
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'
jobs:
  build:
    # Only run on Pull Requests within the same repository, and not from forks.
    if: github.event.pull_request.head.repo.full_name == github.repository
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@v2

      - name: Compress Images
        uses: calibreapp/image-actions@main
        with:
          # The `GITHUB_TOKEN` is automatically generated by GitHub and scoped only to the repository that is currently running the action. By default, the action can't update Pull Requests initiated from forked repositories.
          # See https://docs.github.com/en/actions/reference/authentication-in-a-workflow and https://help.github.com/en/articles/virtual-environments-for-github-actions#token-permissions
          githubToken: ${{ secrets.GITHUB_TOKEN }}
```

With the workflow committed, you can see image action compressing images during the pull request CI workflow. You can see it reduce the size of some PNGs by 60%. Please take a look at the below table and to see how much it compressed.

![Screen Shot 2021-02-07 at 9.29.10 PM](https://dev-to-uploads.s3.amazonaws.com/i/268sabd40m7cad4fb44e.png) 

Not only did this workflow compress my newly uploaded image, but it also compressed all my existing photos giving me 1.87MB of savings. 

If you're interested in learning more about what Calibre has to offer,  check out the Calibre website - https://calibreapp.com/. You can also hear my interview with their founder, Ben Schwarz, on my podcast Jamstack Radio ([Web Analytics with Ben Schwarz of Calibre](https://www.heavybit.com/library/podcasts/jamstack-radio/ep-37-web-analytics-with-ben-schwarz-of-calibre/)). 

If you're interested, definitely check out this project, and check out and GitHub Marketplace for other options for improving your experience and performance.

_This is part of my 28 days of Actions series. To get notified of more GitHub Action tips, follow the GitHub organization right here on Dev._

{% link https://dev.to/github/assigning-new-contributors-to-issues-using-github-actions-1d27 %}