画像形式の選択
画像の品質と容量の関係
解像度やサイズの大きな画像は高品質ですが、このままだと容量が大き過ぎるため一般用途で使用するには向きません。
また、こうした高品質な画像の場合は使用する色数も多いため、画像形式も大抵はPNG24/32かJPEGになります。
- 高品質画像：高解像度、サイズが大きい、色数が多い
- 低品質画像：低解像度、サイズが小さい、色数が少ない
高品質画像の最適化
高品質な画像を素材として利用するためには、リサイズして最適化する事で適切なレベルにする事ができます。
また、リサイズしたくない場合は、画像形式を適切なものに変換すると容量を小さくする事ができます。
特にWeb上で利用するような画像の場合は、このあたりが重要になります。
画像最適化ソフト
縮小して最適化、最適な画像形式に変換など
最適な画像形式
現時点では大きめの画像はJPEGで、小さい画像ならPNG8が無難だと思われます。
また、アニメーションはPNGしか対応していないため、必然的にAPNGとなります。
画像形式の特徴
画像形式の特徴
画像形式の特徴は以下のようになります。
PNGとは
JPEGとは
- PNG8：容量は小さめ、劣化しない、アニメーションや透過に対応、色数は256色（非常に優れた画像形式ですが、色数は制限されます。）
- PNG24/32：容量は大きめ、劣化しない、アニメーションや透過に対応、色数はフルカラー/1677万色（フルカラーに対応していますが、容量が大きめです。）
- JPEG：容量は小さめ、劣化する、色数はフルカラー/1677万色（フルカラー対応で容量が非常に小さいですが、上書きすると劣化します。）
PNG8とJPEG
一般的な画像形式でよく利用されるのがこの2つですが、どちらも特性が違うので用途に合わせて選択する必要があります。
基本的には色数の少ない小さめの画像や加工が必要な場合ならPNG8が最適ですが、色数の多い大きめの画像ならJPEGになるようです。
- 色数の多い大きめの画像：JPEG
- 色数の少ない小さめの画像、透過や加工を利用する：PNG8
PNG24/32の対策
PNG24/32の画像は容量的に大きくなるため、そのまま利用するのは効果的ではありません。
対処法としてはリサイズと最適化を行ってPNG8にするか、JPEGに変換すれば容量だけを削減する事ができます。
画像編集ソフト
- PNG8に変換する：PNG24/32画像をリサイズ→最適化
- JPEGに変換する：JPEGに変換
PNGの特殊効果
アニメーションや透過などの特殊な画像を利用する場合はPNGが最適です。
以前ならアニメーションはGIFでしか利用できませんでしたが、APNGの登場によりPNGでも利用できるようになりました。
また、アニメーションも透過も同程度の画質ならPNGの方が容量が小さいため、現在ではGIFの存在意義がほとんどなくなりました。
ただし、長いアニメーションの場合は読み込みに時間がかかるため、動画にして埋め込むなど別の方法を利用した方が無難です。
APNGビューワー
APNG変換ソフト
APNG作成ソフト
APNG対応動画編集ソフト
次世代の画像形式
FLIF
FLIFはPNGより40％以上も高圧縮な新しい画像形式です。
今後の主流になるのではと言われていますが、まだブラウザなど周辺対応が整っていません。
FLIFのSusieプラグイン
FLIFビューワー
FLIFの最適化/ビューワー
BPG
BPGはJPEGの半分以下の容量で同程度の画質を保つ事ができる新しい画像形式です。
今後はJPEGに代わってこのファイル形式が主流になる可能性があります。
ただし、現時点ではブラウザなどの対応が進んでいないため、そのままではサイト上で表示できません。
BPGのSusieプラグイン
BPGビューワー
BPG変換ソフト
JPEG-XL
JPEG-XLはJPEG、PNG、GIFなどの既存のファイル形式を置き換える事を目的に策定された新フォーマットです。
JPEG XLとは
Squoosh（JPEG-XL変換ソフト）
次世代JPEG規格「JPEG XL」に対応した「IrfanView」v4.59
圧縮効率60%向上を目指す新規格「JPEG-XL」策定にむけ技術公募へ
その他の次世代画像形式
その他の次世代画像形式です。
Googleが高品質なJPEG画像の圧縮率を35％向上させる新たなコーディングライブラリ「Jpegli」を発表