JPG를 AVIF로 변환 — 같은 화질에 용량은 절반

JPG를 AVIF로 변환: 이미지에서 낼 수 있는 가장 큰 개선

사이트가 느리다면 원인은 거의 확실히 이미지입니다. 그리고 그 이미지가 아직 JPG라면 AVIF로 옮기는 것이 단독으로 가장 효과가 큰 한 수입니다. 파일 압축 설정이나 캐시 조정, 스크립트 정리보다 잘 듣습니다.

어느 정도 차이인가

AVIF는 체감 화질이 같은 상태에서 JPG의 약 절반 용량이 됩니다. 부드러운 계조를 포함한 까다로운 피사체에서는 절감률이 60%에 이르기도 합니다.

숫자로 보겠습니다. 각 250KB의 제품 이미지 열두 개가 놓인 첫 화면은 현재 3MB입니다. AVIF라면 약 1.4MB입니다. 평균적인 모바일 회선에서는 로딩 시간으로 약 1.5초 차이에 해당합니다. 방문자가 이탈하는 구간이자 구글이 Core Web Vitals 기준을 두고 있는 구간입니다.

AVIF가 이토록 뛰어난 이유

JPG는 1992년 규격으로 이미지를 8×8 픽셀 블록으로 나눕니다. 강하게 압축했을 때 익숙한 네모난 덩어리와 윤곽 주변의 번짐이 나오는 이유입니다.

AVIF는 AV1이라는 영상 압축 기술을 씁니다. 가변 블록 크기, 인접 영역에 대한 더 영리한 예측, 더 효과적인 노이즈 제거. 낮은 화질 설정에서도 AVIF는 네모나게 깨지기보다 부드럽게 흐려지는 경향이 있어 눈에 훨씬 자연스럽게 보입니다.

여기에 더해 AVIF는 투명도와 10비트 색 심도를 지원합니다. JPG는 둘 다 하지 못합니다.

감안해둘 점

인코딩 시간. AVIF는 연산량이 많아 큰 이미지에서는 브라우저 안에서 몇 초가 걸릴 수 있습니다. 한 번만 발생합니다.

대체 형식. 아주 오래된 기기는 AVIF를 모릅니다. 실제 서비스에서는 JPG나 WebP를 대체로 지정한 picture 요소를 준비하십시오.

두 번째 압축. 원래의 JPG는 이미 손실 압축이었습니다. 압축 전 원본이 있다면 거기서 곧장 변환하는 것이 기술적으로 가장 올바른 순서입니다.

대량이어도 업로드는 없습니다

제품 사진이 오백 장일 때 업로드는 느릴 뿐 아니라 이미지 자산을 통째로 외부에 맡기는 일이 됩니다. ImageXpo는 브라우저 안에서 인코딩합니다. 장수가 얼마든 이미지는 사용자 디스크에 남습니다.