블로그 글이 좋은데도 모바일에서 이미지가 늦게 뜨면 이탈이 늘어납니다. 이미지는 텍스트보다 용량이 커서, 최적화하지 않으면 페이지 로딩의 병목이 되기 쉽습니다. 특히 고해상도 스마트폰으로 찍은 사진을 그대로 올리면 수 메가바이트가 되기도 합니다.
이미지 최적화는 화질을 희생하라는 뜻이 아닙니다. 화면에 보이는 크기에 맞게 해상도를 줄이고, 효율적인 형식을 쓰고, 지연 로딩을 적용하는 실무 작업입니다. 한 번 절차를 정해 두면 글을 발행할 때마다 반복하기 쉽습니다.
이 글에서는 촬영·내보내기 단계부터 업로드 설정, 본문 배치까지 로딩 속도를 개선하는 실용 팁을 정리합니다.
핵심 요약
- 업로드 전에 실제 표시 너비에 맞게 리사이즈하세요.
- JPEG·WebP 등 용도에 맞는 형식을 고르고, 과도한 화질 설정을 피합니다.
- 파일명은 내용을 알 수 있는 영문·숫자로 통일하면 관리에 유리합니다.
- 본문 아래쪽 이미지는 지연 로딩을 활용하세요.
- 같은 이미지를 여러 크기로 쓰지 말고, 용도별 버전을 최소화합니다.
표시 크기보다 큰 원본을 올리지 않는다
블로그 본문 폭이 720~800픽셀 전후라면, 4000픽셀 원본을 올릴 필요가 없습니다. 가로 1200~1600픽셀 정도면 대부분의 레티나 화면에서도 충분히 선명합니다. 썸네일은 더 작아도 됩니다.
이미지 편집 도구나 운영체제 기본 앱에서 '내보내기' 시 긴 변 기준으로 크기를 제한하세요. 용량이 300~500KB를 크게 넘는 사진이 반복된다면, 리사이즈부터 점검하는 것이 순서입니다. 인포그래픽처럼 텍스트가 많은 이미지는 너무 줄이면 가독성이 떨어지므로, 예외적으로 여유를 둡니다.
형식과 압축률을 용도에 맞게
사진 이미지는 JPEG 또는 WebP가 무난하고, 로고·아이콘처럼 색이 단순하고 투명도가 필요하면 PNG나 SVG가 적합합니다. 최신 형식은 용량 대비 화질이 좋은 편이지만, 플랫폼이 지원하는지 확인해야 합니다.
압축률은 '눈으로 볼 때 거슬리지 않는 선'에서 멈추면 됩니다. 최고 화질로 저장하면 용량만 커지고 차이는 거의 안 보이는 경우가 많습니다. 같은 장면을 두세 가지 설정으로 저장해 비교해 보면, 본인만의 기준이 생깁니다.
파일명과 대체 텍스트를 챙긴다
`IMG_3847.jpg` 같은 이름은 나중에 찾기 어렵습니다. `calendar-blocking-example.jpg`처럼 내용을 나타내는 이름이 관리와 접근성에 도움이 됩니다. 본문에는 이미지가 전달하는 정보를 설명하는 대체 텍스트(alt)를 짧게 넣으세요. 검색 키워드를 나열하기보다, 시각 정보가 없는 환경에서도 맥락이 통하도록 쓰는 편이 좋습니다.
본문 배치와 지연 로딩
첫 화면에 보이는 대표 이미지는 빠르게 로드되는 것이 중요하고, 스크롤 아래 이미지는 지연 로딩을 적용하면 초기 로딩이 가벼워집니다. 많은 플랫폼과 프레임워크가 기본 옵션으로 제공합니다.
한 글에 이미지를 과도하게 넣으면 최적화해도 총량이 커집니다. 설명에 꼭 필요한 스크린샷·도식 위주로 넣고, 비슷한 화면을 반복해 붙이지 마세요. 긴 스크린샷은 핵심 영역만 잘라 쓰는 편이 용량과 가독성 모두에 유리합니다.
| 단계 | 할 일 | 목표 |
|---|---|---|
| 촬영·수집 | 불필요한 여백 제거 | 주제만 남기기 |
| 리사이즈 | 가로 1200~1600px 내외 | 과대 해상도 방지 |
| 압축 | 적정 화질로 저장 | 수백 KB대 유지 |
| 업로드 | 파일명·alt 작성 | 관리·접근성 |
| 발행 | 지연 로딩 확인 | 초기 로딩 개선 |
발행 후 점검
브라우저 개발자 도구의 네트워크 패널에서 이미지 용량을 보면, 어떤 파일이 무거운지 바로 드러납니다. 모바일 환경이나 저속 네트워크 시뮬레이션으로 한 번 더 확인해 보세요. 홈과 목록 페이지는 썸네일이 많으므로, 본문 이미지와 별도로 작은 버전을 쓰는지 플랫폼 설정을 확인하는 것이 좋습니다.
- 본문 폭에 맞게 리사이즈했다
- 용량이 과도한 파일을 재압축했다
- 파일명을 의미 있는 문자열로 바꿨다
- 대체 텍스트를 작성했다
- 지연 로딩 적용 여부를 확인했다
FAQ
화질이 너무 뭉개지면 어떻게 하나요?
해상도를 너무 줄였거나 압축률이 과한 경우입니다. 가로 픽셀을 조금 늘리고 압축을 완화해 균형을 맞추세요.
GIF는 써도 되나요?
짧은 동작 표현에는 유용하지만 용량이 커지기 쉽습니다. 가능하면 짧은 동영상이나 정적 이미지로 대체하는 편이 로딩에 유리할 때가 많습니다.
CDN이나 유료 이미지 서비스가 필요한가요?
트래픽이 커지기 전에는 기본 최적화만으로도 충분한 경우가 많습니다. 방문자가 늘고 이미지 비중이 높아지면 그때 검토해도 늦지 않습니다.
마무리
이미지 최적화는 한 번의 대공사가 아니라, 발행 전 체크리스트에 넣는 습관입니다. 다음 글에 올릴 사진 한 장만 리사이즈와 압축을 적용해 보세요. 페이지가 가벼워질수록 모바일 독자가 글을 끝까지 읽을 가능성이 높아집니다.
