웹용 이미지 저장 형식 완벽 정리, WebP vs JPG vs PNG 무엇을 골라야 할까?

 

안녕하세요! 어느덧 12번째 시간입니다. 지난 시간에는 흔들린 사진에 생명력을 불어넣는 심폐소생술을 배워봤죠. 이제 사진 보정의 기술적인 부분은 거의 마스터하셨다고 봐도 무방합니다. 하지만 이렇게 정성 들여 만든 결과물을 블로그에 올릴 때, 마지막 '저장 버튼' 하나로 공든 탑이 무너질 수 있다는 사실, 알고 계셨나요?

저도 블로그 초보 시절에는 "무조건 최고 화질이 장땡이지!"라는 생각에 모든 이미지를 무거운 PNG-24로 저장해서 올리곤 했습니다. 결과는 참담했죠. 제 블로그 페이지 로딩 속도는 거북이처럼 느려졌고, 구글 페이지스피드 인사이트(PageSpeed Insights) 점수는 빨간불이 들어왔습니다. 애드센스 승인을 노린다면 이미지 최적화는 선택이 아닌 필수입니다. 오늘은 제가 수백 번의 포스팅을 통해 체득한 상황별 이미지 포맷 선택 가이드를 아주 쉽게 풀어드릴게요.

1. 일상적인 사진과 풍경은 무조건 'JPG(JPEG)'

우리가 찍는 대부분의 사진은 JPG 형식이 가장 무난합니다. 수백만 가지의 색상을 표현하면서도 용량을 효과적으로 압축해주기 때문이죠.

• 직접 겪어보니: 제가 맛집 리뷰 사진 20장을 전부 PNG로 올렸을 때와 JPG(품질 80)로 올렸을 때의 용량 차이가 거의 10배 가까이 났습니다. 독자 입장에서는 사진 한 장 보는 데 3초 이상 기다려야 한다면 바로 뒤로 가기를 누르게 됩니다.

• 팁: 5편에서 배웠던 '웹용으로 저장' 기능을 활용해 품질(Quality)을 70~80 정도로 맞추세요. 육안으로는 100점짜리 화질과 구분이 안 되지만 용량은 획기적으로 줄어듭니다.

2. 투명 배경과 텍스트 위주는 'PNG'

9편에서 워터마크를 만들 때 배경을 투명하게 설정했던 것 기억하시나요? 이처럼 배경이 없어야 하거나, 글자가 아주 선명하게 보여야 하는 이미지에는 PNG가 답입니다.

• 특징: PNG는 '무손실 압축' 방식이라 JPG처럼 글자 주변이 자글자글하게 깨지는 '아티팩트' 현상이 없습니다. 도표, 그래프, 로고, 혹은 텍스트가 많은 튜토리얼 캡처 화면은 PNG-8이나 PNG-24를 선택하세요.

• 주의사항: 사진을 PNG로 저장하는 건 금물입니다. 용량이 감당 안 될 정도로 커지거든요. 용도에 맞게 'PNG는 그래픽과 투명화용'이라고 머릿속에 저장해두세요.

3. 구글이 사랑하는 차세대 포맷 'WebP(웨피)'

애드센스 승인과 상위 노출을 노리는 분들이라면 반드시 친해져야 할 포맷입니다. 구글이 만든 이 포맷은 JPG의 압축률과 PNG의 투명화 장점을 모두 가지고 있습니다.

• 실전 활용: 요즘 저는 모든 블로그 이미지를 WebP로 저장합니다. 똑같은 화질의 JPG보다 용량이 30% 이상 더 작거든요. 포토샵 최신 버전에서는 [복사본 저장]을 통해 아주 쉽게 WebP를 선택할 수 있습니다.

• 경험담: 처음 WebP를 도입했을 때 구글 서치 콘솔에서 'LCP(최대 콘텐츠 칠함)' 지표가 눈에 띄게 개선되는 걸 확인했습니다. 페이지 로딩 속도가 빨라지니 체류 시간도 자연스럽게 늘어나더라고요.

4. 나만의 저장 공식: 상황별 포맷 결정 트리

매번 고민하기 귀찮으시죠? 제가 사용하는 공식을 그대로 가져가세요.

1. 인물, 풍경, 음식 사진이다 → WebP (지원 안 되는 환경 대비책이 필요하면 JPG)

2. 배경이 투명해야 하는 로고나 아이콘이다 → PNG

3. 글자가 많고 선명해야 하는 가이드 이미지다 → PNG

4. 움직이는 짤방을 만들고 싶다 → GIF (요즘은 짧은 영상으로 대체하는 추세지만요)

5. 메타데이터 삭제로 마지막 1KB까지 다이어트하기

포토샵에서 그냥 저장하면 사진에 '어떤 카메라로 찍었는지', 'GPS 정보는 무엇인지' 등의 정보가 포함됩니다. 블로그 독자에게는 전혀 필요 없는 데이터죠.

• 노하우: [웹용으로 저장] 창 오른쪽에서 '메타데이터(Metadata)' 옵션을 '없음(None)'으로 설정하세요. 이것만으로도 사진 한 장당 수십 KB를 더 아낄 수 있습니다. 티끌 모아 태산이라고, 사진이 10장, 20장 들어가는 포스팅에서는 이 차이가 로딩 속도 1초를 결정합니다.

---

핵심 요약

• 사진형 콘텐츠는 [WebP] 또는 [JPG(품질 80)]를 사용하여 로딩 속도를 최적화한다.

• 로고, 도표, 투명 배경이 필요한 이미지는 반드시 [PNG] 형식을 사용한다.

• 구글 SEO와 애드센스 최적화를 위해 가급적 압축률이 뛰어난 [WebP] 포맷을 우선 고려한다.

• 저장 시 불필요한 [메타데이터]를 삭제하여 이미지 용량을 끝까지 다이어트한다.