2026-07-13 · 웹 성능
대부분의 웹 페이지에서 전송 용량의 절반 이상은 이미지가 차지합니다. 이미지를 제대로 최적화하면 로딩 속도와 코어 웹 바이탈이 눈에 띄게 개선됩니다.
사진은 WebP나 AVIF를 우선 고려하세요. 같은 화질에서 JPEG보다 25~50% 작은 용량을 냅니다. 아이콘·로고처럼 단순한 그래픽은 SVG가 해상도에 무관하게 선명하고 가볍습니다. 투명도가 필요 없다면 PNG 대신 압축률 높은 포맷을 쓰는 것이 유리합니다.
모바일 화면에 4000px 이미지를 그대로 내려보내는 것은 큰 낭비입니다. srcset과 sizes 속성으로 화면 폭에 맞는 이미지를 제공하면 불필요한 데이터를 줄일 수 있습니다. 표시 크기의 약 2배(레티나 대응)까지만 준비하면 충분합니다.
화면 밖 이미지는 loading="lazy"로 지연 로딩해 초기 로딩 부담을 낮춥니다. 반대로 첫 화면의 핵심 이미지(LCP 대상)에는 fetchpriority="high"를 주어 먼저 불러오게 합니다. 모든 이미지를 똑같이 다루지 않고 우선순위를 나누는 것이 핵심입니다.
포맷 선택, 적절한 크기 전송, 지연 로딩과 우선순위 조정 — 이 세 축만 지켜도 이미지 용량을 크게 줄일 수 있습니다. 이미지 최적화는 가장 적은 노력으로 가장 큰 성능 향상을 얻는 영역입니다.