사장님이 직접 찍어 보내주신 매장 사진은 늘 선명하고 멋집니다. 문제는 그 사진이 가로 4000픽셀, 8메가바이트짜리 원본 그대로 사이트에 올라간다는 점입니다. 데스크톱에서는 잘 보이니 아무도 눈치채지 못합니다. 그러나 지하철에서 데이터로 접속한 고객의 화면에서는, 첫 사진이 다 뜨기까지 5초가 걸리고 그 사이 절반은 뒤로가기를 누릅니다. 이미지는 대부분의 웹사이트에서 전체 전송 용량의 60~70%를 차지합니다. 속도를 잡으려면 가장 먼저 손대야 하는 곳이 이미지인 이유입니다.
1. 포맷부터 바꾼다 — 같은 화질, 절반 용량
아직도 JPG와 PNG만 쓰고 있다면 용량의 절반을 그냥 버리는 셈입니다. WebP는 같은 화질에서 JPG보다 25~35% 가볍고, AVIF는 그보다 더 줄어듭니다. 사진은 WebP/AVIF, 로고나 아이콘처럼 색이 단순한 그림은 SVG가 정답입니다. 구형 브라우저가 걱정된다면 picture 태그로 WebP를 우선 제공하고 JPG를 대체본으로 두면 됩니다.
2. 화면에 표시되는 크기로 줄여서 올린다
사이트에서 가로 600픽셀로 보이는 자리에 4000픽셀 원본을 올릴 이유가 없습니다. 브라우저가 큰 이미지를 받아 강제로 줄여 그릴 뿐, 데이터는 고스란히 다 내려받습니다. 표시 크기의 2배(고해상도 디스플레이 대응) 정도로 미리 리사이즈해 올리는 것만으로 용량이 몇 배 줄어듭니다.
3. srcset으로 기기마다 다른 크기를 보낸다
모바일과 데스크톱에 똑같은 이미지를 보낼 필요는 없습니다. srcset과 sizes 속성을 쓰면 브라우저가 화면 폭에 맞는 크기를 알아서 골라 받습니다. 작은 화면에는 작은 파일을, 큰 화면에는 큰 파일을 보내 모바일 고객의 데이터와 인내심을 동시에 아낄 수 있습니다.
4. 첫 화면 밖 이미지는 나중에 불러온다
고객이 아직 스크롤하지도 않은 페이지 하단의 이미지를 처음부터 다 내려받을 이유는 없습니다. loading="lazy" 한 줄이면 화면에 들어올 때 비로소 이미지를 불러옵니다. 반대로 첫 화면의 대표 이미지는 loading="eager"로 먼저 띄워 첫인상을 빠르게 만드는 것이 좋습니다.
5. width와 height를 지정해 화면이 출렁이지 않게 한다
이미지에 크기를 지정하지 않으면, 사진이 늦게 뜨는 순간 글이 아래로 밀려납니다. 누르려던 버튼이 갑자기 움직여 엉뚱한 곳을 누르게 되는 그 현상입니다. width와 height 속성(또는 CSS의 aspect-ratio)을 지정해두면 브라우저가 자리를 미리 비워두어, 검색 순위에도 반영되는 레이아웃 안정성 점수를 지킬 수 있습니다.
화질을 포기하라는 말이 아니다
이미지 최적화는 사진을 흐릿하게 만들라는 뜻이 아닙니다. 눈에 보이는 화질은 그대로 두면서, 눈에 보이지 않는 군더더기 용량만 덜어내는 작업입니다. 고객은 더 빠른 첫인상을 얻고, 사장님은 더 낮은 이탈률을 얻습니다.
좋은 사진은 자산이지만, 최적화되지 않은 사진은 비용입니다. 같은 사진으로 더 빠른 사이트를 만들 수 있습니다.
CYAN에서 사이트를 제작할 때는 업로드되는 이미지를 자동으로 WebP로 변환하고 화면 크기에 맞춰 여러 벌로 만들어 둡니다. 사장님은 평소처럼 원본 사진만 올리면, 고객에게는 가장 가벼운 버전이 알아서 전달됩니다. 빠른 사이트는 특별한 비결이 아니라, 이런 기본기를 빠짐없이 챙기는 데서 나옵니다.