DEV Community

Play Button Pause Button
Brian Douglas for GitHub

Posted on • Updated on

Compress Images for the Web with GitHub Actions

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.

Screen Shot 2021-02-07 at 9.20.44 PM

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.

GitHub logo calibreapp / image-actions

A Github Action that automatically compresses JPEGs, PNGs and WebPs in Pull Requests.

Calibre Image Actions

NPM package License Contributor Covenant Contribution guidelines

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
  • Supports GitHub Enterprise

...and more!

๐Ÿ–‡ Table of Contents

  1. Usage
  2. Configuration
  3. Migrating legacy configuration
  4. Contributing
  5. Resources
  6. 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,
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

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 }}
Enter fullscreen mode Exit fullscreen mode

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

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.

Top comments (3)

Collapse
 
alexbeglov1989 profile image
alexbeglov1989

I will share my experience in image optimization ... At first, I had to manually compress all the pictures through Photoshop. The most free option by the way (except for the cost of a license for Photoshop). But this process takes a lot of time if there are more than 10-20 pictures on the site. After all, each picture must be manually processed, and then upload on the site again. Tedious such a process ... Now I use this service - optipic.io/ It saves a lot of time) It works by itself - automatically - only 1 time it needs to be connected to the site. Google is satisfied)

Collapse
 
rajmohanpdy profile image
rajmohan s

great.. thanks for sharing

Collapse
 
mycodemagic profile image
My Code Magic

Wow it's cool ๐Ÿ˜Œ