매장 사진이나 제품 컷은 잘 찍을수록 파일이 커집니다. 요즘 휴대폰으로 찍은 사진 한 장이 5~10MB를 넘기는 일은 흔한데, 이걸 그대로 홈페이지에 올리면 손님 휴대폰에서는 화면이 한참 하얗게 멈췄다가 사진이 뒤늦게 '툭' 하고 떠오릅니다. 그 몇 초 사이에 손님은 이미 뒤로가기를 누릅니다. 화질을 포기하지 않으면서도 페이지를 가볍게 만드는, 작은 회사 웹사이트가 꼭 챙겨야 할 이미지 최적화 5가지 원칙을 정리했습니다.
1. 화면에 보이는 크기만큼만 줄여서 올린다
가장 흔한 실수는 4000픽셀짜리 원본을 그대로 올리는 것입니다. 정작 화면에서는 가로 800픽셀로 줄여 보여주면서 말이죠. 손님은 보이지도 않는 해상도를 통째로 내려받느라 데이터와 시간을 낭비합니다. 실제로 표시되는 폭의 2배 정도(예: 800픽셀 자리면 1600픽셀)로만 미리 줄여서 올리면, 화질은 그대로인데 용량은 몇 분의 일로 줄어듭니다.
2. WebP 같은 가벼운 형식을 쓴다
JPG와 PNG는 익숙하지만 무겁습니다. WebP 형식은 같은 화질을 25~35% 더 가벼운 용량으로 담아냅니다. 사진 한 장이 300KB에서 200KB로 줄면 별것 아닌 듯해도, 페이지에 사진이 열 장이면 1MB가 통째로 사라지는 셈입니다.
투명 배경 로고는 PNG 대신 SVG
로고나 아이콘처럼 선이 또렷한 이미지는 사진용 형식 대신 SVG를 쓰면, 용량이 거의 없으면서 아무리 확대해도 깨지지 않습니다.
3. 화면 밖 이미지는 나중에 불러온다
긴 페이지의 맨 아래 사진까지 처음부터 한꺼번에 내려받을 필요는 없습니다. 지연 로딩(lazy loading)을 적용하면 손님이 스크롤해 그 자리에 다다랐을 때 비로소 이미지를 불러옵니다. 첫 화면에 보이는 것만 먼저 띄우니 체감 속도가 확 빨라집니다. 요즘은 이미지 태그에 속성 한 줄(loading="lazy")만 더하면 됩니다.
4. 가로·세로 크기를 미리 지정해 화면 밀림을 막는다
이미지 크기를 정해두지 않으면, 사진이 늦게 뜨는 순간 아래 내용이 덜컹 밀려납니다. 글을 읽거나 버튼을 누르려던 손님이 엉뚱한 곳을 클릭하게 되죠. 이미지에 가로·세로 값을 미리 지정해 두면 빈 자리를 먼저 잡아두기 때문에, 사진이 뒤늦게 떠도 화면이 흔들리지 않습니다.
5. 화면 크기별로 다른 이미지를 내보낸다
큰 배경 사진이나 첫 화면 대표 이미지는, PC에서는 큼직하게 보여줘야 하지만 작은 휴대폰에까지 같은 크기를 내려보낼 이유가 없습니다. 반응형 이미지(srcset)를 쓰면 기기 화면에 맞는 크기를 알아서 골라 내보냅니다. 휴대폰 손님에게는 작고 가벼운 버전이 가니, 데이터도 아끼고 로딩도 빨라집니다.
정리하자면
이미지 최적화는 화질을 깎아내는 일이 아니라, 보이지 않는 낭비를 덜어내는 일입니다. 알맞게 줄이고, 가벼운 형식으로 바꾸고, 필요할 때 불러오는 것만 챙겨도 페이지 속도는 눈에 띄게 달라집니다. 그리고 페이지 속도는 손님의 이탈은 물론 검색 순위에도 직접 영향을 줍니다.
CYAN 에이전시는 웹사이트를 만들 때 이미지 한 장 한 장을 알맞은 크기와 형식으로 다듬어, 보기 좋으면서도 빠르게 열리는 사이트를 만듭니다. 지금 쓰는 홈페이지가 유독 느리게 느껴진다면, 무거운 이미지가 발목을 잡고 있는 건 아닌지 한번 점검해 보시길 권합니다.