zenpix
WASMでも動く、イラスト向けのAVIF / WebP / PNG変換ライブラリ。色を保ちながら公開画像を軽量化する。
特徴
- 01
色とグラデーションを保ちながら AVIF次世代画像フォーマット。非可逆（画質を損なう代わりにサイズを削減）・可逆（劣化なし）の両方に対応し、WebPやJPEGより高い圧縮効率と色精度を持つ。YUV 4:4:4でイラストのグラデーションを保ちやすい。・WebPGoogleが開発した画像フォーマット。非可逆・可逆の両方に対応し、非可逆ではJPEG比でサイズを抑えやすく、可逆ではPNGより小さくなることが多い。AVIFより圧縮効率は低いが、対応環境が広い。 へ変換でき、CLI・ライブラリ・WASMWebAssemblyの略。ブラウザ内でネイティブに近い速度で動く実行形式で、サーバーなしで処理できる。 の各環境に対応している。
- 02
実際にこのサイトの画像変換にも使っており、4.5〜6.9MBのPNG劣化のない可逆圧縮フォーマット。透過に対応し、イラストや図版に適している。ファイルサイズはJPEGより大きくなりやすい。を長辺1920pxのAVIF次世代画像フォーマット。非可逆（画質を損なう代わりにサイズを削減）・可逆（劣化なし）の両方に対応し、WebPやJPEGより高い圧縮効率と色精度を持つ。YUV 4:4:4でイラストのグラデーションを保ちやすい。へ約1.7〜2.1秒で変換し、38〜130KBまで軽量化している。decode・Lanczos-3高品質なリサイズアルゴリズム。エッジのシャープネスを保ちながら縮小・拡大できる。リサイズ・YUV 4:4:4画像の色を「明るさ（輝度）」と「色み（色差）」に分けて記録する方式がYUV。末尾の数字は色差情報の保存密度を表し、4:4:4はすべてを保持する。一般的な4:2:0は色差を1/4に圧縮してファイルを小さくする反面、イラストの細かいグラデーションが潰れやすい。 AVIF次世代画像フォーマット。非可逆（画質を損なう代わりにサイズを削減）・可逆（劣化なし）の両方に対応し、WebPやJPEGより高い圧縮効率と色精度を持つ。YUV 4:4:4でイラストのグラデーションを保ちやすい。 encodeを一つのパイプラインとして扱い、native版とWASMWebAssemblyの略。ブラウザ内でネイティブに近い速度で動く実行形式で、サーバーなしで処理できる。版で実行環境を分けている。WASMWebAssemblyの略。ブラウザ内でネイティブに近い速度で動く実行形式で、サーバーなしで処理できる。版はブラウザ上で完結するためサーバーが不要で、静的ページからそのまま利用できる。
用語
- JPEG
- 写真や塗りの多い画像に広く使われる非可逆圧縮フォーマット。圧縮のたびに画質が劣化し、透過には非対応。
- PNG
- 劣化のない可逆圧縮フォーマット。透過に対応し、イラストや図版に適している。ファイルサイズはJPEGより大きくなりやすい。
- GIF
- 最大256色・可逆圧縮・アニメーション対応のフォーマット。色数が少ないため写真やイラストには不向き。
- HEIC
- iPhoneのデフォルト撮影形式。HEIF規格をベースに高品質・高圧縮率を持つが、対応環境が限られる。
- AVIF
- 次世代画像フォーマット。非可逆（画質を損なう代わりにサイズを削減）・可逆（劣化なし）の両方に対応し、WebPやJPEGより高い圧縮効率と色精度を持つ。YUV 4:4:4でイラストのグラデーションを保ちやすい。
- WebP
- Googleが開発した画像フォーマット。非可逆・可逆の両方に対応し、非可逆ではJPEG比でサイズを抑えやすく、可逆ではPNGより小さくなることが多い。AVIFより圧縮効率は低いが、対応環境が広い。
- YUV 4:4:4
- 画像の色を「明るさ（輝度）」と「色み（色差）」に分けて記録する方式がYUV。末尾の数字は色差情報の保存密度を表し、4:4:4はすべてを保持する。一般的な4:2:0は色差を1/4に圧縮してファイルを小さくする反面、イラストの細かいグラデーションが潰れやすい。
- Lanczos-3
- 高品質なリサイズアルゴリズム。エッジのシャープネスを保ちながら縮小・拡大できる。
- WASM
- WebAssemblyの略。ブラウザ内でネイティブに近い速度で動く実行形式で、サーバーなしで処理できる。