Now there's something that I always do when uploading images to my 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.

Images on my website are generally PNGs and JPEGs, and this action created by Calibre 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.

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,

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.

// 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.

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).

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.

01:15

Assigning new contributors to issues using GitHub Actions

Brian Douglas for GitHub ・ Feb 5 '21

#github #devops #githubactions