67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
+++
|
|
date = "2021-08-18"
|
|
tags = ["github"]
|
|
title = "squoosh-cliとgh-actionsで画像表示を高速化してみる"
|
|
slug = "github"
|
|
+++
|
|
|
|
squoosh-cliは、google製の画像圧縮ツールらしい。
|
|
|
|
```sh
|
|
$ 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`は適時、調整してください。
|
|
|
|
```yml:.github/workflows/push-webp.yml
|
|
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 "action@github.com"
|
|
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
|
|
```
|