squoosh-cliとgh-actionsで画像表示を高速化してみる

2021-08-18 / @syui

squoosh-cliとgh-actionsで画像表示を高速化してみる

squoosh-cliは、google製の画像圧縮ツールらしい。

$ npm i -g @squoosh/cli
$ squoosh-cli --webp '{"quality":75,"target_size":0,"target_PSNR":0,"method":0,"sns_strength":50,"filter_strength":60,"filter_sharpness":0,"filter_type":1,"partitions":0,"segments":4,"pass":1,"show_compressed":0,"preprocessing":0,"autofilter":0,"partition_limit":0,"alpha_compression":1,"alpha_filtering":1,"alpha_quality":100,"lossless":0,"exact":0,"image_hint":0,"emulate_jpeg_size":0,"thread_level":0,"low_memory":0,"near_lossless":100,"use_delta_palette":0,"use_sharp_yuv":0}' -d out-dir img.jpg

size的にはjpgのほうがいいのですが、webpじゃないとpng透過が保存されないので、webpを使います。

resizeは300x400だとスマホで見たとき粗くなってしまうため、600x800にしました。

git-diffにcommit-hashを指定し、更新ファイルがあれば、squooshを実行します。gh-actionsはpush:pathsからトリガーできます。

パラメータ、特にqualityは適時、調整してください。

on:
  push:
    paths:
      - 'static/img/*.png'

jobs:
  comment:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: install squoosh
      env:
        WORKFLOW_FILE_PATH: ${{ github.workflow }}
        GITHUB_REPOSITORY: ${{ github.repository }}

      run: |
        npm i -g @squoosh/cli        

    - name: convert webp
      run: |
        s=`git diff-tree --no-commit-id --name-only -r $GITHUB_SHA|grep "static/img/"|grep "\.png"`
        echo $s
        if [ -z "$s" ];then
        exit
        fi
        for i in $s 
        do
        squoosh-cli --webp '{"quality":100}' -d ./static/img/min --resize '{width:600,height:800}' $i
        done
        git config --local user.email "[email protected]"
        git config --local user.name "GitHub Action"
        if [ -z "`git status -s`" ];then
          exit
        fi
        git add ./static/img/min
        git commit -m "push webp"        

    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
        branch: src