블로그·쇼핑몰 이미지 최적화 가이드 — 용량 줄이고 속도·SEO 올리기
이미지는 웹페이지에서 가장 무거운 자원인 경우가 많습니다. 사진 몇 장이 페이지 전체 용량의 대부분을 차지하면서 로딩을 느리게 만들고, 결국 방문자 이탈과 검색 순위 하락으로 이어집니다. 이 글에서는 화질을 지키면서 용량을 줄이는 실전 워크플로우를 정리합니다.
1. 왜 이미지 최적화가 중요한가
구글은 페이지 체감 속도를 코어 웹 바이탈(Core Web Vitals) 지표로 평가해 검색 순위에 반영합니다. 특히 가장 큰 이미지가 늦게 뜨면 LCP(최대 콘텐츠풀 페인트) 점수가 나빠집니다. 모바일 사용자의 절반 이상은 로딩이 3초만 넘어도 이탈한다는 분석도 있습니다. 즉, 이미지 최적화는 단순한 용량 절약이 아니라 매출·트래픽과 직결되는 작업입니다.
2. 포맷부터 제대로 고르기
- 실사 사진: JPG 또는 WebP(손실). 색이 풍부한 사진에 적합합니다.
- 로고·아이콘·투명 배경: PNG 또는 WebP(무손실). 투명도가 필요할 때 씁니다.
- 웹 게시 전반: 가능하면 WebP. 같은 화질에서 JPG보다 25~34%, PNG보다 26% 가볍습니다.
3. 용도별 적정 용량·해상도 기준
| 용도 | 권장 가로폭 | 권장 용량 |
|---|---|---|
| 블로그 본문 | 1200~1600px | 200KB~1MB |
| 목록·썸네일 | 400~600px | 50~200KB |
| 쇼핑몰 상세 | 800~1080px | 100~500KB |
| SNS 공유 | 1080px 내외 | ~500KB |
4. 실전 워크플로우 (설치 없이 브라우저에서)
아래 순서대로 처리하면 화질 손상을 최소화하면서 용량을 크게 줄일 수 있습니다. 모든 단계는 파일을 서버로 보내지 않고 브라우저 안에서 처리됩니다.
- 해상도 정리: 실제 표시 크기보다 지나치게 큰 원본이면 먼저 적정 해상도로 줄입니다.
- 용량 압축: 용량 압축기에서 목표 용량(예: 1MB 이하)을 정해 일괄 압축합니다.
- WebP 변환: WebP 변환기로 바꾸면 같은 화질에서 추가로 용량이 줄어듭니다.
- (선택) 워터마크: 도용이 걱정되면 워터마크 삽입기로 저작권 표시를 넣습니다.
5. 발행 전 체크리스트
- 가장 큰 이미지가 1MB를 넘지 않는가?
- 용도에 맞는 포맷(사진=JPG/WebP, 투명=PNG/WebP)을 골랐는가?
- 해상도가 표시 크기에 비해 과하지 않은가?
- 대표 이미지에 의미 있는 파일명·alt 텍스트를 넣었는가?
💡 자주 묻는 질문
Q. 압축하면 화질이 많이 떨어지나요?
A. 품질 80~85% 수준이면 육안상 거의 차이가 없습니다. 500KB 이하로 과하게 줄일 때만 디테일 손실이 보일 수 있습니다.
Q. WebP를 쓰면 옛날 브라우저에서 깨지지 않나요?
A. 현대 브라우저는 모두 지원합니다. 안전하게 하려면 <picture> 태그로 JPG 폴백을 함께 제공하면 됩니다.