블로그 이미지 용량 줄여서 로딩 속도 올리기

2026. 08. 03

블로그에 사진을 여러 장 넣은 글은 스크롤할 때마다 이미지가 뒤늦게 떠서 화면이 덜컹거립니다. 방문자는 그 몇 초를 기다려 주지 않고, 검색엔진도 이 지표를 보고 있습니다.

속도가 검색에 영향을 줍니다

구글은 페이지 경험 지표(Core Web Vitals)를 검색 순위 신호로 사용한다고 공식적으로 밝혔습니다. 그중 LCP는 화면에서 가장 큰 요소가 표시되기까지의 시간을 재는데, 블로그 글에서 그 “가장 큰 요소”는 대개 첫 번째 이미지입니다.

즉 본문 상단 이미지 한 장의 용량이 그 글의 속도 점수를 좌우합니다. 순위를 위해서가 아니더라도, 읽으러 온 사람이 기다리지 않게 하는 편이 낫습니다.

블로그 본문 이미지는 가로 800에서 1200픽셀이면 충분합니다. 본문 영역 자체가 그보다 넓지 않기 때문입니다. 고해상도 화면을 고려해도 1200이면 여유가 있습니다.

용량은 장당 200KB 안팎을 목표로 잡으면 무난합니다. 사진 열 장이 들어간 글이라면 이미지 총량이 2MB 정도가 되는데, 이 정도면 대부분의 환경에서 답답하지 않습니다.

스마트폰 원본이 장당 3에서 5MB인 것을 생각하면, 줄일 여지가 아주 큽니다.

크기를 줄인 다음에도 여유가 필요하다면 형식을 바꿔 보세요. WebP는 같은 화질에서 JPG보다 파일이 작습니다. 최신 브라우저는 모두 지원하므로 웹에 올리는 이미지라면 문제가 없습니다.

블로그 플랫폼에 따라 WebP 업로드를 받지 않는 경우가 있으니, 올리기 전에 한 장 시험해 보시는 걸 권합니다. 받지 않는다면 JPG로 두고 크기와 화질만 조정해도 충분히 효과가 있습니다.

썸네일과 본문 이미지를 같은 크기로 씁니다. 목록에 작게 뜨는 썸네일에 1200픽셀 이미지를 쓰면 낭비입니다. 플랫폼이 자동으로 줄여 주더라도 원본은 그대로 전송되는 경우가 있습니다.

캡처 이미지를 JPG로 저장합니다. 글자가 많은 화면 캡처는 JPG로 저장하면 글자 주변이 지저분해집니다. 캡처는 PNG나 무손실 WebP가 맞습니다.

한 번 줄인 이미지를 또 줄입니다. 압축은 반복할수록 화질이 계단식으로 나빠집니다. 항상 원본에서 시작하세요.

이미지를 가볍게 만드는 것과 별개로, 화면에 보이기 전까지 내려받지 않는 방법이 있습니다. 지연 로딩(lazy loading)이라고 부릅니다.

요즘 브라우저는 이미지 태그에 loading="lazy" 속성만 붙이면 알아서 처리합니다. 블로그 플랫폼 대부분이 기본으로 적용하고 있어서 신경 쓰지 않아도 되는 경우가 많지만, 직접 HTML을 다루는 환경이라면 확인해 볼 만합니다.

다만 본문 첫 이미지에는 지연 로딩을 걸지 마세요. 화면에 바로 보이는 이미지인데 로딩을 미루면 오히려 LCP가 나빠집니다. 첫 이미지는 빠르게, 아래쪽 이미지는 지연으로 두는 것이 맞습니다.

이미지가 뒤늦게 뜨면서 아래 글이 밀려 내려가는 현상을 겪어 보셨을 겁니다. 이것도 구글이 재는 지표(CLS)에 잡힙니다.

해결은 간단합니다. 이미지의 가로세로 크기를 미리 알려 주면 브라우저가 자리를 먼저 확보해 둡니다. 블로그 에디터로 올릴 때는 대개 자동으로 들어가지만, 직접 태그를 쓴다면 width와 height를 함께 적어 주세요.

이미지를 일괄로 리사이즈해 두면 크기가 일정해져서 이 작업도 쉬워집니다.

과거 글까지 전부 다시 올리는 건 현실적이지 않습니다. 방문자가 많은 글부터 손보세요. 통계에서 상위 글 몇 개만 정리해도 체감 효과가 큽니다. 나머지는 새 글을 쓸 때부터 기준을 지키면 시간이 지나며 자연스럽게 정리됩니다.