静止画のフォーマット「JPG, PNG, GIF, SVG, WebP」の読み方は?

静止画のフォーマット「JPG, PNG, GIF, SVG, WebP」の読み方は?
関連キーワード
デザイン

ウェブサイトやブログなどで使われる主な画像ファイルのフォーマットとして「JPG / PNG / GIF / SVG」があります。

よく目にするものの、なんて読むのか分からないっていう人もいるのではないでしょうか?

それぞれの読み方についてご紹介します。

JPG / PNG / GIF / SVGのそれぞれの読み方

「JPG / PNG / GIF / SVG」のそれぞれの読み方について、順番に解説していきます。

JPGの読み方

JPGは元々は「JPEG」という形式でして、これを「ジェイペグ」と読みます。

JPGという表記でも同じように「ジェイペグ」と読み、「ジェイピージー」というようなアルファベットを1文字ずつ読むのは一般的ではありません。

PNGの読み方

PNGは「ピング」と読みます。こちらもJPG同様「ピーエヌジー」というアルファベットを1文字ずつ読むような読み方はしません。

Gを発音せずに「ピン」という読み方をする人もいるようです。聞いた感じは似たような音なので、どちらを使っても良いんじゃないでしょうか。

GIFの読み方

GIFは「ジフ」と読みます。やはりこちらも「ジーアイエフ」とは読みません。

稀に「ギフ」という読み方をする人もいるようですが、「ジフ」が一般的ですね。

GIFを使ったアニメーションのことを「GIFアニメ」と呼びますが、こちらもカタカナ表記すると「ジフアニメ」となります。

SVGの読み方

最後に紹介するSVGですが、「エスブイジー」とここに来てアルファベットを1文字ずつ読みます。

「スブグ」みたいな読み方はしません。

JPG / PNG / GIF / SVGはどう違うのか

今回読み方をご紹介した「JPG / PNG / GIF / SVG」は、それぞれ違ったフォーマットですが、どれも画像を扱うファイルには違いありません。

それぞれがどう違うのか、ざっくりいうとこんな感じです。

  • JPGは、写真のような色数の多い画像を軽くしやすい
  • PNGは、簡単なイラストのような色数の少ない画像を軽くしやすい
  • GIFは、PNGと似ているけどもGIFアニメというアニメーションを作ることができる
  • SVGは、拡大縮小しても画質が荒れない

JPGとPNGとGIFの違いについては、下記の記事で詳しく解説しています。こちらもぜひご覧ください。

関連記事『JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる!』のサムネイル画像
JPGとPNGとGIFの違いを理解できるときれいで軽い画像が作れる!
続きを読む

SVGについて

上記の記事ではSVGについて解説してないので、こちらで解説しておきます。

SVGは「Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)」の略で、illustratorのベクターデータという拡大しても縮小しても画質が荒れることのない画像データのことです。

最近ではウェブサイトでも使うことができるようになり、軽くて画質が良いことから多用されてきている画像形式です。

WebP(ウェッピー)という画像フォーマット

最近では軽くて画質の良い「WebP(ウェッピー)」という画像フォーマットも出てきました。

「ウェブピー」と読みそうですが、「b」は発音せずに「ウェッピー」と読むんですね。

JPGより軽く、PNGのように背景を透過させることができ、GIFのようなアニメーションを作ることができます。

ただし、この記事執筆現在ではまだ対応していないブラウザがあるため、ウェブサイトなどで実際に使うのはもうちょっと先になってしまいそうです。

最後に

最後に読み方をまとめておきますね。

画像 読み方
JPG ジェイペグ
PNG ピング
GIF ジフ
SVG エスブイジー
WebP ウェッピー

この他にも動画のフォーマットで「mpeg」「mov」などもありますが、また別の機会にまとめたいと思います。

ちなみに、ウェブデザインの用語で幅を表す「width」という言葉があるんですが、その読み方についてはこちらの記事で解説してます。

関連記事『CSSのwidth(横幅)の正しい読み方を教えてもらった』のサムネイル画像
CSSのwidth(横幅)の正しい読み方を教えてもらった
続きを読む