홈페이지가 느리다는 말을 들으면 흔히 서버나 호스팅을 의심한다. 하지만 작은 회사 사이트에서 속도를 잡아먹는 진짜 범인은 대개 따로 있다. 카메라나 휴대폰에서 바로 꺼내 올린 무거운 사진 몇 장이다. 4,000픽셀짜리 5MB 원본 사진 한 장이, 화면에서는 손가락만 하게 줄어든 채 손님의 데이터를 통째로 잡아먹는다. 사진은 그대로 두고 코드만 손봐서는 해결되지 않는다. 이미지 자체의 무게를 줄이는 다섯 가지 원칙을 짚어본다.
1. 화면에 보일 크기로 먼저 줄여서 올린다
가장 흔하고, 가장 효과가 큰 실수다. 본문에 600픽셀로 표시될 사진을 원본 4,000픽셀 그대로 올리면, 브라우저는 큰 이미지를 모두 내려받은 뒤 화면에서만 작게 줄여 보여준다. 손님은 보이지도 않는 무게를 고스란히 부담한다. 올리기 전에 실제 표시 크기의 두 배 정도로 미리 줄이는 것만으로 용량이 절반 이하로 떨어지는 경우가 많다.
2. JPG·PNG 대신 WebP·AVIF를 쓴다
같은 사진이라도 포맷에 따라 무게가 크게 달라진다. WebP는 JPG 대비 25~35% 가볍고, 최신 포맷인 AVIF는 그보다 더 작으면서도 화질 손실이 거의 없다. 요즘 브라우저는 대부분 두 포맷을 지원하므로, 사진은 WebP로 통일하는 것을 권한다. 로고처럼 색이 단순하고 투명 배경이 필요한 이미지만 PNG로 남겨 두면 된다.
3. 화면 밖 이미지는 나중에 불러온다
방문자가 첫 화면에서 보는 이미지는 한두 장이지만, 페이지 아래쪽에는 수십 장이 더 있을 수 있다. 이걸 처음부터 한꺼번에 내려받으면 첫 화면이 늦게 뜬다. 이미지 태그에 loading="lazy" 한 줄만 넣으면, 스크롤이 가까워질 때 비로소 이미지를 불러온다. 첫인상을 좌우하는 로딩 속도가 눈에 띄게 빨라진다.
4. 압축은 '눈에 안 보일 만큼만' 한다
압축이라고 하면 화질이 망가질까 걱정하지만, 사진은 품질을 80% 안팎으로 낮춰도 사람 눈으로는 거의 구분되지 않는다. 대신 용량은 절반 가까이 줄어든다. 코드를 모르는 사장님도 다음 도구로 끌어다 놓기만 하면 된다.
- Squoosh — 구글이 만든 무료 웹 도구. 압축 전후를 나란히 비교할 수 있다.
- TinyPNG — 사진을 올리면 알아서 압축해 돌려준다. 여러 장도 한 번에 처리된다.
5. alt 텍스트로 무게는 0, 효과는 둘
이미지의 alt 텍스트는 화면에 보이지 않지만, 사진이 안 떴을 때 대체 문구가 되고, 화면 낭독기를 쓰는 손님에게 내용을 읽어 주며, 검색엔진이 이미지를 이해하는 단서가 된다. 무게는 전혀 늘지 않으면서 접근성과 검색 노출을 동시에 챙긴다. "이미지1.jpg" 대신 "흰 접시에 담긴 들깨 칼국수"처럼 사진을 그대로 묘사하면 된다.
속도는 신뢰의 첫인상이다
손님은 사이트가 1초 늦게 뜰 때마다 조용히 떠난다. 다행히 이미지 최적화는 큰돈이나 어려운 코드 없이, 올리는 습관 몇 가지만 바꿔도 대부분 해결된다. CYAN은 작은 회사의 사이트를 만들 때 사진 한 장까지 적정 포맷과 크기로 다듬어, 빠르게 열리고 검색에도 잘 잡히는 사이트를 함께 설계한다. 지금 쓰는 사이트가 유독 무겁게 느껴진다면, 사진부터 한번 들여다볼 일이다.