Github Actions로 이미지 압축 자동화 하기

귀찮음으로 인한 발견

우리는 가끔 static한 이미지 파일들을 프로젝트에 추가한다.

작은 용량의 이미지도 있겠지만, 특정 이미지의 경우 용량이 굉장히 큰 이미지일 수 있는데 이를 압축하기 위해 디자인 툴을 사용한다.

하지만 디자인 툴을 사용할 수 없는 상태거나 환경이라면 이미지 압축 서비스의 도움을 받아 하게 되는데 이를 하기에는 너무 귀찮다. (실제로 자동화 하기 전까지는 일일이 압축했었다..😇)

블로그를 운영하면서 이미지를 추가할 일이 많아 자동화를 할 수 없을까 살펴보던 도중 Github Actions에 이미지 압축을 자동화 해주는 기능이 있는 것을 알아냈고 이를 적용한 사례를 공유하려 한다.

설정

.github/workflows/compress-image.yaml

프로젝트에 디렉토리 구조를 세팅하고 yaml 파일을 아래와 같이 생성한다.

name: Compress Images
on:
  pull_request:
    paths:
      - '**.jpg'
      - '**.jpeg'
      - '**.png'
      - '**.webp'
jobs:
  build:
    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:
          githubToken: ${{ secrets.GITHUB_TOKEN }}

위 파일을 생성하면 paths에 설정한 확장자 파일들을 대상으로 자동으로 이미지를 압축해준다.

이를 적용하고 repository에 push하면 끝이다.

결과

압축이 완료된 파일의 개선 결과를 자동으로 commit 하여 압축된 이미지를 끼워넣어준다.
이렇게 하면 단 하나의 파일 추가로 손수 했었던 이미지 압축 작업을 하지 않아도 된다. 🎉🎉

하지만 하나의 불편함이 있으니..
이는 로컬에서 실행된 작업이 아니기 때문에 해당 브랜치에서 이어서 작업할 경우 pull을 통해 변경된 파일을 받아온 후 작업해야한다.

실제 반영된 결과는 해당 Pull Request에서 확인할 수 있다.