Chrome 155 JPEG XL 지원: 웹사이트 이미지 적용 전 확인사항

Chrome 155 JPEG XL 지원으로 무엇이 달라지나요?

Google은 2026년 10월 6일 Chrome 155부터 JPEG XL 디코딩을 제공한다고 발표했습니다. Chrome에 통합한 디코더는 Rust로 작성된 jxl-rs입니다. 웹 개발자의 입장에서는 JXL 파일을 브라우저가 읽을 수 있다는 변화이며, 사이트의 기존 이미지를 자동 변환한다는 뜻은 아닙니다. 근거: Chrome 공식 발표

공식 발표는 JPEG 대비 30~50% 개선된 압축과 무손실 압축·HDR·무손실 JPEG 트랜스코딩을 소개합니다. 이 수치는 모든 원본·품질 설정에서 동일한 용량 감소를 보장하지 않습니다. Chrome 팀도 AVIF와 JPEG XL을 함께 시험하고, 특히 고품질 사진·무손실·점진적 디코딩이 필요한 경우를 검토하도록 권합니다. 근거: 압축 특성·활용 권고

웹사이트에 적용해도 되는지 판단하는 기준

위 표는 편집부의 도입 판단 기준입니다. 방문자 통계와 통제된 비교 결과가 없다면 “지원 브라우저가 늘었으니 전면 교체”보다 기존 경로와 병행해 관측하는 편이 변경 효과를 판단하기 쉽습니다.

picture로 JPEG XL과 JPEG 대체 이미지 제공하기

다음은 같은 장면의 1200×800 이미지를 제공하는 HTML 예시입니다. 경로의 파일은 설명용이며 독자의 사이트에서 실제로 생성·배포해야 합니다.

<picture>
  <source type="image/jxl" srcset="/images/mountain-1200.jxl">
  <img
    src="/images/mountain-1200.jpg"
    width="1200"
    height="800"
    alt="아침 햇빛이 비치는 산 능선과 호수"
  >
</picture>

type을 지원하지 않는 브라우저는 해당 source를 건너뜁니다. img는 표시와 대체 경로를 담당하므로 실제 JPEG URL을 남기세요. 근거: picture·type 선택

이 구조를 네트워크 오류 복구로 해석하지 마세요. 미지원 형식을 건너뛰는 동작과 선택한 JXL URL이 404·손상 파일일 때 JPEG를 다시 시도하는 동작은 다릅니다. 배포 누락은 파일 검증으로 막아야 합니다. AVIF도 추가한다면 source 순서에 따라 선택 결과가 달라질 수 있으므로, 실제 요청 파일을 확인하고 비교 목적에 맞춰 순서를 정하세요.

JXL 파일 만들기: cjxl 예시와 무손실의 의미

libjxl은 JPEG XL 참조 구현이며 cjxl로 인코딩하고 djxl로 디코딩할 수 있습니다. 설치는 운영체제·배포 환경에 맞추고 버전과 도움말을 기록하세요. 다음은 도구 설치 후 사용할 예시입니다.

cjxl --help
cjxl input.png output.jxl --distance=1
cjxl input.png output-lossless.jxl --distance=0

# JPEG 원본의 기본 무손실 재압축·복원 경로
cjxl original.jpg recompressed.jxl
djxl recompressed.jxl restored.jpg

distance=0은 무손실이며 distance와 effort로 화질·인코딩 설정을 조절할 수 있습니다. JPEG 입력의 기본 동작은 무손실 재압축이고, JPEG 확장자로 디코딩할 때 원래 JPEG 복원을 지원합니다. 근거: 공식 도구 사용법

이미 손실 압축한 JPEG를 재압축해도 촬영 원본의 정보가 되살아나는 것은 아닙니다. 원본 JPEG의 재압축·복원 시험과 PNG 픽셀의 무손실 압축 시험을 구분하세요. 같은 quality 숫자를 서로 다른 코덱의 동일 화질로 취급하기보다 실제 화면과 원본을 대조하는 것이 이 가이드의 권고입니다.

Content-Type과 CDN 캐시를 확인하세요

JXL URL은 실제 JXL 파일과 Content-Type: image/jxl을 함께 제공하도록 서버·스토리지 설정을 확인하세요. CDN이 다른 형식으로 변환한다면 확장자만 보지 말고 응답과 실제 표시 결과를 비교합니다.

같은 URL에서 요청의 Accept 헤더에 따라 형식을 바꾸는 콘텐츠 협상을 사용하면 캐시 구분도 필요합니다. Vary: Accept는 응답을 선택할 때 Accept가 영향을 줬음을 알리는 방식입니다. CDN별 캐시 키 설정은 따로 검토하세요. 근거: Vary와 요청 헤더별 캐시

처음에는 JXL·JPEG의 URL을 분리한 picture 방식이 원인 분석에 편리합니다. 다음 명령의 호스트는 자신의 배포 주소로 바꾸세요. 헤더 확인만으로 디코딩 성공까지 증명하지는 않습니다.

curl --head https://YOUR_SITE/images/mountain-1200.jxl
curl --head https://YOUR_SITE/images/mountain-1200.jpg

개발자 도구 Network에서 선택 파일·응답 상태·Content-Type·전송량을 확인하세요. 브라우저 캐시를 비운 조건과 재방문 조건을 구분해 기록하면 이전 파일이 보이는 문제를 찾기 쉽습니다.

Google 이미지 검색과 SNS 대표 이미지는 따로 점검하세요

확인일의 Google 이미지 검색 가이드는 BMP·GIF·JPEG·PNG·WebP·SVG·AVIF를 지원 형식으로 열거하며 JXL은 목록에 없습니다. Chrome의 디코딩 지원을 Google 이미지 검색의 JXL 수집 지원으로 확대 해석하면 안 됩니다. 근거: Google 이미지 지원 형식

따라서 img src에는 지원 형식의 대체 이미지를 남기세요. Google도 picture 사용 시 src가 있는 img를 요구합니다. 같은 문서는 설명적인 alt와 주변 콘텐츠, 화질·속도 최적화를 권합니다. 근거: 이미지 대체 경로·검색 최적화

네이버 수집과 SNS 카드에는 별도 검증이 필요합니다. 대표 이미지 메타데이터까지 JXL로 일괄 교체하기보다 기존 JPEG·PNG URL을 유지하고, 해당 서비스의 미리보기·수집 결과를 확인하는 것을 권합니다. 이는 서비스별 JXL 지원을 확인한 결과가 아니라 불확실한 적용 범위를 줄이는 운영 제안입니다.

용량만 줄었는지, 실제 로딩도 좋아졌는지 비교하기

아래는 편집부가 제안하는 비교 항목입니다. JPEG XL 적용 전 점검표 CSV 다운로드에 브라우저·인코더 버전과 설정을 함께 기록할 수 있습니다.

예를 들어 파일이 작아졌지만 주요 이미지 표시가 느려졌다면 URL 선택·캐시·변환 처리·디코딩을 나눠 조사하세요. 이 글에는 특정 코덱의 승률이나 실측 LCP 개선 수치가 없습니다. 결과를 얻기 전에는 점검표에 미확인으로 남기면 됩니다.

적용 후 이미지가 깨지거나 JPEG만 보일 때

JXL이 실제로 선택됐는지 브라우저에서 확인하기

자신의 테스트 페이지에서 개발자 도구 Elements로 대상 img를 선택한 뒤 Console에서 아래 코드를 실행할 수 있습니다. 페이지를 변경하거나 데이터를 전송하지 않는 상태 확인 예시입니다.

if ($0 instanceof HTMLImageElement) {
  console.table({
    selectedUrl: $0.currentSrc,
    declaredSrc: $0.getAttribute('src'),
    complete: $0.complete,
    naturalWidth: $0.naturalWidth,
    naturalHeight: $0.naturalHeight,
  });
} else {
  console.info('Elements에서 대상 img를 먼저 선택하세요.');
}

currentSrc는 브라우저가 선택한 URL이며 로드 성공 자체를 보장하지 않습니다. Network의 응답·실제 표시와 함께 확인하세요. 근거: currentSrc 정의

지원 환경에서 JXL이 선택되는지와 미지원 환경에서 JPEG가 보이는지를 각각 기록합니다. 파일 크기 절감률은 (기준 bytes − 비교 bytes) ÷ 기준 bytes × 100으로 계산할 수 있지만, 이는 파일 크기 비교이며 LCP 개선률이나 화질 점수가 아닙니다.

자주 묻는 질문

Chrome 155 지원이면 방문자 모두에게 JXL만 제공해도 되나요?

방문자는 서로 다른 버전과 브라우저·웹뷰를 사용합니다. 실제 방문 환경을 확인하고 대체 이미지를 함께 제공하세요.

AVIF·WebP를 JPEG XL로 모두 바꿔야 하나요?

원본 특성과 목표 화질에 따라 비교 결과가 달라집니다. 먼저 대표 이미지 몇 장에서 화질·전송량·실제 표시 성능을 비교하세요.

확장자만 .jxl로 바꾸면 되나요?

아닙니다. 인코더로 실제 JXL 데이터를 만들고 올바른 응답과 브라우저 표시를 확인해야 합니다.

JPEG XL을 쓰면 검색 순위가 오르나요?

형식 변경 자체로 상위 노출을 보장할 수 없습니다. 검색 수집 경로를 유지하면서 독자가 보는 화질과 로딩 경험이 개선됐는지 확인하세요.

운영 페이지의 기간별 노출을 함께 관리한다면 Vercel Flags 날짜 조건 가이드를 참고하세요. 이미지 교체도 설정 변경과 실제 방문자 결과를 구분해 확인하는 것이 좋습니다.