設定の使い方
- 品質(Quality):JPEG/WebPにのみ適用。範囲は0.1–1。値が大きいほど圧縮が少なく画質が高いが、ファイルサイズは大きくなる。値が小さいほど圧縮が強くサイズは小さくなるが、アーティファクト(劣化)が見える場合がある。PNGは可逆圧縮のため、品質スライダーは適用されない。
- 縦横比を維持(Keep Aspect Ratio):有効時は幅または高さを変更すると、元の縦横比に基づいてもう一方が自動調整され、歪みを防ぐ。無効にすると自由に幅・高さを設定可能。
出力形式と原理
PNG(Portable Network Graphics)
- 原理:可逆圧縮(DEFLATE/zlib)を用い、チャンク構造で画像データを格納。パレット、グレースケール、トゥルーカラー、アルファ透明をサポート。
- 長所:可逆・透明対応・Adam7インターレース・ブラウザ互換性が非常に高い。
- 短所:ファイルサイズが大きくなりやすい。写真大量配布には不向き。
- 用途:アイコン、UI、イラスト、透明背景画像、可逆保存が必要なアセット。
JPEG(JFIF)
- 原理:離散コサイン変換(DCT)+ 量子化 + エントロピー符号化。色差サブサンプリング(例:4:2:0)で圧縮率を向上。透明非対応。
- 長所:高い圧縮効率で小さいファイルサイズ。写真・連続調画像に適し、広くサポート。
- 短所:不可逆。再保存で劣化が蓄積。高圧縮ではブロッキングやリンギング等のアーティファクトが出やすい。透明非対応。
- 用途:Web写真、ギャラリー、サイズ優先の背景画像など。
WebP(Google)
- 原理:非可逆はVP8(ブロック予測+変換符号化)に基づき、可逆は近傍画素予測+エントロピー符号化。アルファ透明とアニメーション対応。
- 長所:同等視覚品質でJPEG/PNGより小さいことが多い。透明対応。モダンブラウザで広くサポート。
- 短所:古い端末・旧ブラウザでは互換性が劣る場合あり。極端な可逆用途ではPNGより大きくなる可能性。
- 用途:Web画像最適化、透明画像のサイズ削減、モバイルの帯域制約環境。
推奨事項
- 高忠実度かつ透明が必要:PNGまたはWebP(可逆/透明)を優先。
- 写真のサイズ最適化:JPEGまたはWebP(非可逆)を選び、許容品質まで段階的に品質値を上げる。
- Webアセットの一括最適化:WebPを優先。レガシー環境向けにPNG/JPEGのフォールバックを残すと安心。
プライバシーとセキュリティ
変換はブラウザ内でローカルに実行され、サーバーにアップロードされません。
参考資料