画像ファイルには、名前の後に「 .jpg 」や「.png 」などがついていますよね。これを「拡張子」と言います。
この記事では、拡張子ごとの特徴と、どんな場面で使うのが良いかを解説します。
画像素材のサイトなどで「ダウンロード形式」を選ぶ際の参考にしてみてくださいね。
この記事でわかること
- 画像の拡張子ごとの特徴
- 注目すべき、新しい拡張子
もくじ
拡張子とは？データの大きさを意識しよう！
拡張子は画像のフォーマット（形式）を表すもの。
拡張子ごとに、圧縮率やデータの大きさなどが違うため、使用用途に応じて、拡張子を選ぶようにしましょう。今回紹介するのは、この６つの拡張子。
| 拡張子 | 色数 | 圧縮 | データ容量 | ウェブでの使用 | |
| JPEG（ジェーペグ） | .jpg / .jpeg | フルカラー 約 1677 万色 | 不可逆 画質が劣化 | 中 | ◯ |
| PNG（ピング） | .png | フルカラー PNG-8：256 色 PNG-24：約 1677 万色 | 可逆 画質が劣化しない | 中 | ◯ |
| SVG（エスブイジー） | .svg | フルカラー 約 1677 万色 | 可逆 画質が劣化しない | 小 写真の場合は大 | ◯ セキュリティ面で 脆弱性あり |
| Ai（エーアイ） | .ai | フルカラー 約 1677 万色 | 可逆 画質が劣化しない | 大 | × |
| WebP（ウェッピー） | .webp | フルカラー 約 1677 万色 | 可逆 画質が劣化しない | 小 | ◯ |
| HEIF（ヒーフ） | .heic | フルカラー 約 1677 万色 | 可逆 画質が劣化しない | 小 | △ 今後、徐々に対応？ |
フリーイラスト素材のサイトなどは「JPG、PNG、SVG、Ai」での配布が主流ですね。
一番よく見る、JPG と PNG の特徴を知っておけば、困ることはないでしょう！
しかし、その違いを知っていないとムダにデータ容量の大きい画像を使ってしまうかも？
資料やウェブサイトを作るうえで、「よく使う拡張子」や「これから注目すべき拡張子」を知っておきましょう！
よく使う拡張子たち
JPEGは写真などの拡張子として利用されます。そのため、色数が多いのが特長で、約 1677 万色を表現することが可能です。
画像を保存する際に、圧縮率を選ぶことが可能で、1 / 5 ~ 1 / 30 まで指定可能です。色数の多さを活かして、色の境界を上手くぼかすことで、自然に圧縮します。
しかし、一度圧縮すると画質自体は劣化し、元の画質に戻すことはできません（不可逆圧縮）。
「 .jpg 」と「 .jpeg 」の両方を見て、混乱したことはないでしょうか？実はコレ、どちらも同じジェーペグです。
2種類の表記があるのは、少し前まで「拡張子の名前は３文字まで」という制約があったためです。一般的には .jpg が使用されることが多いみたい。
同様に「 .JPG 」 と「 .JPEG 」 も困りますよね。「 .JPG 」 と「 .JPEG 」 も、同じジェーペグと考えて大丈夫です。
ただし、LinuxなどのOSを使っている場合は、大文字と小文字を区別してしまうので、別ファイルとして認識されてしまいます（Mac や Windows の場合は気にしなくて大丈夫です）。
PNGは、Web用に開発された拡張子で、圧縮しても画質が劣化しないという利点があります。「画質が劣化しない」＝「圧縮時に、色の情報を削らない」ということ。
つまり、画像内の色数が多くなるほど、ファイルサイズが大きくなるという特長があります。
PNG と JPEG の一番の違いは「透過背景」です。PNG の画像では、塗りのない部分は「透明」として処理されます。
そのため、プレゼン資料などで、白以外の背景を設定している場合は、PNG 画像で背景の色を透過する必要があります。
PNG 画像をダウンロードして、ウェブサイトなどのアイキャッチ画像にすると、背景が真っ黒になってしまうことがあります。
これは、PNG の特長である「透過背景」の影響。背景が透明な（＝何もない）場合に、黒で補填されているのです。
背景の黒塗りを白くしたいときは、JPEG に変換するだけで OK です。白以外の背景色にしたい場合は、パワーポイントや Illustrator で編集しましょう。
背景となる図形（四角とか丸とか）と画像をグループにして、PNG か JPEG で保存すれば、お好みの色の背景色にできますよ。
SVG は、ベクター形式の画像で、拡大しても画質が劣化せず、輪郭がクッキリするという特長があります。
JPEG や PNG などは、画像を四角で区切った１つの区画（ピクセル）の色を、１つずつ決めている「ビットマップ形式」です。
しかし、ベクター形式では「こういう形の線を書いてね」という、図形のレシピが書かれているので、画像を拡大しても、レシピ通りに描画してくれるのです。
ビットマップ形式：「どこに何色を塗るか」のデータ
ベクター形式 ：「どうやって図形を書くか」のデータ
また、ウェブ上で SVG を使う場合、CSS（ウェブページのレイアウトを決めるファイル） から色を変更することができます。
また、画像内に複数サイズの情報が入っているため、１つの画像で様々な画面サイズに対応可能です。
レスポンシブの高さから、SVG はウェブサイトのロゴやアイコンなどに使われることが多い形式です。
複雑な形や豊富な色数の画像は、ファイルサイズが大きくなってしまうので SVG に向きません。
SVG は CSS を変更することで、色を変更できる拡張子でした。つまり、SVG は「単なる画像の拡張子」ではなく「 HTML のコード」 に近いのです。
HTMLに似てると、何がダメなの？
外部からコードを書き換えられたり、パスワードを盗み見られる可能性があるよ！
悪意のある攻撃者が、SVG にコードを書き換えることで、様々な問題が発生する可能性があります。
例えば、危険なサイトに飛ばされたり、危険なプログラムを実行される…などです。
使い勝手のいい SVG ですが、ウェブ上で使う際にはセキュリティ面の対策が必要です。
Word Press では、デフォルトで SVG のファイルをアップロードできない仕様になっています。なので、SVG を利用したい場合は、Safe SVG などのプラグインを導入する必要があります。
Adobe 社が開発しているデザインツール「 Illustrator 」のプロジェクトファイルの形式が、Aiです。Illustrator は、ロゴやイラスト、ポスターを作るのにとても便利なデザインツール。
イラスト素材のサイトなどで、配布されていることもあります。
Ai で配布されている画像ファイルは、自分のPCに入っている Illustrator を開くことで、再度編集することができます。
配布している画像素材をさらに編集したい！という場面が多ければ、Illustrator を PC に導入してみても良いかも知れません。
Illustrator をもっていないと、開けない形式のファイルになるので、忘れても OK。
注目の拡張子たち
WebP は、ウェブサイト用の画像形式で、様々な形式の画像に対応しており、JPEG でも PNG でも GIFアニメーションでも WebP に変換できます。
さらに、WebPは、JPEG より 25 ~ 35 ％、PNG より 26 ％ ほど軽量な状態で圧縮することが可能です。
読み込みに時間のかかるウェブサイトは、ユーザが離脱しやすいので、サイトの高速化は必須。
WebPを導入することで、画像のファイルサイズを軽量化し、ウェブサイト内の画像を素早く表示できるんです！
Word Press なら、アップロードした画像を WebP に変換してくれるプラグイン「 WebP Converter for Media 」を利用するのが、一番簡単です。
WebP の問題点は、Internet Explorer（IE）が、画像形式に対応していないことです。
iPhone に入っている Safari も対応していませんでしたが、2020 年のアップデートで、WebP にバッチリ対応できています。
また、Mac OS 11、Big Sur 以降の Safari であれば、WebP に対応しています。
あさまるブログも、WebP 形式の画像を使っているよ！
WebP に対応していない IE ですが、IE はブラウザのシェアランキング上位ではないので、思い切って WebP に移行してしまっても問題ないかもしれません。
iOS 11 から画像の標準形式となった HEIF（ High Efficiency Image File Format ）。なんと、JPEG の半分の容量で、高画質を維持できるという画像形式。
画像形式の名前は「 HEIF 」ですが、拡張子は「 .heic 」となっています。
iOS どうしで HEIF 画像をやりとりする場合はいいですが、HEIF に対応していない OS が多い現状では、あまり使い勝手が良くありません。
困ったら、HEIF 画像を JPEG に変換するか、iPhone のカメラの設定を変更することをオススメします。いずれもこちらのサイトを参考にしてください。
iOS で標準形式となったにも関わらず、Safari すら対応していない状況の HEIF。普及にはまだまだ時間がかかりそうな雰囲気です。
しかしながら、高画質で低容量というのは画期的な技術。注目しておきたい画像形式であることは間違いありません。
世の中が追いついていないだけで、あらゆるデバイスやブラウザで標準的に撮影・保存・アップロードが可能になっていくと思われます。
まとめ
- JPEG は、色数が多く、圧縮率が高い
- PNG は、透過背景が使える
- SVG は、拡大しても画質が落ちない
- Ai は、Illustrator で編集可能
- WebP は、ウェブサイトの高速化に最適
- HEIF は、高画質で低容量のルーキー
拡張子の違いを理解できたでしょうか？
このほかにも数多の拡張子があり、それぞれに用途がありますよね。
画像形式にどんな特徴があるかを知っておけば、適切な場面で適切な画像形式を選ぶことができます。
特にウェブ関係の仕事をしている場合は、新しい拡張子にどんなメリットがあるかチェックしておくのがオススメですよ！
