【画像ファイル🖼️】の種類・ちがいについて《.jpg，png,bmp ,heic,webpなど》

最近、画像をダウンロードしてみたら、.webp　だったり、.heic　だったり　.avif　.svg　？？など　見慣れない拡張子での画像ファイルを見ることが増えてきました。

そもそも日本語でなんて読むの❓、
JPEGファイルと何が違うの？と思ったので調べてまとめてみました。

新しく開発されたもので、基本的に古い形式の上位互換となっている場合が多いようです。（高画質、低ファイルサイズ）

画像ファイル形式🖼️　～ 表でまとめ ～

ズバリ、表⭕でまとめると下記⬇️です。✨

二重罫線以下の　HEICより下は、比較的新しくできたもので、WEBなどでの使用に適している形式です。容量が軽いのでインターネットでのWEB読み込みにも時間がかからずSEO対策になっているという説も。

ほかにも画像ファイル形式はあると思いますが、私が見たこと・聞いたことがあるものに限定しています。
（　.psd　［Adobe Photoshopのプロジェクトファイル形式］など除く）

画像ファイル🖼️形式　の 違い と 特徴

画像ファイル形式には様々な種類があります。
主な形式（特徴）の違いについて下記に説明します。

・ビットマップ形式　🔲

ビットマップ画像（bitmap image）あるいはラスター画像（raster image）とは、画像を最小単位の小さな点である画素（ピクセル）の集合として表し、各画素の色情報を端から順に並べた形式です。

JPEG［JPG］ (.jpg,.jpeg)

・写真やグラデーションなど、色彩豊かな画像に適しています
・非可逆圧縮のため、圧縮すると画質が劣化します
・約1670万色を表現できます
・　JPEG　と　JPG　は全く同じフォーマットです
　　(画像の品質や圧縮率に違いはありません）
　一般的には「.jpg」がより広く使われています
・Webサイトや一般的な用途で広く使用されています

※「非可逆圧縮」とは、人間の知覚の限界を利用して、視覚的または聴覚的に重要でない情報を削除・変更するため、圧縮率は高いが、完全に元には戻せない方式　⇔　「可逆圧縮」（圧縮前と解凍後のデータが100%同じ）

PNG (.png)

・ロゴやイラストなど、塗りつぶしが多い画像に適しています
・可逆圧縮のため、圧縮しても画質が劣化しません
・背景の透過処理が可能です　（画像の特定部分を透明にできる）
・JPEGよりもファイルサイズが大きくなる傾向があります

GIF (.gif)

・最大256色までの画像に適しています
・アニメーション表示が可能です
・背景の透過処理が可能です
・シンプルなロゴやアイコンに適しています

BMP (.bmp)

・非圧縮形式のため、高画質ですが容量が大きくなります
・Windows標準の画像形式です
・編集作業に適していますが、Web用途には向きません

TIFF (tif,tiff)

・高品質な画像保存に適しています
・印刷業界でよく使用されます
・ファイルサイズが大きくなる傾向があります
・Web表示には適していません。

新しい形式　🆕✨

WebP (.webp)

・Google開発の形式で、高圧縮・高画質を実現します。
・JPEGやPNGの代替として使用できます。
　（JPGより25～34%、PNGより26%も軽量化できると言われています）
・アニメーションや透過にも対応しています。

HEIC (.heic)

・Apple製品で採用されている新しい形式です。(ヘイクと読んでいる人も?)
・以前Appleのモバイル機器で使用されていた【HEIF】を改良したものです.
・高圧縮率と高画質を両立しています。
　（JPGと同程度以上の画質で、約半分のサイズ）
・互換性に課題があります。
　（MacなどのApple社製品は問題ないが、Windowsでは開けないことも）

AVIF (.avif)

・次世代の画像形式として注目されています。
・高圧縮率と高画質を実現します。
　（WebP よりも30%軽量化できるといわれています。）
・圧縮してファイルを作成する際に時間がかかると今は言われています。
・まだ普及途上の技術です。

・ベクター形式　🔳

ベクター画像（vector image）とは、画像データの表現形式の一つで、
画像を図形を表す数値情報の集合として表現したもの。
サイズや解像度によらず同じ品質の出力結果を得ることができます。

SVG (.svg)

・拡大縮小しても画質が劣化しません。
・ロゴやアイコンなど、シンプルな図形に適しています。
・テキストエディタで編集可能です。
・複雑な画像には不向きです。

AI［Adobe Illustrator］ (.ai)

・Adobe Illustrator専用のベクター形式です。（アドビ社　ｲﾗｽﾄﾚｰﾀｰ）
・パスやオブジェクトを数値で表現するため、拡大縮小しても品質が劣化しません。
・高度な編集データを保存できます。
・印刷用のアウトライン化データを作成できます。

AI(.ai)データ の特徴:
ベクター形式で保存できる。
編集機能を保持したまま保存可能数値でオブジェクトを表現するため、
拡大の上限がない印刷業界やデジタルアート分野で広く使用されています。

✅各形式の違い【🎈まとめ】🖼️🎨　（再掲）

これらの形式から、用途や画像の特性に応じて最適なものを選択して
使い分けをすることが重要です。（見るだけの場合は特に意識しなくてOK)

【例】：写真はJPEG、ロゴはPNGやSVG、アニメーションはGIFやWebP、
　　印刷用のグラフィックスはAI、Webサイトの最適化にはWebPやAVIF

ちなみにノウハウ図書館で使える画像は､　jpg　か　png　ファイルのみです。［※1画像あたりの上限サイズは10MBです。また1記事あたり30枚まで掲載できます。］（2024年9月末現在）

記事内容が少しでも皆様の参考になれば幸いです。✨
最後までお読みいただきありがとうございました。🙏🏻　

＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

【関連記事】