본문으로 건너뛰기
yceffort
PostsSeriesTagsAbout🧪 Research
EN

Tweaks

theme
accent palette
film grain
minimal mode
BACK TO INDEX
◆ ESSAY
--min
--year
KOoriginal

mailMail icongithubtwitter
yceffort
•
© 2026
•
https://yceffort.kr
BACK TO INDEX
◆ ESSAY

디렉토리에 있는 모든 이미지 최적화 하기

avatar
yceffort
2021-05-02 · 2분
2min
2021year
KOoriginal
web-performance

블로그에서 추가되는 이미지를 자동으로 최적화하기 위해 https://imgbot.net/ 을 사용하고 있다. imgbot을 사용하면, 새롭게 추가되는 이미지들에 대해서 최적화를 해주는 PR을 만들어 준다. https://github.com/yceffort/yceffort-blog-v2/pull/298 (빌드가 실패한 것에 대해선 정말 긴 히스토리가 있다, imgbot 때문이 아니다)

그러나 기존에 추가되었던 이미지들에 대해서는 최적화가 안되기 때문에, 이를 위해서 방법을 찾아보다가 아래와 같은 라이브러리를 사용했다.

PNG

brew install optipng
apt-get install optipng
find . -iname "*.png" -exec optipng -o7 {} \;

http://optipng.sourceforge.net/

PNG의 경우에는 굉장히 오래걸렸다.

JPG, JPEG

brew install jpegoptim
sudo apt-get install jpegoptim
find . -iname "*.jpg" -exec jpegoptim -m80 -o -p {} \;

GIF

brew install gifsicle
sudo apt-get install gifsicle
find . -iname "*.gif" -exec gifsicle --batch -V -O2 {} \;

GUI application

일괄적으로 모든 파일을 수정하기 위해서는 위 명령어를 사용했지만, GUI application도 있어서 필요할 때 사용하면 좋을 것 같다.

https://imageoptim.com/mac

관련 글

  • #web-performance

    『프런트엔드 성능 최적화 Deep Dive』가 출간되었습니다.

    🙇🏻‍♂️

    2026-07-22·5분
  • ◆ Next.js의 현주소
    #nextjs#web-performance#react

    Next.js의 성능은 충분히 빠른가

    벤치마크가 말해주는 불편한 진실

    2026-03-21·42분
  • ◆ Next.js의 현주소
    #nextjs#edge-computing#serverless

    Next.js Edge Runtime의 흥망성쇠

    Edge Middleware 야 잘 살고 있니?

    2026-03-16·25분
  • #frontend#ux#web-performance

    Infinite Scroll의 몰락 — Google은 왜 무한 스크롤을 걷어냈는가

    무한 스크롤이 UX, 성능, 접근성, 그리고 법률의 관점에서 어떻게 재평가되고 있는지 살펴본다

    2026-02-21·19분

새 글을 놓치고 싶지 않으시다면 RSS로 구독해 주세요.

RSS 구독 →

yceffort — 프론트엔드 엔지니어입니다. 발표·기술 자문·기고 문의는 이곳에서 받고 있습니다.

← Back to the blogIssue on GitHub →