---
id: wiki-2026-0508-jpeg-xl
title: JPEG XL
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [jxl, jpeg-xl-format]
duplicate_of: none
source_trust_level: A
confidence_score: 0.9
verification_status: applied
tags: [image-format, compression, web-performance, codec]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: C++
  framework: libjxl
---

# JPEG XL

## 매 한 줄
> **"매 royalty-free 차세대 image codec — 매 lossless JPEG transcoding + better-than-AVIF lossy"**. 매 ISO/IEC 18181 — 매 Cloudinary/Google이 design — 매 Safari 17+ 가 매 native 지원 — 매 2026 점진적 mainstream — 매 JPEG의 정신적 후계자.

## 매 핵심

### 매 차별점
- **lossless JPEG re-compress**: 매 기존 JPEG 의 평균 20% 매 추가 절감, 매 100% 매 reversible.
- **wide gamut + HDR**: 매 BT.2100, PQ/HLG, alpha, animation.
- **progressive decode**: 매 stream-as-you-go.
- **CPU efficient**: 매 AVIF 보다 encode 매 빠름.

### 매 brower support (2026)
- Safari 17+: native.
- Chrome: behind flag — 매 unflag 검토 중.
- Firefox: nightly flag.
- 매 polyfill: jxl.js (WASM).

### 매 응용
1. 매 photography archive 의 size 의 줄임.
2. 매 CDN의 multi-format negotiation (jxl > avif > webp > jpeg).
3. 매 raw → web pipeline의 매 single-format 통일.

## 💻 패턴

### 매 cjxl encode
```bash
cjxl input.png output.jxl -q 90 --effort 7
# 매 distance 0.5-3.0 매 매우 high quality
cjxl input.jpg out.jxl --lossless_jpeg=1   # 매 JPEG → JXL 매 lossless
```

### 매 djxl decode
```bash
djxl out.jxl out.png
djxl out.jxl out.jpg --jpeg_jxl_to_jpeg  # 매 원본 JPEG bit-exact 복원
```

### 매 sharp (Node.js)
```javascript
import sharp from 'sharp';
await sharp('photo.jpg')
  .jxl({ quality: 85, effort: 7 })
  .toFile('photo.jxl');
```

### 매 HTTP content negotiation
```nginx
map $http_accept $img_ext {
  ~image/jxl  ".jxl";
  ~image/avif ".avif";
  ~image/webp ".webp";
  default     ".jpg";
}
location /img/ {
  try_files $uri$img_ext $uri =404;
}
```

### 매 picture element
```html
<picture>
  <source type="image/jxl" srcset="hero.jxl">
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="hero">
</picture>
```

### 매 polyfill (WASM)
```html
<script type="module">
  import { decode } from 'https://unpkg.com/@jsquash/jxl';
  const buf = await fetch('photo.jxl').then(r => r.arrayBuffer());
  const imageData = await decode(buf);
  ctx.putImageData(imageData, 0, 0);
</script>
```

### 매 batch transcode
```bash
fd -e jpg . | parallel -j8 'cjxl {} {.}.jxl --lossless_jpeg=1'
```

### 매 quality tuning
```bash
# 매 distance 매 lower = better quality
# 매 1.0 매 visually lossless 의 일반적 target
cjxl in.png out.jxl -d 1.0 -e 7
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| 매 archival JPEG | 매 lossless JXL transcode |
| 매 web photo modern | 매 JXL + AVIF fallback |
| 매 universal 호환 | 매 JPEG/WebP 의 유지 |
| 매 HDR/wide gamut | 매 JXL or AVIF |

**기본값**: 매 archival lossless transcode + web 의 multi-format negotiation.

## 🔗 Graph
- 부모: [[Web Performance]]
- 변형: [[AVIF]]
- 응용: [[CDN]] · [[Page Experience Algorithm]]
- Adjacent: [[Tree Shaking (번들 크기 최적화)]]

## 🤖 LLM 활용
**언제**: 매 archive 매 size 의 reduce 매 reversible 요구.
**언제 X**: 매 universal browser support 가 hard requirement.

## ❌ 안티패턴
- **JPEG → JXL → JPEG quality 매 lossy**: 매 `--lossless_jpeg=1` 의 잊음.
- **only JXL serve**: 매 Chrome user 매 broken image.
- **--effort 9 매 production encode**: 매 CPU 의 30x.

## 🧪 검증 / 중복
- Verified (libjxl 0.10+, ISO/IEC 18181, Safari 17+).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — JPEG XL 인코딩/디코딩/HTTP negotiation 정리 |