GCP 워드프레스 이미지 포맷 왜 중요할까? JPG PNG WebP 차이 (+썸네일 오류 원인) #16
GCP 무료 서버에 워드프레스를 설치하고 글을 쓰다 보면 이미지 업로드 하나에도 생각보다 많은 문제가 생깁니다.
이전 글에서 다뤘던 “The server cannot process the image” 오류도 결국 이미지 처리 문제에서 시작되는데요.
이번에는 그 근본 원인인 이미지 포맷과 해상도(px)에 대해 정리해보겠습니다.
이미지 포맷은 블로그 속도(LCP 점수)와 서버 스토리지 용량을 결정짓는 핵심 요소라, GCP e2-micro 같은 저사양 서버 사용자라면 그 차이를 반드시 알아둘 필요가 있습니다!
Table of Contents
1️⃣ JPG, PNG 차이 (핵심 요약)
이미지 파일을 저장할 때 JPEG(Joint Photographic (Experts) Group)와 PNG (Portable Network Graphics) 이 두 가지 형식을 가장 많이 사용합니다.
JPG와 PNG 차이를 보면 이렇습니다.
- JPG → 용량 작음, 사진용
- 사진처럼 색상이 복잡한 이미지에 적합 (용량 작음)
- JPG는 JPEG(Joint Photographic Experts Group)의 줄임말이며,
- 초기 운영체제의 확장자 길이 제한 때문에 JPG 형태로 사용됨
- JPEG는 이름, JPG는 파일 확장자
- 옛날 MS-DOS 시절 파일 확장자를 3글자까지만 쓸 수 있던 제한 때문에 생김
- JPG → JPEG → 단체 이름 (Joint Photographic Experts Group)
- PNG → 화질 유지, 투명 배경 가능, 용량 큼
- 투명 배경이 필요하거나 로고처럼 선명한 텍스트/도형 이미지에 적합 (용량 큼)
- Portable Network Graphics의 줄임말
- 웹에서 안정적으로 쓸 수 있는 이미지 포맷
- PNG는 원래 GIF를 대체하려고 만들어진 포맷
- 인터넷에서 쓰기 좋고
- 특허 문제 없이
- 화질 유지되는 이미지를 목표로 만들어짐
- PNG는 원래 GIF를 대체하려고 만들어진 포맷
- 무손실 압축 → 화질 유지
- 투명 배경 지원
- 웹 전송에 최적화
- WebP (보너스): 요새 대세! 화질은 JPG급인데 용량은 훨씬 작음.
- GeneratePress나 최신 워드프레스에서 기본 지원하는 핫한 이미지 포맷
- WebP → 구글이 만든 제품/포맷 이름
- WebP = 약자가 아니라 “웹용 이미지”라는 의미의 이름
여기서 중요한 게
→ JPG는 손실 압축
→ PNG는 무손실 압축
그동안 블로그 작업 할 때 아무 생각없이 PNG 형식으로 저장한 이미지 파일을 올렸는데 손실 압축? 무손실 압축? 도대체 뭐가 손실됐단건지, 이 차이가 뭐가 중요하단건지 알쏭달송한데요. 이 둘 차이가 뭔지 빠르게 알아보겠습니다.
2️⃣ 손실 압축 vs 무손실 압축
거두절미하고 바로 설명 들어갑니다.
- 손실 압축 (Lossy Compression)
- 이미지를 저장할 때 일부 정보를 버려서 용량을 줄이는 방식입니다.
- 👉 눈에 잘 안 보이는 색 차이나 디테일을 줄임
- 이미지를 저장할 때 일부 정보를 버려서 용량을 줄이는 방식입니다.
반대로
- 무손실 압축 (Lossless Compression)
- 이미지 정보를 그대로 유지합니다.
- 👉 대신 파일이 커짐
- 이미지 정보를 그대로 유지합니다.
대충 무슨 말인지 알 것 같지만 그럼에도 무슨 차이가 있단 것인지 잘 이해가 되지 않아서 한 단계 더 깊게 파 보았습니다.
3️⃣ px(픽셀) = 진짜 중요한 기준
이미지에서 더 중요한 건 사실 “용량(KB)”이 아니라 픽셀(Pixel)입니다.
px는 픽셀(pixel) 단위로 이미지의 가로·세로 해상도를 의미하는데요.
- 예:
- 1280 × 720 → 약 92만 픽셀
- 4000 × 3000 → 약 1,200만 픽셀
- 👉 숫자가 커질수록 서버가 처리해야 할 데이터가 폭증함을 의미합니다.
지금까지는 이미지 형식보다는 이미지 크기나 용량이 중요하다고 생각했기에 매번https://tinypng.com/ 사이트에서 이미지 용량을 줄이는 작업을 진행하였는데요.
갑자기 용량(KB)보다 픽셀(Pixel)이 더 중요하단 사실을 접하니 그동안 한 그 일련의 작업들이 그저 삽질일 뿐이었나 싶어 어안이 벙벙하더라고요.
- 📦 파일 용량(KB) → 업로드/다운로드 속도 영향
- 🧠 픽셀 수(px) → 메모리/처리 성능 영향
물론 이미지 용량 줄이는 게 아무 의미 없는 헛 일은 아니었지만 원리를 모르고 인터넷에 떠도는 tinypng에서 이미지 용량 줄이라는 말만 무지성으로 따라한 앵무새가 된 기분이라 뭔가 씁쓸합니다.ㅋㅋ
4️⃣ 왜 PNG가 워드프레스에서 더 잘 터질까
여기서 저 포함 많은 사람들이 헷갈리는 부분이 이걸 겁니다.
“PNG 용량이 JPG보다 더 작은데 왜 오류가 나지?”
🛠 워드프레스가 하는 작업:
- 이미지 업로드
- 압축 해제
- 픽셀 단위로 리사이즈
- 썸네일 여러 개 생성
👉 이때는:
“압축된 용량”이 아니라
“풀린 픽셀 데이터”가 기준이 됨
✔️ 핵심 이유
- PNG는 무손실 압축 → 데이터 그대로 유지
- 투명도 (알파 채널) → 처리 더 복잡
- 이미지 처리 시 메모리 사용량 증가
👉 결과:
GCP 무료 서버에서 썸네일 생성 실패 확률 증가
- 100KB PNG (4000px) → ❌ 터짐
- 300KB JPG (1200px) → ✅ 정상
인간은 용량(KB)을 줄이면 가벼워졌다고 생각하지만, 워드프레스는 이미지를 처리할 때 픽셀 단위로 작업하기 때문에 해상도(px)가 높을수록 서버 부담이 훨씬 커집니다.
그 때문에 GCP 저사양 무료 서버 기반 워드프레스에서 이미지 용량이 작은 PNG 형식의 이미지가 문제를 일으키는 것이랄까요?
5️⃣ 실제로 터지는 기준
GCP e2-micro 무료 서버 기준으로 보면 이렇습니다.
- 1200px 이하 → 안정
- 1400px → 거의 안전
- 1600px 이상 → 가끔 실패
- 2000px 이상 → 자주 실패
👉 특히 PNG는 더 민감합니다.
6️⃣ 실전 추천 세팅 (이대로 쓰면 됨)
GCP e2-micro 무료 서버 Click-to-Deploy 발 워드프레스 기준에서 부합하는 이미지 기준입니다.
📷 블로그 이미지 기준
- 가로 1280px + 16:9 비율(=720px)
- 실사용 기준 = 800~1000px이 제일 현실적
- 포맷: JPG
- 품질: 75~80
워드프레스 블로그 기준으로는 800~1000px 정도만 사용해도 충분히 선명하며,
서버 부담을 줄이기 위해 과도한 고해상도 이미지는 피하는 것이 좋습니다.
🎨 PNG 사용해야 하는 경우
- 로고
- 투명 배경 필요할 때
👉 이때는:
- 1200px 이하 유지 필수
7️⃣ WebP 포맷 (요즘은 이게 정답에 가까움)
요즘 이미지 최적화 이야기하면 빠지지 않는 게 WebP입니다.
구글에서 만든 이미지 포맷인데 JPG와 PNG의 장점을 합친 형태라고 보면 됩니다.
✔️ WebP 특징
- JPG보다 용량 더 작음
- PNG처럼 투명 배경 지원
- 화질 대비 압축 효율 매우 좋음
👉 한마디로:
“더 가볍고, 더 똑똑한 이미지”
8️⃣ JPG / PNG / WebP 비교
| 구분 | JPG | PNG | WebP |
| 압축 방식 | 손실 | 무손실 | 둘 다 지원 |
| 용량 | 작음 | 큼 | 가장 작음 |
| 투명 배경 | ❌ | ✅ | ✅ |
| 속도 | 빠름 | 느림 | 가장 빠름 |
| 추천 용도 | 사진 | 로고 | 웹 최적화 |
🔥 왜 WebP가 좋은가 (중요)
같은 이미지 기준으로 보면:
- JPG → 200KB
- PNG → 500KB
- WebP → 120KB 수준 가능
👉 즉:
페이지 로딩 속도 개선 + 서버 부담 감소
⚠️ WebP 단점 (그래도 알아야 함)
- 일부 구형 브라우저 호환성 문제 (요즘은 거의 해결됨)
- 워드프레스 기본 설정에서는 자동 변환 안 될 수도 있음
🛠️ 워드프레스에서 WebP 쓰는 방법
✔️ 방법 1 (가장 쉬움)
플러그인 사용
- ShortPixel
- Imagify
- Smush
👉 업로드하면 자동 WebP 변환
✔️ 방법 2 (서버 설정)
- ImageMagick 활용
- 또는 CDN (Cloudflare 등)
🎯 실전 결론
👉 지금 당장 안정성:
- JPG 사용 (가장 안전)
👉 속도 + 최적화:
- WebP 사용 (추천)
👉 특수 상황:
- PNG (투명 배경 필요할 때만)
9️⃣ 한 줄 정리
위에 내용이 복잡해서 모르겠다면 이 한 줄만 이해하면 됩니다.
👉 JPG는 “미리 가볍게 만든 이미지”
👉 PNG는 “서버가 힘들게 처리해야 하는 이미지”
👉 WebP = JPG보다 가볍고 PNG 기능까지 되는 “웹 최적화 이미지”
GCP 무료 서버는 용량이 금방 차기 때문에, 투명 배경이 필요한 로고가 아니라면 무조건 JPG나 WebP를 쓰는 게 정신 건강에 좋습니다!
이미지 자체가 너무 크면(고해상도 PNG 등) e2-micro 서버의 메모리가 썸네일을 만들다가 뻗어버려서 오류가 날 수 있기 때문입니다.
💡 마무리
워드프레스에서 이미지 오류는 설정 문제처럼 보이지만
사실은
이미지 구조 + 서버 성능 문제인 경우가 많습니다.
특히 GCP 무료 서버에서는 이미지 하나만 잘못 올려도 오류가 나는 경우가 흔합니다.
그렇기에 오류 하나 뜰때마다 분노 폭발 하지 말지어다.
워드프레스 오류 하나 하나에 일희일비 하지 말고,
아! 또 시작이냐?
하며 웃어 넘기는 여유가 필요합니다.
웃는 자에게 복이 있나니…. 사실 개빡쳐서 하는 말인건 안 비밀!!!
📌 이전 글: GCP 워드프레스 썸네일 생성 오류 해결 (#15)
👉 다음 글: 워드프레스 이미지 최적화 (용량 줄이기 & 속도 개선) #17