画像フォーマットの選び方について【2021年版】
画像フォーマットの選び方について
もともと映像系のフォーマットに興味がありいろいろと調べていたが画像データに関しても最近は進化が進んでいるということでモダンな開発環境での選定基準をある程度まとめてみた。
かならずしもこのフローにそう必要はないと思うが基準があるといろいろとやりやすいので参考にしていただければと思います。
画像フォーマット選定フロー
選定フローの判断材料は下記の要素を元にして考えています。
- データ容量
- 画質
- 管理のしやすさ
まずはSVGから検討
SVGが利用できる場合は極力SVGを利用します。
SVGは他の画像フォーマットとは違い画像をコードとして書き出すため軽量かつ拡大に強い画像として利用できます。
バイナリデータではないためGitなどのバージョン管理システム上での利用も可能で管理上も非常に優秀です。
しかしながら、非常に細かい描写は苦手なためレイヤにビットマップ形式のファイルや複雑な画像を含んでいる場合は利用できません。
近年のフラットデザインとの相性も良いため利用する機会は増えてきています。
メリット
- 軽量
- Gitなどのバージョン管理システムで管理できる
- JavaScriptやCSSで操作できる
- 拡大されても画質が下がりづらい
- 透過も表現できる
デメリット
- 複雑な画像（ビットマップ）には不向き
- やや特殊な形式のため一般ユーザーの利用には不向き
次にWebPを検討
JPEGじゃないのかと思われるかもしれませんがWebにおいてSVGの次に優先すべき形式はWebPとなりつつあります。
IEは非対応となっていますがその他のモダンブラウザではWebPのサポートがほとんど完了しています。
このフォーマットはGoogleなどが進めている映像フォーマットであるVP8の技術を流用しており、VP8の次世代規格VP9はYouTubeやNetflixなどで積極的に採用を進めているため今後も利用が進められることが期待されるフォーマットです。
また、透過表現も可能なため今後はPNGとJPEGの出し分けを気にする必要もなくWebPへの一本化も可能になっていくと考えられます。
しかしながらPhotoshopやIllustratorなどのソフトウェアでの書き出しがサポートされていないためそこがネック
どちらかというとエンジニア主導で導入を進めるか勝手にサービス（サーバー）側で変換して配信するなどまだまだ工夫が必要
Photoshop 23.2にてWebPでの書き出しに対応
注意点
IEのサポート終了も近づき、第一選択としてWebPを標準にすることも増えていくかと思われます。
しかしWebPの形式にはLossless(可逆圧縮)のものとlossy(非可逆圧縮)のものがあり特性が違うため要注意
WebPのブラウザ対応状況
メリット
- 一般的な画像フォーマットより軽量
- 透過の表現が可能
デメリット
- PhotoshopやIllustratorなどでそのまま書き出しが行えない
- まだ認知度が低めなため一般ユーザーの利用には不向き
- サーバー側が対応していない可能性がある
次にJPEGを検討
時点は言わずもがな画像フォーマットの代名詞JPEGです。
ファイルサイズとしては基本的にはPNGよりも軽量で汎用性も高いため透過処理が不要な場合無難な選択であると言えます。
そこまで説明する必要もなさそうなぐらい鉄板フォーマットです。
ただ最近はWebPがモダンブラウザ対応を進めているので今後はWebPに一本化しても問題ないかと思われます。
メリット
- 有名なフォーマットであるため一般ユーザーでも理解できる
- PNGよりも軽量な場合が多い
デメリット
- 透過表現が行えない
- (WebPなどと比べると)ファイルサイズが大きい
最後にPNGを検討
JPEGの次に有名なフォーマットであろうPNGですが優先度は低めで透過表現が必要かつWebPが利用できない場合の選択という印象
ただやはり普及している形式ではあるのでWebPが使えてもこちらを利用するという選択もありだと思われます（特にIE11対応など）
GIFを使うぐらいならPNG-8にしましょう。
メリット
- 透過表現が可能
- PNG-8などを利用すれば圧縮率を高められる
- JPEGと並んで認知度が高いフォーマットである
デメリット
- ファイルサイズが大きくなりがち
- PNG-8などで書き出すと画質が悪くなる場合がある
あまり利用されないファーマット
GIF
基本的にGIFを使うならPNG-8で書き出したほうがファイルサイズが小さくなるため静止画で使う意味はほとんどないかと思われます。
どうしてもGIFアニメーションを利用したい人などは使用するかもしれませんが画質などを考えると動画を利用したほうがいいと思います。
AVIF
Webpの更に先の世代の画像フォーマット、webpと同じく映像系の次世代規格「AV1」の技術が使われている。
WebPがVP8ベースなのでVP9を飛ばして2世代先の技術になる。web用の画像フォーマットとしては優秀だがまだまだ普及前の規格のため2021年現在ではまだ利用は難しい。
ただWebの映像フォーマットはH.264(mp4)を使い続けるレガシ環境とVP系に分かれていくと思われるので新しいものが使いたいならHEIFよりかはこちらを利用したほうがいい。
JPEG XR
JPEGという名前だが性格としてはWeb向けというよりかはカメラ向け。
JPEGよりも細かな色の表現が可能（8bit以上の表現が可能）だがPhotoshopで使えなかったりもちろんブラウザの対応もIEやEdgeの一部（旧バージョン）と使い所はほとんどない。
JPEG 2000
JPEGよりも高圧縮が可能なフォーマットだがWebでの利用はされていない。
ブラウザ対応もSafariのみと限定的。
HEIF
AVIFはAV1コーデックの技術を流用しているがそれのH.265(HEVC)バージョン
Web業界の映像フォーマット自体がMPEG系からVP系(VP9/AV1)に流れていきそうなのでわざわざこのフォーマットを利用することはなさそう。
もちろんだが対応しているブラウザは今の所存在しない。
なんかiPhoneとかで使われてるらしいけどiPhone持ってないんで検証はせず。
補足のお話
映像フォーマットについて
WebP/AVIF/HEIFの箇所で触れた映像フォーマットについての補足
現在利用されている映像フォーマットは大きく2つ、Web系企業（Google/Netflix）等が進めているVP系（VP8/VP9/AV1）とハードウェアメーカーや放送系などが利用しているMPEG系（h.264/h.265/h.266）のコーデック（形式）に分かれている。
おそらく映像系の業界はMPEG系の利用を続けると思われるがWebに関してはVP系のフォーマットに移行していくと思われます。
H.265に関しては権利関係でめんどくさい事になっているので今後どうなるかは分からないが画像の形式もMPEG系の技術を利用するのではなくVP系の技術に沿っていくほうが将来性が高いためWebPなどの利用をおすすめします。
dataURLという選択肢
画像をWeb上で表示する方法としてもう一つ選択肢があるのがdataURLです。画像のフォーマットとは若干違いますが
画像データをbase64というフォーマットでエンコードしてビットマップ画像などをSVGなどのようにインラインでHTMLに組み込むことが可能です。
SVGと同じように扱うことはできず容量は増加してしまいますが、通常よりもパフォーマンスが向上する場合もあり
単一ソースで完結したいファイル（サービス停止画面など）やライブラリに画像を組み込む場合などは非常に有用です。
流れとしてはデザイナーさんなどが作った画像データをエンジニア側でbase64にエンコードを行いHTMLに組み込む必要があります。
活躍する場面は限られますが、力を発揮する場面も多くあるため選択肢の一つとして持っておくと役に立つかもしれません。
<img src="data:image/jpeg;base64,*****エンコードされた文字列*****" alt="">
一応画像以外にもテキストや動画なども埋め込むことができますが文字列の上限値などがあるためあまり大きファイル向けではありません。
Javascriptのフレームワークを利用している場合
Next.jsやNuxt.jsを利用している場合は下記のような画像の最適化用のパッケージを利用するのがベターだと思われます。
next/image は有名だけどNuxtの画像最適化用パッケージはあまり聞かない印象
参考記事
Next.js
Nuxt.js
変更履歴
2022-05-06 PhotoshopのWebP対応状況について修正、WebPについて注意点を追加
2021-09-20 テキストが途切れていた箇所があったので修正、リンクの記載を修正
Discussion