Git Product home page Git Product logo

image-actions's Introduction

Image Actions

Image Actions automatically compresses JPEG, PNG and WebP images in GitHub Pull Requests.

  • Fast, efficient and near-lossless compression
  • Uses the best image compression algorithms available: mozjpeg and libvips
  • Configurable and extensible: use default settings or adapt to your needs
  • Runs in GitHub Actions
  • Built by web performance experts at Calibre; a performance monitoring platform

Preview of image-actions Pull Request comment

Table of Contents

Installation

Create the .github/workflows/calibreapp-image-actions.yml file 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
    paths:
      - "**.jpg"
      - "**.jpeg"
      - "**.png"
      - "**.webp"
jobs:
  build:
    name: calibreapp/image-actions
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repo
        uses: actions/checkout@master

      - name: Compress Images
        uses: calibreapp/image-actions@master
        with:
          githubToken: ${{ secrets.GITHUB_TOKEN }}

The GITHUB_TOKEN secret is automatically generated by GitHub. This automatic token is scoped only to the repository that is currently running the action.

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 those defaults, read on.

Previous versions of image-actions used .github/calibre/image-actions.yml for configuration. We suggest that you migrate to the newest configuration format by reading the migration steps below.

Image quality settings

Set custom configuration by adding arguments to the action workflow definition:

...
- name: Compress Images
  uses: calibreapp/image-actions@master
  with:
    githubToken: ${{ secrets.GITHUB_TOKEN }}
    jpegQuality: "80"
    jpegProgressive: false
    pngQuality: "80"
    webpQuality: "80"
    ignorePaths: "node_modules/**,build"
    # No spaces allowed

Options:

  • jpegQuality: Number, integer 1-100, default 80 stored in a string
  • pngQuality: Number, integer 1-100, default 80 stored in a string
  • webpQuality: Number, integer 1-100, default 80 stored in a string
  • jpegProgressive: Boolean, true or false, default false
  • ignorePaths: a comma separated string with globbing support of paths to ignore when looking for images to compress

Migrate legacy configuration

  • uses: docker://calibreapp/github-image-actions

    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/image-actions@master
      with:
        githubToken: ${{ secrets.GITHUB_TOKEN }}
  • .github/calibre/image-actions.yml

    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.

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

Links and Resources

image-actions's People

Contributors

benschwarz avatar chabad360 avatar steveoh avatar dependabot[bot] avatar alexdupre avatar thefoxis avatar pauliver avatar chiefjester avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.