서버에서 PNG 이미지 최적화로 사이트 속도 개선 방법

Updated on 2020-02-29 by

이미지 최적화 중 PNG 포맷의 이미지를 최적화하는 방법을 알아봅니다.

여기서는 PNG 이미지 포맷 최적화 방법을 설명하지맘 이미 이전에 우리가 가장 많이 사용하는 이미지 포맷인 JPEG 파일 최적화 방법에 대해 포스팅 한적이 있습니다. 이 내용은 아래 포스팅한 글을 참조하세요.

또한 이미지 최적화 방법 중 WebP 포맷을 이용해 사이트 로딩 속도를 높이고 트래픽을 줄이는 방법에 대해서는 아래 글을 참조하시기 바랍니다.

1. 왜 PNG 포맷을 사용할까?

일반적으로 알기에, 아니 사실 그대로 가장 효율이 좋은 이미지 포맷은 JPEG, JPG입니다. 그러면 이 JPEG만 사용하면 되는데 왜 PNG나 GIF를 사용할까요?

이는 이미지 포맷마다 특성이 조금씩 다르기에 이미지 효율을 높이려면 이미지 포맷마다의 특성을 살려, 별도로 적용할 필요가 있기 때문입니다.

PNG는 투명부분을 지원하고 무손실에 가깝기 때문에 하얀색이 많은 그래프나 도표와 문자 중심의 화면을 저장시 압축 효율과가독성이 뛰어납니다.

그래프를 JPG로 저장 후 압축하면 글자나 그래프의 선들이 뭉개지면서 가독성을 엄청 떨어뜨리는데요. PNG를 사용하면 그런 문제가 없어집니다.

아래는 넷플릭스 실적을 막대와 선 그래프로 그려 PNG로 저장한 것인데요. 폭 1024px로 비교적 큰 이미지이지만 용량은 34kb정도로 작습니다. 그러면서도 그래프 고유의 가독성을 유지하고 있습니다.

JPG로 이정도 용량이 나오도록 압축하면 글자나 선등이 많이 뭉게집니다. 특히 붉은 계열 컬러의 선과 글자는 뭉게져 보기 싫을 정도입니다.

넷플릭스 연도별 매출 및 성장율 추이, Graph by Happist
넷플릭스 연도별 매출 및 성장율 추이, Graph by Happist
GIF지원지원전체
PNG지원지원 안 함전체
JPEG지원 안 함지원 안 함전체
JPEG XR지원지원IE
WebP지원지원Chrome, Opera, Android

2. 가장 좋은 PNG 압축 유틸리티

PNG도 많이 사용하기 때문에 다양한 압축 유틸리티들이 존재합니다.

그들 PNG 이미지 압축 유틸리티 중 pngquant의 압축율이 가장 낫고 그러면서도 속도도 빠르다는 평가입니다.

저도 이미지 작업 시 데스크탑용 pngquant로 PNG 이미지를 압축하는데 확실히 압축율이 좋더군요. 그래서 PNG 압축운 pngquant를 사용하기로 했습니다. 알아보니 구글 전문가들도 이를 추천하고 있더군요.

3. pngquant 설치

우선 pngquant를 우분투 18.04 서버에 설치해 보죠. 아래는 설치 명령어입니다.

apt-get update
apt-get install pngquant -yCode language: PHP (php)

3.1. pngquant 버젼 업데이트

pngquant가 설치되었으면 버젼 체크를 해봅니다. 2015년 6월에 발표된 버젼 2.5.0이네요.

pngquant -V
2.5.0 (June 2015)Code language: PHP (php)

pngquant 사이트에 확인해보니 pngquant의 최신 버젼은 2.12.5네요. 업데이트할 필요가 있습니다.

업데이트는 아래와 같은 패키지를 설치한 후 진행합니다.

apt-get update
apt-get install build-essential liblcms2-dev libpng-dev git -yCode language: PHP (php)

Tmp 폴더에서 최신 pngquant를 다운받습니다.

cd /tmp
git clone https://github.com/pornel/pngquant/
cd pngquant*
./configure --prefix=/usrCode language: PHP (php)

컴파일을 합니다.

make
make installCode language: PHP (php)

다시 pngquant 버젼을 확인해 봅니다. 이제는 최신 버젼이 설치되었네요.

pngquant -V
2.12.6 (July 2019)Code language: PHP (php)

4. pngquant 이용 방법

  • –force : 원본 파일을 덮어쓰기, overwrite existing output files (synonym: -f)
  • –skip-if-larger : 원본 파일 사이즈보다 작은 경우만 저장, only save converted files if they’re smaller than original
  • –output file : destination file path to use instead of –ext (synonym: -o)
  • –ext new.png : set custom suffix/extension for output filenames
  • –quality min-max : don’t save below min, use fewer colors below max (0-100)
  • –speed N : speed/quality trade-off. 1=slow, 4=default, 11=fast & rough
  • –nofs : disable Floyd-Steinberg dithering
  • –posterize N : output lower-precision color (e.g. for ARGB4444 output)
  • –strip : remove optional metadata (default on Mac)
  • –verbose : print status messages (synonym: -v)

5. Batch PNG 최적화

특정 폴더의 PNG 이미지 전체를 한꺼번에 압축 최적화

find /***/******/wp-content/uploads -iname "*.png" -exec pngquant --force --quality=40-100 --skip-if-larger --strip --verbose \{} --output \{} \;Code language: PHP (php)

새롭게 뉴스레터를 시작했습니다.

1️⃣ 주식 등 투자 정보 : 기업 분석, IB 투자의견 등 투자 관련 내용
..... 테슬라 실적 및 IB들의의 테슬라 투자의견
2️⃣ 사례 및 트렌드 : 사례연구와 트렌드 관련 괜찮은 내용
.....유튜브와 경쟁대신 구독 전환한 비디오 플래폼 비메오 사례

서울에 생긴 Vultr 서버 100$ 프로모션

안녕하세요?
새로운 사이트 구축을 위한 신규 서버를 고민하신다면 , 서울 리젼이 생겨 더욱 빨라진 Vultr 서버를 Vultr 100$ 프로모션으로 이용해 보세요.

아래 프로모션 코드 링크를 통해 Vultr에서 서버 구축 후 1달 이상 사용 및 $25이상 결제 時 추가 100$을 주는 프로모션입니다.

Vultr는 서울에도 리젼이 있어 매우 빠르고, 아마존 웹 서비스(AWS)보다 성능이 높으며 가장 가성비가 뛰어납니다.

거기다 사용자 UI도 좋고, 15개까지 스냅샷을 무료로 제공하기 때문에 관리하기 좋습니다. 그리고 지금 100$ 프로모션처럼 가격적인 메리트도 있습니다.

우분투 20.04와 PHP 8 기반 워드프레스 설치 방법

가상 서버를 운영하고픈 勇者에게 전하는 가상 서버 운영 입문 노하우 – Vultr 가상서버호스팅(VPS)를 중심으로

워드프레스 최적화를 위한 18개월간의 고민, 그 노하우를 담다.

도쿄 리젼과 비교해 본 Vultr 서울 리젼 사용기

가성비가 뛰어난 Vultr 가상서버호스팅(클라우드호스팅,VPS) 사용기

Subscribe
Notify of
guest
0 Comments
Oldest
Newest
Inline Feedbacks
View all comments