차세대 형식으로 이미지 제공하기: Lighthouse가 실제로 요구하는 것

Lighthouse 경고는 JPEG 및 PNG 파일을 WebP 또는 AVIF로 변환한 다음, 원본을 대체 이미지(fallback)로 사용하는 picture 요소를 통해 제공하라는 의미입니다. 이 진단은 아키텍처적인 변경이 아닌 기계적인 수정만으로 해결할 수 있어 통과하기가 비교적 쉬운 편에 속합니다.

Lighthouse는 현대적인 형식을 사용할 때 파일 크기를 실질적으로 줄일 수 있다고 판단되는 이미지를 발견하면 경고를 표시합니다. 이 추정치는 다운로드한 파일을 기준으로 계산되므로, 보고서에 표시되는 절감량은 대개 실제로 달성 가능하며 때로는 보수적으로 잡힌 수치이기도 합니다.

Lighthouse가 측정하는 기준

Lighthouse는 내부적으로 각 이미지를 WebP로 다시 인코딩하고, 절감량이 기준치를 초과할 때 그 차이를 보고합니다. 보고서에 표시되는 수치는 일반적인 권장 사항이 아니라 실제 추정치입니다.

기준치 미만의 이미지는 무시되므로, 30개의 이미지가 있는 페이지에서 단 4개만 진단에 나타날 수 있습니다. 목록에 표시된 파일들이 가장 먼저 해결해야 할 대상입니다. 이 파일들만 정리해도 페이지의 다른 이미지들이 이전 형식으로 남아 있더라도 경고가 완전히 사라지는 경우가 많습니다.

진단을 통과하는 마크업

AVIF를 첫 번째로, WebP를 두 번째로 배치하고 img 태그에 원본 JPEG를 넣은 picture 요소를 사용하세요. 브라우저는 자신이 지원하는 첫 번째 소스를 선택하므로, 최신 브라우저는 작은 파일을 받고 이전 브라우저도 여전히 이미지를 볼 수 있습니다.

img 태그는 alt 텍스트, 크기 정보 및 대체 이미지를 전달하므로 반드시 유지해야 합니다. width와 height 속성을 생략하면 이미지가 로드될 때 레이아웃 이동이 발생하여, 이 진단을 해결하는 과정에서 다른 Core Web Vitals 측정 항목을 망칠 수 있습니다. 두 속성 모두 대체 이미지의 고유 픽셀 크기로 설정하세요.

진단을 해결하는 방법

경고를 올바르게 해결하려면 다음 6단계를 따르세요.

1. Lighthouse 보고서를 열고 측정 가능한 절감량이 있는 이미지 목록을 확인합니다.
2. 많은 이미지가 잘못된 형식일 뿐만 아니라 크기도 너무 크므로, 각 이미지의 표시 크기를 확인합니다.
3. 각 이미지의 크기를 실제 표시 너비로 조정하되, 고해상도 화면을 위해 2배 크기로 만듭니다.
4. WebP는 품질 80으로 변환하고, 페이지에서 가장 큰 이미지의 경우 AVIF는 품질 65로 변환합니다.
5. 변환된 결과를 picture 요소를 통해 제공하고, 원본을 img 대체 이미지로 사용합니다.
6. Lighthouse를 다시 실행하여 경고가 사라졌는지, 레이아웃 이동이 발생하지 않는지 확인합니다.

3단계가 4단계보다 더 중요합니다. 이미지 크기가 파일 크기의 대부분을 결정하며, 크기가 너무 큰 WebP는 여전히 너무 큰 이미지일 뿐입니다. 일괄 변환은 몇 분밖에 걸리지 않지만, 마크업을 작성하는 데는 보통 더 많은 시간이 소요됩니다.

이미지별 권장 형식

사용 중인 플랫폼이 이미 이 작업을 수행하고 있나요

많은 콘텐츠 시스템과 호스팅 업체가 이미 이미지를 자동으로 변환하므로, 수동으로 작업하기 전에 먼저 확인해 보세요. 동일한 작업을 두 번 하는 것은 흔하고 낭비적인 일입니다.

2분 만에 테스트할 수 있습니다. 게시된 페이지를 열고 이미지를 우클릭하여 새 탭에서 연 다음, 주소창의 파일 확장자를 확인하세요. JPEG로 업로드한 파일의 확장자가 .webp로 되어 있다면 플랫폼이 이미 변환을 수행하고 있는 것입니다. Shopify, 대부분의 관리형 WordPress 호스팅 및 여러 사이트 빌더가 기본적으로 이 작업을 수행합니다.

경고가 가끔 다시 나타나는 이유

변환 단계가 자동이 아닌 수동일 경우, 새로운 업로드로 인해 문제가 다시 발생합니다. 1월에 문제를 해결한 사이트라도 편집자가 카메라에서 찍은 사진을 그대로 업로드하면 6월쯤 경고가 다시 나타날 것입니다.

파일만 수정하기보다 프로세스를 개선해야 합니다. 플랫폼 수준에서 자동 변환을 활성화하거나, 업로드 전에 이미지 크기를 조정하고 변환한다는 간단한 규칙을 정하세요. Lighthouse는 평균적인 이미지가 아니라 가장 상태가 나쁜 이미지를 기준으로 측정하므로, 여러 사람이 글을 쓰는 사이트일수록 이 규칙을 문서화하는 것이 중요합니다.

AVIF, WebP 중 무엇을 사용해야 할까요, 아니면 둘 다 써야 할까요

대부분의 사이트에서는 WebP만 사용하고, 페이지에서 가장 큰 이미지에만 AVIF를 추가로 적용하세요. 두 형식을 모두 지원하면 생성, 저장 및 동기화해야 할 파일 수가 두 배로 늘어나지만, 일반적인 이미지에서 얻을 수 있는 절감 효과는 미미합니다.

사진이 많은 사이트에서는 계산이 달라집니다. 이미 수백 킬로바이트에 달하는 파일에서 AVIF를 사용하면 추가로 20 ~ 30%를 더 줄일 수 있습니다. 600 KB 크기의 히어로 이미지가 있는 페이지에서는 이것이 실질적인 감소로 이어집니다. 반면 40 KB짜리 썸네일 페이지에서는 추가 파이프라인을 구축하는 노력이 얻는 이득보다 크므로, WebP만으로도 충분히 진단을 통과할 수 있습니다.

결과를 올바르게 확인하는 방법

브라우저 확장 프로그램이 측정을 왜곡할 수 있으므로, 확장 프로그램이 비활성화된 시크릿 창에서 Lighthouse를 다시 실행하세요. 점수는 실행할 때마다 달라질 수 있으므로 단 한 번의 수치만 믿지 말고 3번 실행하여 비교해 보세요.

브라우저가 실제로 새 형식을 받고 있는지 추측에 의존하지 말고 직접 확인하세요. 개발자 도구를 열고 Network 탭으로 이동한 뒤, 이미지(Img)로 필터링하고 페이지를 새로고침합니다. Type 열을 보면 실제로 제공된 형식이 표시됩니다. 변환 후에도 여전히 JPEG가 제공된다면 picture 요소 마크업이 잘못되었거나 캐싱 레이어가 이전 버전을 유지하고 있기 때문일 수 있습니다.

함께 나타나는 관련 진단 항목들

• 이미지 크기 적절하게 맞추기. 이미지가 표시되는 영역보다 큽니다. 압축하기 전에 크기부터 조정하세요.
• 이미지 효율적으로 인코딩하기. 압축률이 너무 낮습니다. 품질 설정을 낮추세요.
• 오프스크린 이미지 지연시키기. 스크롤해야 보이는 이미지에 lazy loading을 추가하세요.
• Largest Contentful Paint 엘리먼트. 보통 히어로 이미지에 해당하며, 가장 먼저 신경 써야 할 부분입니다.
• 이미지 엘리먼트에 명시적인 너비 및 높이가 없음. 레이아웃 이동을 방지하기 위해 두 속성을 모두 추가하세요.

이 5가지 진단은 보통 함께 나타나며, 보고서에 언급된 이미지의 크기를 조정하고 변환하는 것만으로 한 번에 대부분 해결할 수 있습니다.

이 작업이 실제로 페이지를 얼마나 개선하나요

현대적인 형식으로 변환하면 일반적으로 이미지 용량의 25 ~ 35%가 줄어들며, 크기 조정을 먼저 수행하면 훨씬 더 많은 용량을 줄일 수 있습니다. 이미지가 많은 페이지에서는 이 두 가지를 결합하여 종종 70 ~ 80%의 용량을 절감합니다.

이 개선 효과는 주요 콘텐츠가 얼마나 빨리 나타나는지 측정하는 Largest Contentful Paint에서 두드러집니다. 이 측정값은 대개 단 하나의 이미지에 의해 결정되므로, 히어로 파일의 크기를 줄이는 것은 페이지 전체에서 차지하는 비율 이상으로 큰 영향을 미칩니다. 작은 이미지 20개를 줄이는 것보다 큰 이미지 1개를 줄이는 것이 더 중요합니다.

하지 말아야 할 행동

JPEG 대체 이미지를 제거하지 마시고, 방문자가 다운로드할 이미지는 변환하지 마세요. 이 두 가지 실수는 약간의 점수 향상을 위해 실제 유용한 기능을 희생하는 결과를 낳습니다.

프레스 키트, 인쇄용 가이드, 다운로드 가능한 템플릿 및 공급업체 파일은 JPEG 또는 PNG로 유지해야 합니다. WebP는 브라우저 외부에서 다루기 어렵기 때문입니다. 이러한 파일을 현대적인 형식으로 제공하면 파일을 열 수 없다는 문의를 받게 되며, 이는 절약된 대역폭보다 더 큰 비용을 초래합니다.

보고서에 언급된 이미지 변환하기

이미 게시된 버전이 아닌 원본 파일에서 변환을 진행하세요. 압축된 JPEG는 손상된 정보를 새 파일로 그대로 가져가기 때문입니다. 인코더는 기존의 압축 아티팩트와 실제 디테일을 구분하지 못해 이를 보존하는 데 불필요한 용량을 소모합니다.

최대 500개의 파일을 한 번에 넣거나 ZIP 압축 파일을 직접 끌어다 놓으면 전체 세트가 한 번에 변환됩니다. 모든 작업은 자체 프로세서를 사용하여 브라우저 내부에서 실행되므로, 클라이언트 사이트, 스테이징 자산 및 미공개 페이지가 서버로 전송되지 않습니다. 단 하나의 파일도 네트워크를 거치지 않고 몇 분 만에 전체 사이트 변환을 완료할 수 있습니다.

변환된 파일을 원본과 동일한 이름을 사용하여 나란히 보관하세요. 그래야 각 이미지마다 수동으로 편집하지 않고 일관된 패턴으로 picture 요소 마크업을 생성할 수 있습니다. hero.jpg, hero.webp, hero.avif가 들어 있는 폴더는 템플릿화하기 쉬우며, 다음 형식으로 마이그레이션할 때도 각 페이지를 다시 쓰는 대신 일괄 변환만으로 해결할 수 있게 해줍니다.