열심히 쓴 글인데 구글 페이지스피드(PageSpeed) 점수가 빨간불이 떴을 때의 그 당혹감, 저도 잘 압니다. 텍스트는 몇 킬로바이트(KB)밖에 안 되는데, 대체 무엇이 문제일까요?
범인은 90% 확률로 ‘잘못된 이미지 포맷’입니다. 무심코 저장한 PNG 파일 하나가 내 블로그의 발목을 잡고 있을 수 있거든요. 오늘 이 글을 다 읽으실 때쯤이면, 어떤 상황에서 어떤 확장자를 써야 가장 선명하고 가벼운지 ‘직관적’으로 판단하게 되실 겁니다.
1. 구관이 명관? JPG와 PNG의 명확한 차이
가장 익숙한 두 녀석부터 정리해 보죠. 이걸 헷갈리면 뒤에 나올 신기술도 소용이 없습니다.
먼저 JPG(JPEG)는 ‘사진’을 위해 태어났습니다. 색상이 다채로운 풍경, 인물 사진에는 무조건 JPG입니다. 압축률이 좋아서 용량이 작거든요. 반면 PNG는 ‘투명 배경’이 필요하거나 색상이 단순한 ‘그래픽/로고’에 씁니다.
“2016년쯤이었을 겁니다. 여행 블로그를 운영하던 클라이언트가 사이트가 너무 느리다며 울상을 짓더군요. 뜯어보니 고해상도 여행 사진 20장을 전부 PNG로 올려놨더라고요. 장당 5MB가 넘었죠. 그걸 전부 JPG로 변환하고 압축했더니 로딩 시간이 7초에서 1.5초로 줄었습니다. 그때 클라이언트의 표정을 잊을 수가 없네요.”
즉, 카메라로 찍은 사진을 PNG로 저장하는 건, 장을 보러 가는데 덤프트럭을 몰고 가는 것과 같습니다. 기름값(데이터)만 낭비하는 꼴이죠.
2. 게임 체인저의 등장: WebP와 SVG
이제 시대가 변했습니다. 구글이 사랑하는 포맷들이 주류가 되었죠.
- ✅ WebP (웹피): 구글이 만든 ‘웹 전용’ 포맷입니다. JPG보다 화질은 좋은데 용량은 30% 이상 작습니다. 투명 배경도 지원합니다. 웬만하면 이걸 쓰는 게 정답입니다.
- ✅ SVG (벡터): 이건 이미지가 아니라 ‘코드’입니다. 아무리 확대해도 깨지지 않죠. 로고나 아이콘에 씁니다.
💡 코드캠의 실전 TIP
“WebP가 좋은 건 알겠는데 변환이 귀찮죠? ‘Squoosh.app’ 같은 무료 사이트를 즐겨찾기 해두세요. 프로그램 설치 없이 드래그 한 번이면 WebP 변환과 용량 압축이 동시에 끝납니다. 저는 이 작업 없이 포스팅 발행 안 합니다.”
3. 딱 정해드립니다 (상황별 치트키)
복잡한 이론은 됐고, 당장 뭘 써야 할지 모르겠다면 아래 기준만 기억하세요. 이것만 지켜도 상위 10% 블로그가 됩니다.
1. 복잡한 사진 (음식, 풍경, 인물)
👉 1순위: WebP (가장 추천)
👉 2순위: JPG (WebP 변환이 귀찮을 때)
2. 단순한 그래픽 (스크린샷, 차트, 그래프)
👉 PNG 또는 WebP (글자가 뭉개지지 않아야 함)
3. 로고, 아이콘
👉 SVG (확대해도 선명함, 용량 극소)
마치며
이미지 최적화는 단순히 용량을 줄이는 게 아닙니다. 내 글을 보러 온 독자에게 ‘쾌적한 환경’을 선물하는 배려입니다. 로딩이 빠른 블로그는 구글도 좋아하고, 독자도 좋아합니다.
혹시 지금 운영 중인 블로그 이미지들이 걱정되시나요?
댓글로 상황을 남겨주시면, 어떤 포맷으로 바꾸는 게 좋을지 딱 정해드리겠습니다!
