웹 성능을 위한 이미지 압축: 완전 가이드
이미지는 평균 웹페이지 용량의 대부분 — 종종 50% 이상 —을 차지합니다. 이미지를 압축하는 것은 대부분의 사이트가 할 수 있는 영향력이 가장 큰 성능 개선이며 비용이 들지 않습니다.
이 가이드는 실제로 효과가 있는 형식, 설정, 기술을 다룹니다.
이미지 크기가 중요한 이유
이미지의 모든 킬로바이트는 특히 모바일에서 다운로드 시간입니다. Google의 연구에 따르면 페이지 용량을 줄이면 Core Web Vitals 점수와 순위가 직접적으로 개선됩니다. 작은 이미지는 대역폭 비용과 탄소 발자국도 줄입니다.
먼저 올바른 형식을 선택하세요
WebP를 기본으로 사용하고, 가장 작은 파일을 원할 때 사진에 AVIF를 사용하세요. 무손실이 필요한 경우에만 PNG를 유지하세요. 형식 선택은 어떤 품질 설정보다 중요합니다.
퍼센트가 아닌 품질 슬라이더 사용
WebP와 JPG의 품질 75~80은 화면에서 훌륭해 보입니다. 90에서 75로 낮추면 눈에 보이는 차이 없이 파일 크기가 절반이 되는 경우가 많습니다. 항상 원본과 결과를 비교하세요.
압축 전에 크기를 조정하세요
800px로 표시되는 4000px 사진을 압축하면 대부분의 바이트가 낭비됩니다. 표시할 가장 큰 크기로 조정한 다음 압축하세요. 이 조합은 일반적으로 크기를 70~90% 줄입니다.
지연 로딩과 picture 요소 사용
화면 밖 이미지는 지연 로딩하고, picture 요소를 사용해 JPEG 폴백과 함께 AVIF 또는 WebP를 제공하세요. 압축과 함께 이들은 이미지를 거의 공짜로 만듭니다.
모든 이미지를 압축하고, WebP 또는 AVIF를 사용하고, 표시 크기로 조정하고, 지연 로딩하세요. 이 네 가지 습관으로 페이지 용량을 절반으로 줄일 수 있습니다. 우리의 브라우저 기반 압축기는 처음 두 가지를 몇 초 만에 처리합니다.