수익형 블로그를 운영하면서 가장 간과하기 쉬운 부분이 바로 이미지 최적화입니다. 정성껏 쓴 글이 구글 검색 결과 상단에 오르지 못하거나, 방문자가 들어오자마자 나가는 이유 중 상당수는 느린 페이지 로딩 속도에 있습니다.
그 해결책의 핵심인 WebP 파일 형식의 중요성과 이를 가장 쉽게 구현할 수 있는 Squoosh 활용법을 정리해 드립니다.
블로그 수익을 결정짓는 한 끗, WebP를 써야 하는 이유와 최적화 가이드
블로그 운영자라면 누구나 ‘어떻게 하면 구글 상단에 내 글을 올릴 수 있을까?’를 고민합니다. 키워드, 글의 양, 정보성 모두 중요하지만, 기술적인 측면에서 결코 무시할 수 없는 요소가 바로 Core Web Vitals(코어 웹 바이탈)입니다.
특히 이미지는 웹 페이지 용량의 60~80%를 차지하는 주범입니다. 오늘은 왜 우리가 구식 PNG, JPG를 버리고 WebP를 써야 하는지, 그리고 구글이 만든 최고의 도구 Squoosh를 어떻게 활용하는지 심층적으로 다뤄보겠습니다.
WebP란 무엇인가? (Next-Gen Image Format)
WebP(웹피)는 구글이 2010년에 발표한 웹 최적화 이미지 포맷입니다. 기존의 대표적인 포맷인 JPEG, PNG, GIF의 장점만을 모아 만든 ‘차세대 규격’이라고 할 수 있습니다.
- 손실/무손실 압축 지원: JPEG처럼 사진 형태의 이미지를 손실 압축할 수도 있고, PNG처럼 그래픽 형태를 무손실 압축할 수도 있습니다.
- 투명도 지원: PNG의 전유물이었던 투명 배경(Alpha 채널)을 지원하면서도 용량은 훨씬 가볍습니다.
- 애니메이션 지원: GIF보다 훨씬 고화질이면서 용량은 절반 이하인 움직이는 이미지를 만들 수 있습니다.
블로거가 반드시 WebP를 써야 하는 4가지 이유
① 구글 SEO(검색엔진 최적화) 점수 상승
구글은 웹사이트의 로딩 속도를 검색 순위 결정의 중요한 지표로 삼습니다. 동일한 정보라면 더 빨리 뜨는 사이트를 상단에 배치합니다. WebP를 사용하면 이미지 용량이 평균 25~35% 이상 감소하며, 이는 구글봇에게 “이 사이트는 사용자 친화적이다”라는 강력한 신호를 보냅니다.
② 사용자 이탈률(Bounce Rate) 감소
통계에 따르면 페이지 로딩이 3초 이상 걸릴 경우 방문자의 40%가 이탈합니다. 특히 모바일 환경에서는 이미지 용량이 로딩 속도에 치명적인 영향을 미칩니다. WebP는 저용량으로 고화질을 유지하여 독자가 기다림 없이 글을 읽게 만듭니다.
③ 서버 대역폭 및 스토리지 절약
워드프레스나 티스토리를 운영하다 보면 서버 용량이나 트래픽 제한에 부딪힐 때가 있습니다. PNG로 1MB인 이미지를 WebP로 100KB까지 줄인다면, 같은 서버 용량에 10배 더 많은 이미지를 저장할 수 있고 트래픽 비용도 획기적으로 줄어듭니다.
④ 모바일 퍼스트 인덱싱 대응
요즘 블로그 유입의 70~80%는 모바일입니다. 데이터 환경이 불안정한 모바일 사용자에게 고용량 PNG는 ‘데이터 도둑’과 같습니다. 최적화된 WebP는 모바일 사용자에게 쾌적한 환경을 제공합니다.
WebP 변환의 끝판왕, Squoosh(스쿼시) 소개
이미지 최적화는 구글 검색 상단 노출(SEO)을 위한 필수 조건입니다. 하지만 포토샵은 무겁고, 일반 무료 변환 사이트는 광고가 너무 많아 불편하셨죠?
구글 크롬팀에서 만든 Squoosh는 설치가 필요 없고 광고도 없는 최고의 이미지 압축 도구입니다.
Squoosh가 최고의 도구인 이유
- 완전 무료 및 광고 없음: 구글 크롬팀에서 제작한 오픈소스 도구로, 어떠한 광고나 유료 결제 유도가 없습니다.
- 브라우저 기반 처리: 이미지를 서버에 업로드하는 방식이 아니라, 본인의 웹 브라우저 내에서 직접 처리합니다. 따라서 보안이 뛰어나고 처리 속도가 매우 빠릅니다.
- 실시간 비교 뷰어: 압축 전후의 화질 차이를 슬라이더로 직접 비교하며 최적의 압축률을 찾을 수 있습니다.
Squoosh를 활용한 썸네일 최적화 실전 단계
이제 우리가 앞서 만든 잉크스케이프 썸네일(SVG)을 PNG로 내보냈다고 가정하고, 이를 Squoosh에서 WebP로 최적화하는 과정을 단계별로 설명합니다.
1단계: 이미지 불러오기
Squoosh 홈페이지에 접속한 뒤, 변환할 이미지를 드래그 앤 드롭합니다.
2단계: 출력 포맷 설정 (WebP)
우측 하단의 Edit 패널에서 Compress 항목을 클릭하고 WebP를 선택합니다. (더 나은 압축률을 원한다면 AVIF를 선택할 수도 있지만, 현재 범용성은 WebP가 가장 좋습니다.)
3단계: 압축률(Quality) 조절
- Effort: 압축 시도 횟수입니다. 숫자가 높을수록 압축 시간이 조금 더 걸리지만 용량은 더 줄어듭니다. 기본값인 4~6 정도면 충분합니다.
- Quality: 보통 75~80 사이를 추천합니다. 80 밑으로 내려가도 육안으로는 원본 PNG와 차이를 느끼기 어렵지만, 용량은 놀라울 정도로 줄어듭니다.
4단계: 리사이즈(Resize) 확인
이미지 가로 폭이 너무 크다면 Resize 옵션을 켜서 가로 폭을 800px~1000px 정도로 조정해 주세요. 썸네일이라면 645px 정도가 적당합니다.
5단계: 결과 확인 및 다운로드
하단의 수치를 보면 -85% 와 같이 용량이 얼마나 줄었는지 표시됩니다. 왼쪽 하단의 다운로드 아이콘을 누르면 최적화된 WebP 파일이 저장됩니다.
실전 팁: 블로그 운영 효율을 높이는 전략
SVG -> WebP 프로세스 구축
잉크스케이프로 만든 템플릿(SVG)은 텍스트 수정이 자유롭습니다.
- 잉크스케이프에서 제목만 바꿔서 PNG/WebP로 내보내기.
- 혹시 용량이 크다면 Squoosh에서 최종 압축.
- 워드프레스에 업로드.
워드프레스 사용자라면?
워드프레스 5.8 버전부터는 WebP 파일을 미디어 라이브러리에서 공식 지원합니다. 하지만 이미 올린 수많은 PNG/JPG가 걱정된다면 Converter for Media 같은 플러그인을 사용하여 기존 이미지를 일괄 WebP로 변환하는 것도 좋은 방법입니다.
“속도가 곧 수익이다”
블로그 운영은 단순히 글을 쓰는 행위를 넘어, 독자에게 최상의 경험을 제공하는 서비스 운영과 같습니다. WebP를 사용하는 작은 습관 하나가 페이지 속도를 개선하고, 이것이 쌓여 구글 상단 노출과 애드센스 수익 증대로 이어집니다.
지금 바로 Squoosh를 즐겨찾기에 추가하고, 오늘부터 업로드하는 모든 이미지를 WebP로 바꿔보세요. 눈에 띄게 빨라진 블로그를 체감하실 수 있을 것입니다.
🔗 관련 가이드 다시보기
이전에 설명해 드린 잉크스케이프 설치 및 썸네일 제작법을 아직 못 보셨다면 아래 링크를 확인해 보세요. 템플릿을 활용하면 WebP 썸네일 제작이 더욱 쉬워집니다.
이 글과 함께 읽으면 좋은 추천 포스팅
가이드에 따라 고화질 WebP 썸네일을 직접 만들어 보세요!
댓글 남기기