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.
calibreapp
/
image-actions
A Github Action that automatically compresses JPEGs, PNGs and WebPs in Pull Requests.
Calibre Image Actions
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
π Usage
- Create a
.github/workflows/calibreapp-image-actions.ymlfile 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,β¦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
Top comments (3)
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)
great.. thanks for sharing
Wow it's cool π