画像形式の選択
最適な画像形式
現時点では容量で選ぶなら、透過やアニメーションにも対応しているWebPの一択となります。
また、画質を重視する場合はsvgの一択です。
画像形式の特徴
画像形式の特徴は以下のようになります。
PNGとは
JPEGとは
- ◎AVIF：容量は小さめ、編集で劣化しない、拡大時に劣化する、色数は1677万色（WebPと並んで最強の画像形式です。）
- ◎WebP：容量は小さめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数は1677万7216色（現時点で最強の画像形式です。）
- ○PNG8：容量は小さめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数は256色（非常に優れた画像形式ですが、色数は制限されます。）
- △PNG24/32：容量は大きめ、編集で劣化しない、拡大時に劣化する、アニメーションや透過に対応、色数はフルカラー/1677万色（フルカラーに対応していますが、容量が大きめです。）
- △JPEG：容量は小さめ、編集で劣化する、拡大時に劣化する、色数はフルカラー/1677万色（フルカラー対応で容量が非常に小さいですが、上書きすると劣化します。）
- ？SVG：容量は大きめ、編集で劣化しない、拡大時に劣化しない、色数は280兆色（どんなサイズでも美しく表示できます。）
画像最適化
以前はPNGやJPGは最適化によって容量を削減する事ができました。
しかし、現在ではWebPやAVIFの登場によって最適化は不要となりました。
従来の画像形式
PNG8とJPEG
一般的な画像形式でよく利用されるのがこの2つですが、どちらも特性が違うので用途に合わせて選択する必要があります。
基本的には色数の少ない小さめの画像や加工が必要な場合ならPNG8が最適ですが、色数の多い大きめの画像ならJPEGになるようです。
ImageMagickのJPG、PNG変換
- 色数の多い大きめの画像：JPEG
- 色数の少ない小さめの画像、透過や加工を利用する：PNG8
PNG24/32の対策
PNG24/32の画像は容量的に大きくなるため、そのまま利用するのは効果的ではありません。
対処法としてはリサイズを行ってPNG8にするか、JPEGに変換すれば容量だけを削減する事ができます。
画像編集ソフト
- PNG8に変換する：PNG24/32画像をリサイズ
- JPEGに変換する：JPEGに変換
PNGの特殊効果
アニメーションや透過などの特殊な画像を利用する場合はPNGが最適です。
以前ならアニメーションはGIFでしか利用できませんでしたが、APNGの登場によりPNGでも利用できるようになりました。
また、アニメーションも透過も同程度の画質ならPNGの方が容量が小さいため、現在ではGIFの存在意義がほとんどなくなりました。
ただし、長いアニメーションの場合は読み込みに時間がかかるため、動画にして埋め込むなど別の方法を利用した方が無難です。
APNGビューワー
APNG変換ソフト
APNG対応動画編集ソフト
主流の画像形式
WebP
WebPはGoogleが開発しているオープン標準の静止画像フォーマットです。
非常に圧縮率が高いため、画像の容量をかなり小さくする事ができます。
また、アニメーションや透過の表示機能にも対応しており、幅広く利用できるようになっています。
なお、問題点としては右クリックメニューを開くのに時間がかかります。
WebPとは
ImageMagickのWebP変換
画像変換ソフト
AVIF
AVIFはAV1で圧縮された画像フォーマットです。
JPEGよりも圧縮効率と画質に優れており、ものによってはWebPよりも容量を小さくできます。
なお、こちらも問題点としては右クリックメニューを開くのに時間がかかるのと対応してるものが少ない点です。
AVIFとは
ImageMagickのAVIF変換
画像変換ソフト
対応待ち
SVG
SVGはベクター画像で利用できる画像形式です。
拡大時の画質の劣化がなく、比較的きれいな画像表示が可能ですが、その分容量は大きくなります。
特に写真などに利用するとかなりの容量になるようです。
なお、周辺ソフトの対応が遅れているようです。
Scalable Vector Graphicsとは
PNG to SVG
SVG コンバータ
SVGファイルとは？形式の特徴やJPEG・PNGとの違いと変換方法を解説