【徹底解説】ウェブサイトや資料作成のために知っておきたい画像の拡張子

画像ファイルには、名前の後に「 .jpg 」や「.png 」などがついていますよね。これを「拡張子」と言います。

この記事では、拡張子ごとの特徴と、どんな場面で使うのが良いかを解説します。

画像素材のサイトなどで「ダウンロード形式」を選ぶ際の参考にしてみてくださいね。

この記事でわかること

  1. 画像の拡張子ごとの特徴
  2. 注目すべき、新しい拡張子

拡張子とは?データの大きさを意識しよう!

拡張子は画像のフォーマット(形式)を表すもの。

拡張子ごとに、圧縮率やデータの大きさなどが違うため、使用用途に応じて、拡張子を選ぶようにしましょう。今回紹介するのは、この6つの拡張子。

拡張子色数圧縮データ容量ウェブでの使用
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(ジェーペグ)

JPEGの特長

JPEG の特長:色数の多さと高い圧縮率

JPEGは写真などの拡張子として利用されます。そのため、色数が多いのが特長で、約 1677 万色を表現することが可能です。

画像を保存する際に、圧縮率を選ぶことが可能で、1 / 5 ~ 1 / 30 まで指定可能です。色数の多さを活かして、色の境界を上手くぼかすことで、自然に圧縮します。

しかし、一度圧縮すると画質自体は劣化し、元の画質に戻すことはできません(不可逆圧縮)。

よくある疑問:JPG と JPEG は同じもの

「 .jpg 」と「 .jpeg 」の両方を見て、混乱したことはないでしょうか?実はコレ、どちらも同じジェーペグです。

2種類の表記があるのは、少し前まで「拡張子の名前は3文字まで」という制約があったためです。一般的には .jpg が使用されることが多いみたい。

同様に「 .JPG 」 と「 .JPEG 」 も困りますよね。「 .JPG 」 と「 .JPEG 」 も、同じジェーペグと考えて大丈夫です。

ただし、LinuxなどのOSを使っている場合は、大文字と小文字を区別してしまうので、別ファイルとして認識されてしまいます(Mac や Windows の場合は気にしなくて大丈夫です)。

PNG(ピング)

PNGの特長

PNG の特長:可逆圧縮と透過背景

PNGは、Web用に開発された拡張子で、圧縮しても画質が劣化しないという利点があります。「画質が劣化しない」=「圧縮時に、色の情報を削らない」ということ。

つまり、画像内の色数が多くなるほど、ファイルサイズが大きくなるという特長があります。

PNG と JPEG の一番の違いは「透過背景」です。PNG の画像では、塗りのない部分は「透明」として処理されます。

そのため、プレゼン資料などで、白以外の背景を設定している場合は、PNG 画像で背景の色を透過する必要があります。

よくある疑問:PNG画像をウェブで使ったら、真っ黒に…

PNG 画像をダウンロードして、ウェブサイトなどのアイキャッチ画像にすると、背景が真っ黒になってしまうことがあります。

これは、PNG の特長である「透過背景」の影響。背景が透明な(=何もない)場合に、黒で補填されているのです。

背景の黒塗りを白くしたいときは、JPEG に変換するだけで OK です。白以外の背景色にしたい場合は、パワーポイントや Illustrator で編集しましょう。

背景となる図形(四角とか丸とか)と画像をグループにして、PNG か JPEG で保存すれば、お好みの色の背景色にできますよ。

SVG(エスブイジー)

SVGの特長

SVG の特長:動的に色やサイズを変更できるレスポンシブさ

SVG は、ベクター形式の画像で、拡大しても画質が劣化せず、輪郭がクッキリするという特長があります。

JPEG や PNG などは、画像を四角で区切った1つの区画(ピクセル)の色を、1つずつ決めている「ビットマップ形式」です。

しかし、ベクター形式では「こういう形の線を書いてね」という、図形のレシピが書かれているので、画像を拡大しても、レシピ通りに描画してくれるのです。

ビットマップ形式:「どこに何色を塗るか」のデータ

ベクター形式 :「どうやって図形を書くか」のデータ

また、ウェブ上で SVG を使う場合、CSS(ウェブページのレイアウトを決めるファイル) から色を変更することができます。

また、画像内に複数サイズの情報が入っているため、1つの画像で様々な画面サイズに対応可能です。

レスポンシブの高さから、SVG はウェブサイトのロゴやアイコンなどに使われることが多い形式です。

複雑な形や豊富な色数の画像は、ファイルサイズが大きくなってしまうので SVG に向きません。

よくある疑問:ウェブサイトの SVG は攻撃対象になる?!

SVG は CSS を変更することで、色を変更できる拡張子でした。つまり、SVG は「単なる画像の拡張子」ではなく「 HTML のコード」 に近いのです。

よるまる
よるまる

HTMLに似てると、何がダメなの?

あさまる
あさまる

外部からコードを書き換えられたり、パスワードを盗み見られる可能性があるよ!

悪意のある攻撃者が、SVG にコードを書き換えることで、様々な問題が発生する可能性があります。

例えば、危険なサイトに飛ばされたり、危険なプログラムを実行される…などです。

使い勝手のいい SVG ですが、ウェブ上で使う際にはセキュリティ面の対策が必要です。

Word Press では、デフォルトで SVG のファイルをアップロードできない仕様になっています。なので、SVG を利用したい場合は、Safe SVG などのプラグインを導入する必要があります。

Ai(エーアイ)

Aiの特長

Ai の特長:Illustrator で何度でも編集できる

Adobe 社が開発しているデザインツール「 Illustrator 」のプロジェクトファイルの形式が、Aiです。Illustrator は、ロゴやイラスト、ポスターを作るのにとても便利なデザインツール。

イラスト素材のサイトなどで、配布されていることもあります。

Ai で配布されている画像ファイルは、自分のPCに入っている Illustrator を開くことで、再度編集することができます。

配布している画像素材をさらに編集したい!という場面が多ければ、Illustrator を PC に導入してみても良いかも知れません。

Illustrator をもっていないと、開けない形式のファイルになるので、忘れても OK。

注目の拡張子たち

WebP(ウェッピー)

WebPの特長

WebP の特長:Google が開発した、サイトの高速化に役立つ画像形式

WebP は、ウェブサイト用の画像形式で、様々な形式の画像に対応しており、JPEG でも PNG でも GIFアニメーションでも WebP に変換できます。

さらに、WebPは、JPEG より 25 ~ 35 %、PNG より 26 % ほど軽量な状態で圧縮することが可能です。

読み込みに時間のかかるウェブサイトは、ユーザが離脱しやすいので、サイトの高速化は必須。

WebPを導入することで、画像のファイルサイズを軽量化し、ウェブサイト内の画像を素早く表示できるんです!

Word Press なら、アップロードした画像を WebP に変換してくれるプラグイン「 WebP Converter for Media 」を利用するのが、一番簡単です。

よくある疑問:Safari や Internet Explorer(IE)には、対応していない?

https://caniuse.com/?search=WebP

WebP の問題点は、Internet Explorer(IE)が、画像形式に対応していないことです。

iPhone に入っている Safari も対応していませんでしたが、2020 年のアップデートで、WebP にバッチリ対応できています。

また、Mac OS 11、Big Sur 以降の Safari であれば、WebP に対応しています。

あさまる
あさまる

あさまるブログも、WebP 形式の画像を使っているよ!

WebP に対応していない IE ですが、IE はブラウザのシェアランキング上位ではないので、思い切って WebP に移行してしまっても問題ないかもしれません。

出典:https://shiftasia.com/ja/column/2021年10月webブラウザシェア/

HEIF(ヒーフ)

HEIFの特長

HEIF の特長:高画質だけど低容量を実現

iOS 11 から画像の標準形式となった HEIF( High Efficiency Image File Format )。なんと、JPEG の半分の容量で、高画質を維持できるという画像形式。

画像形式の名前は「 HEIF 」ですが、拡張子は「 .heic 」となっています。

iOS どうしで HEIF 画像をやりとりする場合はいいですが、HEIF に対応していない OS が多い現状では、あまり使い勝手が良くありません。

困ったら、HEIF 画像を JPEG に変換するか、iPhone のカメラの設定を変更することをオススメします。いずれもこちらのサイトを参考にしてください。

よくある疑問:対応ブラウザがない…

iOS で標準形式となったにも関わらず、Safari すら対応していない状況の HEIF。普及にはまだまだ時間がかかりそうな雰囲気です。

https://caniuse.com/?search=heif

しかしながら、高画質で低容量というのは画期的な技術。注目しておきたい画像形式であることは間違いありません。

世の中が追いついていないだけで、あらゆるデバイスやブラウザで標準的に撮影・保存・アップロードが可能になっていくと思われます。

まとめ

今回のポイント
  1. JPEG は、色数が多く、圧縮率が高い
  2. PNG は、透過背景が使える
  3. SVG は、拡大しても画質が落ちない
  4. Ai は、Illustrator で編集可能
  5. WebP は、ウェブサイトの高速化に最適
  6. HEIF は、高画質で低容量のルーキー

拡張子の違いを理解できたでしょうか?

このほかにも数多の拡張子があり、それぞれに用途がありますよね。

画像形式にどんな特徴があるかを知っておけば、適切な場面で適切な画像形式を選ぶことができます。

特にウェブ関係の仕事をしている場合は、新しい拡張子にどんなメリットがあるかチェックしておくのがオススメですよ!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です