JPEGだけじゃない！画像のファイル形式いろいろ

用途に合わせて使い分ける

こんにちは、ホームページ制作のオイゾウです！
これからパソコン使いこなしていく上で「拡張子」を理解する必要性は前回の記事「パソコンを使うなら必ず知っておくべき「拡張子」とは？」で説明しました。
では、今後自身のホームページを作る上で特に必要なものは何でしょうか？
ホームページに載せるコンテンツ（情報）は主に「文章」と「画像」になります。
詳しい内容はおいといて、文章はHTMLというウェブに文書などを記述するためのファイル（拡張子は.html）に書き、CSSという、HTMLファイルに装飾するファイル（拡張子は.css）で書体や文字サイズ、行間などを指定します。
その辺りの内容に関するお話はもっと後になりますので、まずは画像ファイルの種類を是非覚えましょう！

JPEG（ジェーペグ）は聞いたことありますか？

馴染みのあるところで、デジカメや携帯電話、スマートフォンで撮影した写真は基本的にJPEGです。

それなら、画像は全てJPEGでいいのでは？

確かに、他のいろいろな種類のファイル形式を覚えるよりも、全てJPGで統一した方が楽かもしれませんね。
ですがJPEGにはJPEGの良さがあり、他の例えばPNGやGIFにも良さがありますので、これからホームページを作っていくのであれば最低限これらのファイル形式を知っておいて、適材適所で使い分けていく必要があります。
そこで今回「ウェブで表示する画像のファイル形式トップ3」を、それぞれの特徴や違いを紹介しつつ発表します！
※順番＝順位ではありませんのでご了承ください。

拡張子：.jpg

読み方：ジェイペグ
JPEGはジョイント・フォトグラフィック・エキスパーツ・グループの略。
スマートフォンやデジカメなどで撮影した写真のファイルはデフォルトではこの.jpg形式になっていることがほとんど。
写真のファイルをウェブで使用したいときは.jpgにしましょう。
圧縮率を細かく調整できるので、ファイルサイズを軽くしたいときは圧縮率を高くしましょう。
.jpgは不可逆圧縮画像なので、メリットはファイルサイズを小さくできますが、デメリットとしては一度圧縮（保存）してしまったら戻せません。
単に画像を開いたりするだけでは圧縮はされませんのでご安心を。
あくまで保存したときの話です。

メリット

• 色数が多い（約1,677万色）ので、写真に向いている

デメリット

• 不可逆圧縮のため一度圧縮すると元に戻せない

ほぼ見た目は変わらず、ファイルサイズを約1/3まで小さくできました。

拡張子：.png

読み方：ピング
PNGはポータブル・ネットワーク・グラフィックスの略。
8ビットと24ビットがありますが、それぞれに違いがあり、PNGの使い道を考えると24ビットを使うことになります。
8ビットの.pngはこの後で説明する.gifと同じ256色ですが、24ビットになるとフルカラーになり、なおかつ透過処理が可能になります。
この「透過処理」がとても重要です！
写真などのように色数が多い場合.pngだとファイルサイズが大きくなってしまいますので.jpgがベストです。
ただ.pngは.jpgと違って可逆圧縮画像なので、圧縮によってデータが捨てられることがなく、また色数が写真のように多くないイラストや、透過を使用したい場合にとても便利です。

メリット

• 透過処理ができる
• 写真以外の画像ではかなりファイルサイズを小さくできる

デメリット

• 写真を.png形式で保存するとファイルサイズが.jpgと比べてかなり大きくなる

ほぼ見た目は変わらず、.pngのファイルサイズは.jpgの約半分ほどに！

透過しているかどうかが分かるように、背景に色を入れてあります。

拡張子：.gif

読み方：ジフ
GIFはグラフィックス・インターチェンジ・フォーマットの略。
.gifには大きな特徴が2つあります。
1つは、扱える色数が最大256色までなので写真には向いてないが、イラストや文字などを画像で使いたいときにファイルサイズを小さくできて便利であるということ、もう1つはパラパラ漫画のようにアニメーションとして使えるということ。
ECサイトでのバナー広告や、数秒おきに表示されている画像が切り替わるウェブのディスプレイ広告でもよく用いられています。
ただし前述の通り色数が少なく、写真の画像をアニメーションで表現するとかなり粗い画像になってしまうため、注意が必要です。

メリット

• アニメーションができる
• .png同様に透過処理ができる
• ファイルサイズが小さい（軽い）

デメリット

• 色数が少ないので写真には向かない

こんな感じのアニメーションが作れます！
ちなみに数年前まではFlash（フラッシュ）というグラフィック映像コンテンツを使って高度なムービーをウェブ上で表現することが多かったのですが、スマートフォンが普及し、スマートフォンの中でも特に利用者の多いiPhoneがこのFlashをサポートしなかった（＝閲覧できない）ため、現在はほとんど使われなくなりました。

まとめると

.jpg

写真で使う

.png

写真以外の画像（ロゴなど）はほぼ.pngでOK

.gif

アニメーションを使うとき（バナー広告など）

一概には言えませんが、ほぼこの通りに使い分ければ問題なしです！
他にも画像に関するファイル形式はいくつかありますが、ウェブで表示するための画像ファイルはこの3つを覚えておけば間違いありませんので、是非ともそれぞれの使い道を含めて覚えてくださいね！

次ページ⇒パソコン初心者が最初に覚えるべき、基本のファイル形式