起因

在使用Typora搭配PicGo自动上传图片至GitHub图床时,图片是未被压缩的,导致博客在GitHub图床上获取图片的时间很长。因此想通过TinyPNG无损压缩图片,并通过GitHub Action自动压缩并替换原图,从而实现自动压缩并上传图片的功能。

项目地址 :https://github.com/leopold7/Learn_Tinify_Image_Action

步骤

申请 Tinify API key

申请地址:https://tinypng.com/developers

在你的邮箱中点击链接登录后,选择 Add API key,即可生成。

请记住此token

申请 GitHub Token

在GItHub中点击头像,选择 Settings

选择Developer settings

选择 Personal access tokens -> Generate new token

按照下图勾选即可

请记住此token

配置yaml

在GitHub项目中创建GitHub Action 所需的yaml配置文件,路径为 /.github/workflows/,文件名为 main.yml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
name: image
on:
push:
paths:
- 'static/**'
jobs:
compress:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
with:
ref: ${{ github.head_ref }}
- uses: namoscato/action-tinify@v1
with:
api_key: ${{ secrets.API_KEY }}
github_token: ${{ secrets.MYGITHUB_TOKEN }}

解释:

  • 'static/**':声明了一旦在static文件夹下发生了 push 操作就会触发这个事件
  • ${{ github.head_ref }}:分支,GitHub默认环境变量
  • ${{ secrets.API_KEY }}:Tinify API key,Tinify 密钥
  • ${{ secrets.MYGITHUB_TOKEN }}:GitHub 密钥

其他变量详见:https://github.com/marketplace/actions/tinify-image-action

配置环境变量

在项目中选择Settings -> Secrets -> New repository secret


Name中输入 API_KEY,在Value中输入你申请的Tinify API key


再次添加,在Name中输入 MYGITHUB_TOKEN,在Value中输入你申请的 GitHub Token


最终结果如下


测试

我们上传一张图片,原图大小为739.2 kB


Action中可以观察到工作流


此处有详细的工作流执行步骤,此处不多解释。


再次查看文件大小,已压缩至585KB


在Tinify中能够看到已消耗配额1张

注意事项与优化

  1. Tinify每月500张图片免费压缩,如果需求量大建议支持下Tinify。

  2. 如果想baipiao的话(=,= ),可以优化工作流(申请多个key,负载均衡)。

  3. 如果我们不想覆盖压缩,可以在压缩前执行备份操作。