画像形式の選択
最適な画像形式
現時点では容量で選ぶなら、透過やアニメーションにも対応しているWebPの一択となります。
また、画質を重視する場合はsvgの一択です。
画像形式の特徴
画像形式の特徴は以下のようになります。
PNGとは
JPEGとは
- ◎AVIF：容量は小さめ、編集で劣化しない、拡大時に劣化する、色数は1677万色（WebPと並んで最強の画像形式です。）
- ◎WebP：容量は小さめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数は1677万7216色（現時点で最強の画像形式です。）
- ○PNG8：容量は小さめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数は256色（非常に優れた画像形式ですが、色数は制限されます。）
- △PNG24/32：容量は大きめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数はフルカラー/1677万色（フルカラーに対応していますが、容量が大きめです。）
- △JPEG：容量は小さめ、編集で劣化する、拡大時に劣化する、色数はフルカラー/1677万色（フルカラー対応で容量が非常に小さいですが、上書きすると劣化します。）
- ？SVG：容量は大きめ、編集で劣化しない、拡大時に劣化しない、色数は280兆色（どんなサイズでも美しく表示できます。）
画像最適化
以前はPNGやJPGは最適化によって容量を削減する事ができました。
しかし、現在ではWebPの登場によって最適化は不要となりました。
従来の画像形式
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対応動画編集ソフト
主流の画像形式
WebP
WebPはGoogleが開発しているオープン標準の静止画像フォーマットです。
非常に圧縮率が高いため、画像の容量をかなり小さくする事ができます。
また、アニメーションや透過の表示機能にも対応しており、幅広く利用できるようになっています。
WebPとは
ImageMagickのWebP変換
AVIF
AVIFはAV1で圧縮された画像フォーマットです。
JPEGよりも圧縮効率と画質に優れており、ものによってはWebPよりも容量を小さくできます。
AVIFとは
ImageMagickのAVIF変換
WEBP AVIF 変換
対応待ち
SVG
SVGはベクター画像で利用できる画像形式です。
拡大時の画質の劣化がなく、比較的きれいな画像表示が可能ですが、その分容量は大きくなります。
特に写真などに利用するとかなりの容量になるようです。
なお、周辺ソフトの対応が遅れているようです。
Scalable Vector Graphicsとは
PNG to SVG
SVG コンバータ
PNG SVG 変換
JPG SVG 変換
SVGファイルとは？形式の特徴やJPEG・PNGとの違いと変換方法を解説