웹사이트 이미지 용량 줄이는 법

블로그나 쇼핑몰 페이지가 느리게 열린다면 이미지부터 살펴보세요. 구글 검색 센터 문서도 이미지가 페이지 전체 크기에서 가장 큰 부분을 차지하는 경우가 많다고 설명해요. 이 글에서는 화질은 지키면서 용량을 줄이는 순서를 정리할게요.

왜 이미지 용량을 줄여야 할까요?

이미지가 크면 페이지가 늦게 뜨고, 모바일 데이터도 더 많이 써요. 방문자는 기다리다 창을 닫을 수 있어요. 구글도 페이지 속도를 확인하라고 권하면서 PageSpeed Insights 같은 도구를 안내해요.

web.dev의 이미지 안내는 화면에 보이는 크기보다 훨씬 큰 이미지를 보내면, 겉보기엔 멀쩡해도 데이터를 낭비하고 성능을 떨어뜨린다고 설명해요. 결국 "보이는 만큼만 보내기"가 핵심이에요.

가장 효과가 큰 방법은 픽셀 크기를 줄이는 거예요. 휴대폰 카메라 사진은 가로 4000픽셀이 넘는 경우가 흔한데, 블로그 본문 폭은 보통 그보다 훨씬 좁아요. 가로 픽셀을 절반으로 줄이면 픽셀 수는 4분의 1로 줄어들어서 용량도 크게 줄어요.

본문 폭이 800픽셀이라면 이미지를 가로 800~1600픽셀 정도로 준비하면 충분해요. 1600픽셀은 화면 밀도가 높은 휴대폰에서도 선명하게 보이도록 두 배로 잡은 값이에요. 크기 조절은 이미지 크기 조절·자르기에서 가로 픽셀만 넣고 "비율 고정"을 켜 두면 돼요.

형식마다 잘하는 일이 달라요. MDN의 이미지 형식 안내를 바탕으로 정리하면 이래요.

MDN은 손실 WebP가 비슷한 화질의 JPEG보다 평균 25~35% 작다고 설명해요. 웹사이트용이라면 WebP를 먼저 고려해 볼 만해요. 형식은 이미지 형식 변환에서 바꿀 수 있어요.

JPG와 WebP는 저장할 때 품질 값을 정해요. 품질을 낮출수록 용량이 줄지만, 너무 낮추면 경계가 뭉개지고 얼룩이 보여요. 정답 값은 없고, 사진에 따라 달라요.

이미지 압축는 품질 기본값이 75%이고, 원본과 결과 용량을 나란히 보여줘요. 75%에서 결과를 확대해 보고, 괜찮으면 조금씩 낮춰 보는 식으로 찾아가면 돼요. 이미 많이 압축된 사진은 더 줄지 않을 수 있어요.

이미지 파일 자체를 줄였다면, 페이지에 넣는 방식도 한 번 살펴보세요. 직접 HTML을 다룰 수 있는 경우에 해당해요.

width와 height 속성을 적어 두면 이미지가 뜨기 전에 자리가 잡혀서, 글이 아래로 밀리는 현상이 줄어요.
srcset 속성으로 크기가 다른 이미지를 여러 개 지정하면, 기기가 자기 화면에 맞는 것을 골라 받아요. 구글은 이때도 src에 기본 이미지 주소를 꼭 함께 적으라고 권해요.
대체 텍스트(alt)는 이미지 내용을 짧게 설명하는 문장으로 써요. 키워드를 나열하는 건 피하라고 안내하고 있어요.

휴대폰으로 찍은 상품 사진을 쇼핑몰 상세 페이지에 올린다고 해 볼게요. 상세 페이지 본문 폭이 860픽셀이라면 이렇게 하면 돼요.