f8b21af4be
10_Wiki/Topics 대규모 정리: - 오류 캡처/미완성 stub 문서 227개 제거 - 교차폴더 중복 43클러스터 병합 (63파일 → redirect) - 링크명 정규화: 깨진 링크 수정·redirect 직결·개념 매핑 ~2,400건 - 카테고리 MOC 6개 신규 생성 - Graph 섹션 미해결 related-keyword 링크 10,058건 제거 Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
147 lines
3.9 KiB
Markdown
147 lines
3.9 KiB
Markdown
---
|
|
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 정리 |
|