웹페이지가 느린 가장 흔한 원인은 복잡한 코드가 아니라 무거운 이미지입니다. 대부분의 사이트에서 전송 용량의 절반 이상을 이미지가 차지하며, 카메라로 찍은 사진을 손보지 않고 그대로 올리면 한 장에 수 메가바이트씩 나가기도 합니다. 다행히 이미지 최적화는 몇 가지 원칙만 지키면 누구나 큰 효과를 볼 수 있는 영역입니다.
이 글은 코드를 깊이 다루지 않고도 따라 할 수 있는 실용 체크리스트입니다. 포맷 선택부터 크기 조절, 압축, 그리고 로딩 방식까지 순서대로 짚어봅니다.
1. 용도에 맞는 포맷을 고르세요
포맷 선택만 제대로 해도 용량이 크게 줄어듭니다. 핵심 기준은 "사진이냐, 그래픽이냐"입니다.
- 사진·실사 이미지: JPG가 적합합니다. 색이 풍부한 이미지를 작은 용량으로 압축하는 데 강합니다.
- 로고·아이콘·도형·투명 배경: PNG가 적합합니다. 선이 또렷하고 투명도를 지원합니다.
- 투명도가 필요 없는 PNG 사진: PNG → JPG로 바꾸면 화질 손실은 거의 없이 용량을 크게 줄일 수 있습니다.
2. 화면에 보이는 크기로 리사이즈하세요
가장 흔하고 가장 아까운 낭비가 바로 이 부분입니다. 화면에서는 가로 800픽셀로 보이는데, 원본 4000픽셀짜리 사진을 그대로 올리는 경우가 많습니다. 브라우저가 그 큰 이미지를 내려받은 뒤 작게 줄여 보여주므로, 사용자는 보이지도 않는 픽셀을 위해 수 배의 데이터를 낭비하는 셈입니다.
규칙은 간단합니다. 실제로 표시되는 크기보다 약간만 크게 리사이즈하세요. 고해상도(레티나) 화면을 고려하더라도 표시 크기의 2배면 충분합니다. 그 이상은 거의 의미가 없습니다.
3. 압축으로 마지막 군살을 빼세요
포맷과 크기를 정리했다면, 마지막으로 압축입니다. JPG는 화질을 단계별로 조절할 수 있는데, 품질을 80% 안팎으로 낮춰도 대부분의 사람은 차이를 느끼지 못하면서 용량은 눈에 띄게 줄어듭니다. 목표 용량을 정해두고 그 이하로 맞추는 방식이 실무에서 가장 편리합니다.
- 품질 75~85% 구간이 화질과 용량의 균형점입니다.
- 히어로 배너처럼 큰 이미지일수록 압축 효과가 큽니다.
- 압축 후에는 반드시 눈으로 확인해 과한 손실이 없는지 점검하세요.
4. 지연 로딩으로 첫 화면을 빠르게
이미지 파일 자체를 줄이는 것과 별개로, 언제 불러올지도 중요합니다. 화면을 한참 내려야 보이는 이미지를 처음부터 모두 내려받을 필요는 없습니다. 사용자가 스크롤해서 가까워질 때 불러오면 첫 화면이 훨씬 빨리 뜹니다.
HTML 이미지 태그에 loading="lazy" 속성 한 줄만 추가하면 최신 브라우저가 알아서 지연 로딩을 처리합니다. 단, 화면 맨 위에 바로 보이는 핵심 이미지에는 적용하지 마세요 — 오히려 표시가 늦어질 수 있습니다.
Switching으로 바로 적용하기
위 체크리스트 중 포맷·리사이즈·압축은 Switching의 도구로 곧바로 처리할 수 있습니다. 이미지 리사이즈로 표시 크기에 맞추고, 이미지 압축으로 목표 용량 이하로 줄이고, 투명도가 필요 없는 PNG는 PNG → JPG로 바꾸세요. 모두 브라우저 안에서 처리되므로 파일을 어디에도 올리지 않고 최적화를 끝낼 수 있습니다.