블로그 빌드 시 이미지 압축 자동화

Zola에 이미지압축 함수 있는거 모르고 삽질했습니다. ㅎㅎ

내 아이폰으로 찍은 사진을 블로그에 올렸을 때 이미지 로딩이 느린 이슈가 있었다.
이미지가 고화질이라 용량이 크기 때문이다.

그래서 맥북 미리보기 프로그램으로 일일히 크기를 줄여왔는데, 자동화를 했다.

ffmpeg는 영상, 이미지, 음성 처리 등을 하는 많이 쓰는 프로그램이다. Makefile은 셸 명령어를 자동화할 때 많이 쓰는 프로그램이다.

.PHONY: compress build deploy

compress:
	./scripts/compress_images.sh
	./scripts/findff.sh
build: compress
	zola build

deploy: build
	git add .
	git commit -m "run ffmpeg, Makefile, git acp"
	git push

Makefile이다. compress에서 이미지압축+ff구분자를 붙인다. 그리고 마크다운 게시글에서 이미지경로 뒤에 ff를 붙인다.
build에서 빌드한다.
deploy에서 깃허브 푸시한다. 이후 깃허브 액션에서 azure에 배포한다.

#!/usr/bin/env bash
set -euo pipefail

IMG_DIR="static/images"
shopt -s nullglob nocaseglob

for src in "$IMG_DIR"/*.{jpg,jpeg,png,webp}; do
    filename=$(basename "$src")
    ext="${filename##*.}"
    name="${filename%.*}"
    
    if [[ "$name" == * || "$ext" =~ ^(png|PNG)$ ]]; then continue; fi #ff이거나 png이면pass

    echo "▶ 새로운 이미지 압축 : $filename "
    # y로 덮어쓰기
    ffmpeg -y -loglevel error -hide_banner  \
        -i "$src" \
        -vf "scale='min(1600,iw)':'min(1600,ih)':force_original_aspect_ratio=decrease" \
        -q:v 3 "$src"

    mv "$src" "$IMG_DIR/${name}.${ext}"
done

compress_image.sh이다. 셸 프로그래밍인데 생각보다 문법이 간결하고 읽기 좋다.
이미지 파일을 찾아(png제외) 크기1600이상이면 줄이고 크기를 3레벨로 압축해 덮어쓰고 파일명 뒤에 ff붙인다.(구분)

#!/usr/bin/env bash

find content -type f \( -name "*.md" -o -name "*.html" \) | while read -r file; do
  # 가 포함된 줄은 제외하고 처리
  if grep -q '/images/.*\.' "$file"; then
    tmpfile=$(mktemp)
    gsed -E '/\/images\/.*\./! s/(\/images\/[^ )"]+)\.(jpg|jpeg|png|webp|JPG|PNG)/\1.\2/g' "$file" > "$tmpfile"
    mv "$tmpfile" "$file"
  else
    gsed -i -E 's/(\/images\/[^ )"]+)\.(jpg|jpeg|png|webp|JPG|PNG)/\1.\2/g' "$file"
  fi
done

findff.sh이다. 마크다운 안에서 일일히 붙이기 어렵다. 자동으로 이미지 찾아 ff붙여준다.

make deploy하면 한번에 실행된다. 셸 명령어를 다루니 시야가 넓어진 것 같다.

gif파일의 용량이 커서 푸시 리젝되어 git filter-repo 사용했다.

재미있는 push였다.

makefile이 강력한 도구인 것 같다. 많은 프로그램이 이런 식으로 만들어졌겠구나 생각이 든다.

깃허브 기여도 그래프이다. 깃허브 액션, 자동화 건드리고 난 뒤부터 커밋 수가 증가했다.

추가) zola에 이미 이미지 처리 기능이 있었다. 아, 공식문서 안 읽으면 이렇게 된다. ㅎㅎ ㅋㅋㅋㅋ

그런다고 공식문서를 다 읽어야 하는건가 생각이 든다.
그리고 내가 이거 만들동안 한 마디도 안해준 chatgpt, gemini에 대해서도 생각을 해봐야겠다. 물론 bash정규식 짜준건 잘 짜줬다.