Lighthouse 보고서의 기회 섹션에는 이전 이미지 형식의 모든 이미지가 나열되어 있으며, 이러한 이미지의 AVIF 버전을 제공하여 얻을 수 있는 절감 효과를 보여줍니다.
이미지를 AVIF 또는 WebP 형식으로 제공하는 이유는 무엇인가요?
AVIF 및 WebP는 이전의 JPEG 및 PNG에 비해 압축 및 품질 특성이 뛰어난 이미지 형식입니다. 이미지를 JPEG 또는 PNG가 아닌 이러한 형식으로 인코딩하면 로드 속도가 빨라지고 모바일 데이터를 적게 소비할 수 있습니다.
AVIF는 Chrome, Firefox, Opera에서 지원되며 품질 설정이 동일한 다른 형식에 비해 파일 크기가 더 작습니다. AVIF에 관한 자세한 내용은 AVIF 이미지 제공 Codelab을 참고하세요.
WebP는 최신 버전의 Chrome, Firefox, Safari, Edge, Opera를 지원하며 웹상의 이미지에 더 나은 손실(lossy) 및 무손실 압축을 제공합니다. WebP에 관한 자세한 내용은 웹의 새로운 이미지 형식을 참고하세요.
Lighthouse의 가능한 절감액 계산 방법
Lighthouse는 페이지의 각 BMP, JPEG, PNG 이미지를 수집하고 각 이미지를 WebP로 변환하고 AVIF 파일 크기를 추정하여 변환 수치를 기반으로 잠재적인 절감액을 보고합니다.
브라우저 호환성
WebP는 최신 버전의 Chrome, Firefox, Safari, Edge 및 Opera를 지원하는 반면 AVIF 지원은 더 제한됩니다. 이전 브라우저 지원을 위해서는 대체 PNG 또는 JPEG 이미지를 제공해야 합니다. 대체 기법에 관한 개요와 이미지 형식의 브라우저 지원에 관한 목록은 WebP에 대한 브라우저 지원을 감지하려면 어떻게 해야 하나요?를 참고하세요.
각 최신 형식에 대한 브라우저 지원을 확인하려면 아래 항목을 확인하세요.
스택별 안내
AMP
WebP 형식의 모든 amp-img 구성요소를 표시하면서 다른 브라우저에 적절한 대체 값을 지정하는 것이 좋습니다.
Drupal
사이트에 WebP 이미지 형식을 활용하는 모듈을 설치하고 구성해 보세요. 이러한 모듈은 업로드된 이미지의 WebP 버전을 자동으로 생성하여 로드 시간을 최적화합니다.
Joomla
업로드된 이미지를 최적의 형식으로 자동 변환하는 plugin 또는 서비스를 사용하는 것이 좋습니다.
Magento
Magento Marketplace에서 최신 이미지 형식을 활용하는 다양한 서드 파티 확장 프로그램을 검색해 보세요.
iPhone
webp, avif 이미지 및 webm 동영상은 iOS 16 미만의 iPhone에서는 작동하지 않습니다.
WordPress
업로드된 이미지를 최적의 형식으로 자동 변환하는 plugin 또는 서비스를 사용해 보세요.