[Github Image Actions] 이미지 용량 압축해주는 액션

JUICE

5 min readMar 3, 2020

안녕하세요, 주스입니다!

이미지 용량이 너무 커서 이미지가 뚝뚝 끊길때 있잖습니까?!

깃허브 액션 중 이미지 용량을 압축해주는 액션이 있어 사용해본 경험을 공유하고자 쓰게 되었습니다.

휴대폰으로 찍은 이미지들을 사용하다보니, 용량이 10MB 이상에, 로딩시간이 무려 5초나 걸렸습니다.

상상도 못한 로딩 시간🕺

놀란마음을 뒤로한 채, 이미지 용량을 어떻게 압축해야할지 고민했습니다.

이미지 용량 압축하는 방법

첫번째는 이미지 압축 사이트를 이용해보는 것이었습니다. 원시적이지만, 용량을 50~90% 줄일 수 있었습니다. 하지만, 일일이 다운받고 적용하기에 이미지 개수가 너무 많아서 적합하지 않다고 생각했습니다.
두번째는 Github의 Image Actions을 사용해보는 것이었습니다. Github에 Image Actions은 Pull Request마다 자동으로 이미지 용량을 압축해주는 기능이 생겨 나쁘지 않다고 생각했습니다.
세번째는 CDN을 사용해보는 것이었습니다. 가볍게 진행한 프로젝트라 비용을 부담하고 싶지는 않았습니다.

그래서 오늘 Image Actions을 사용하여 이미지 압축하는 방법에 대해 알려드리고자 합니다.

Image Actions에 대해 알아보자!

2019년 11월부터 Github 자체에서 CI역할을 하는 Actions이 생겼습니다.

Image Actions는 Pull Request마다 이미지 용량을 압축해주는 Actions 기능입니다.

설치

.github/workflows/calibreapp-image-actions.yml 파일을 생성합니다.

name: Compress images
on: pull_request
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 }}

구성

기본설정

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

기본값을 수정하려면, .github/workflows/calibreapp-image-actions.yml 파일에 추가하여 수정합니다.