北上研究所

2023年10月25日　画像のフォーマット

Kitakami Yuma Project.のyumaです。

今回は画像のフォーマットについて書きたいと思います。

画像のフォーマットってたくさんありますよね。
有名なところだとJPEGやPNG、GIFなどがあります。
今回は特にここや表のホームページで使用している物について紹介したいと思います。

まず現在以下のフォーマットを使用しています。

WebPは既存のJPEGやPNGなどの上位互換に当たる次世代のフォーマットです。
可逆、非可逆圧縮にも対応していて、GIFアニメのようなアニメーションWebPもあります。
既存のJPEGなどと比べファイルサイズを小さくすることができ、現在は多くのブラウザに対応しており多くの端末で見ることが可能です。
ただしInternet Explorerや古いのブラウザだと非対応な場合があったりWebPを直接出力できるソフトがあまりないなどの欠点があります。
有名どころのサイトではあまり使用されていませんが、YouTubeの動くサムネはWebPが使われています。
Kitakami Yuma Project.では少し前まで主要なフォーマットとして長らく鎮座していましたが、後述のAVIFが扱いやすくなったことにより現在ではAVIFが表示できないブラウザでのみ表示されます。
ちなみに表の左上にあるロゴは小さいのでWebPのままだったり。
ソースコード変えるのが大変なんだよ！

AVIFは先ほど紹介したWebPの更に次世代のフォーマットです。
WebPの更に次ということもありWebPと同様に可逆、非可逆圧縮に対応しアニメーションAVIFも存在します。
WebP以上にファイルサイズを小さくできるものの、WebP以上に新しくEdgeが非対応だったり扱えるソフトが少ないなどWebP以上に使用の難易度が高いです。
普及しているとは言い難く一部のブログや一部のホームページのみに留まります。
まあ2010年に登場したWebPですらあまり対応してないんですから2018年に出たAVIFの対応が少ないのは仕方ないですがね。
当初Kitakami Yuma Project.では当初Windowsでの表示ができずWebPのみ使用してましたが、最近Windows標準のフォトで表示可能なのが判明したため主要なフォーマットとして使用しています。

SVGはWebPやAVIFと異なり2001年に登場した由緒正しいフォーマットです。
ただし同じ画像といえどWebPやAVIF、延いてはJPEGやPNGとは全く異なります。
WebPやAVIFはビットマップと呼ばれるドットが集まってできてるのに対し、SVGは点と点を指定しそこに線を引くベクターと呼ばれる方式です。
写真のように色の濃淡は表現し辛いものの、ロゴなど色の数が少ない物は得意です。
点の集合体であるため拡大してもギザギザにならず容量が軽くなる傾向があるものの、点の数が極端に多い場合やサイズが小さい場合は大きくなってしまう場合もあります。
簡単な物であれば手動で作ることも可能です。
Kitakami Yuma Project.ではロゴや背景の縞模様に使用しています。
初期から使用しているものの、当初作成ツールの仕様によりファイルサイズが大きく途中で最適化した物に差し替えたのでファイル自体は変更されています。

JPEGは1992年に登場したSVG以上に由緒のあるフォーマットです。
画像といえばJPEGと言っても良いくらい普及しているフォーマットで、ホームページのみならず様々な用途で使用されています。
JPEGは古くからあるフォーマットであるものの、様々なエンコーダーがあり互換性を維持したままファイルサイズを小さくすることも可能です。
ただしWebPやAVIFといった完全新規のフォーマットよりは圧縮率が劣りファイルサイズが大きくなります。
Kitakami Yuma Project.では積極的に使用していないものの、画像を拡大する必要がある場合WebPやAVIFはGoogle Chromeではダウンロードされてしまうため局所的に使用しています。
2023年10月21日　サインその後の高画質な画像が数少ない使用例です。
使用エンコーダーはMozJPEGです。
MozJPEGはJPEGとしての互換性を持ちながら非常にファイルサイズを小さくできるのでおすすめです。

とまあ色々紹介してみましたがどうでしたか？
JPEGやSVGは有名であるもののWebPやAVIFは存在を知らない人も多いかと思います。
あくまでこの文章は僕個人の認識であり間違った部分もあるかもしれません。
またこれは2023年現在の状況なので将来的に変わる可能性があります。
なので正確な情報が必要な方はご自身で正しい情報を調べてください。