calibreapp / Image Actions

Introduction

Image Actions is a Github Action built by performance experts at Calibre that automatically compresses JPEGs, PNGs and WebPs in Pull Requests.

Image Actions offers:

• Fast, efficient and near-lossless compression
• Best image compression algorithms available (mozjpeg and libvips)
• Ease of customisation: use default settings or adapt to your needs
• Running on demand or schedule

...and more!

Table of Contents

• Usage
• Configuration
  • Control image quality settings
  • Ignore paths
  • Run compression only
  • Compress on demand or on schedule
  • Process Pull Requests from forked repositories
  • Combined workflow
• Migrate legacy configuration
  • Uses and GITHUB_TOKEN definition
  • Location and name of the configuration file
  • Listing ignorePaths
• Contributing
• Used By
• Authors
• Resources
• License

Usage

1. Create a .github/workflows/calibreapp-image-actions.yml file in your repository with the following configuration:

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/[email protected]

      - name: Compress Images
        uses: calibreapp/[email protected]
        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 }}

2. Open a Pull Request with added or changed imagery. Image Actions will process the files and post a comment, like so:

3. Merge your Pull Request and enjoy lighter images or explore what’s possible further with configuration options. 👇🏻

Configuration

By default, Image Actions will compress images so that they’re smaller and will leave your assets looking clear and crisp. If you want to change or expand those defaults, read on for available options.

⚠️ If you are using an older version of Image Actions referencing .github/calibre/image-actions.yml, we suggest you migrate to the latest configuration format.

Control image quality settings

Add the following arguments to the workflow definition to control compression settings:

with:
  jpegQuality: '80'
  jpegProgressive: false
  pngQuality: '80'
  webpQuality: '80'

Options:

• jpegQuality: Number, integer 1-100, default 80 stored in a string.
• jpegProgressive: Boolean, true or false, default false.
• pngQuality: Number, integer 1-100, default 80 stored in a string.
• webpQuality: Number, integer 1-100, default 80 stored in a string.

Ignore paths

Add the following argument to the workflow definition to ignore selected paths:

with:
  ignorePaths: 'node_modules/**,build'

ignorePaths accepts a comma-separated string with globbing support of paths to ignore when looking for images to compress.

Run compression only

By default, Image Actions adds optimised images to the current Pull Request and posts a summary comment.

Use the compressOnly option with true value to skip the commit and summary comment if you want to handle this separately (including for forks):

with:
  compressOnly: true

compressOnly accepts a Boolean value (true or false) and defaults to false.

Compress on demand or on schedule

It is also possible to run Image Actions on demand or on a recurring schedule. By using the compressOnly option, in conjunction with create-pull-request action by @peter-evans, a new Pull Request will be raised if there are optimised images in a repository.

See an example below:

# Compress images on demand (workflow_dispatch), and at 11pm every Sunday (schedule).
# Open a Pull Request if any images can be compressed.
name: Compress Images
on:
  workflow_dispatch:
  schedule:
    - cron: '00 23 * * 0'
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Compress Images
        id: calibre
        uses: calibreapp/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          compressOnly: true
      - name: Create New Pull Request If Needed
        if: steps.calibre.outputs.markdown != ''
        uses: peter-evans/[email protected]
        with:
          title: Compressed Images Nightly
          branch-suffix: timestamp
          commit-message: Compressed Images
          body: ${{ steps.calibre.outputs.markdown }}

Process Pull Requests from forked repositories

By default, GitHub Actions do not have permission to alter forked repositories. For this reason, Image Actions only works for Pull Requests from branches in the same repository as the destination branch. There are several workarounds for this limitation:

1. Replace the default GITHUB_TOKEN with a Personal Access Token (PAT) which does have permission to access forked repositories. Be aware that this introduces potential security concerns (which is why it not available by default).

2. Run Image Actions only for Pull Requests in the current repository. This approach is advised when not using Personal Access Tokens (PATs) to avoid wasting time and compute for compressions that will not be committed. Use the following configuration to check if a Pull Request belongs to the repository:

if: github.event.pull_request.head.repo.full_name == github.repository

3. Run an additional instance of Image Actions in compressOnly mode on pushes to main, and then raise a new Pull Request for any images committed without being compressed (e.g. from a forked repository PR). See the configuration in the below example which uses the create-pull-request action by @peter-evans to open the new Pull Request (this only raises a Pull Request if any files are changed in previous steps).

name: Compress Images on Push to main branch
on:
  push:
    branches:
      - main
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/[email protected]
      - name: Compress Images
        id: calibre
        uses: calibreapp/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          compressOnly: true
      - name: Create New Pull Request If Needed
        if: steps.calibre.outputs.markdown != ''
        uses: peter-evans/[email protected]
        with:
          title: Compressed Images
          branch-suffix: timestamp
          commit-message: Compressed Images
          body: ${{ steps.calibre.outputs.markdown }}

Combined workflow

You can combine all of the above customisation options into one all-encompassing workflow to avoid having to set up separate workflows with a lot of duplication.

The example below ensures the right order of task execution within Image Actions. If you’d like to reuse it, make sure to change example/example_repo to your repository details.

# Image Actions will run in the following scenarios:
# - on Pull Requests containing images (not including forks)
# - on pushing of images to `main` (for forks)
# - on demand (https://github.blog/changelog/2020-07-06-github-actions-manual-triggers-with-workflow_dispatch/)
# - at 11 PM every Sunday in anything gets missed with any of the above scenarios
# For Pull Requests, the images are added to the PR.
# For other scenarios, a new PR will be opened if any images are compressed.
name: Compress images
on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'
  push:
    branches:
      - main
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'
  workflow_dispatch:
  schedule:
    - cron: '00 23 * * 0'
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    # Only run on main repo on and PRs that match the main repo.
    if: |
      github.repository == 'example/example_repo' &&
      (github.event_name != 'pull_request' ||
       github.event.pull_request.head.repo.full_name == github.repository)
    steps:
      - name: Checkout Branch
        uses: actions/[email protected]
      - name: Compress Images
        id: calibre
        uses: calibreapp/[email protected]
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}
          # For non-Pull Requests, run in compressOnly mode and we'll PR after.
          compressOnly: ${{ github.event_name != 'pull_request' }}
      - name: Create Pull Request
        # If it's not a Pull Request then commit any changes as a new PR.
        if: |
          github.event_name != 'pull_request' &&
          steps.calibre.outputs.markdown != ''
        uses: peter-evans/[email protected]
        with:
          title: Auto Compress Images
          branch-suffix: timestamp
          commit-message: Compress Images
          body: ${{ steps.calibre.outputs.markdown }}

Migrate legacy configuration

If you are using an older version of Image Actions, we recommend checking that your settings are up-to-date.

Uses and GITHUB_TOKEN definition

If your calibreapp-image-actions.yml file has a reference to docker:// or GITHUB_TOKEN as follows:

- name: calibreapp/image-actions
    uses: docker://calibreapp/github-image-actions
    env:
      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Update your configuration to:

- name: Compress Images
  uses: calibreapp/[email protected]
  with:
    githubToken: ${{ secrets.GITHUB_TOKEN }}

Location and name of the configuration file

If your repository uses .github/calibre/image-actions.yml for configuration, it should be moved into .github/workflows/calibreapp-image-actions.yml. Then delete the image-actions.yml file.

Listing ignorePaths

ignorePaths is no longer an array and is now a comma separated list. E.g. ignorePaths: "node_modules/**,bin".

Contributing

To submit a feature, bug fix, or enhancement to Image Actions, follow these steps:

1. Fork this repository.
2. Install dependencies with npm install.
3. Run npm run build or npm run watch (for continuous rebuild-on-save) to build the project.
4. Make desired changes.
5. Run npm run test to run the test suite.
6. Confirm a successful Docker build with docker build -t calibreapp/image-actions:dev ..
7. Open a Pull Request and follow the prompts.

We value and appreciate all contributions.

Used By

Image Actions is helping developers, designers and organisations across the world to make their sites and applications faster. Here’s some of them:

Authors

• Ben Schwarz (Founder and CEO at Calibre)

Resources

Related reading:

• Automatically compress images on Pull Requests
• Optimize Images with a GitHub Action
• Image Actions on GitHub Marketplace
• Start monitoring and improving your performance

Image compression tools:

• sharp
• mozjpeg
• libvips

License

Image Actions is licensed under a GNU General Public License.