ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

誤っていません?画像形式の正しい選択方法(4ページ目)

ページ上に画像を貼り付ける際、画像形式の選択を誤っていませんか?選択を誤ると、ファイルサイズが大きくなったり、画像が粗くなったり、デメリットだらけです。適切な選択方法をご紹介。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

それぞれの形式の得意分野

それでは、それぞれの形式について、その得意な画像の種類についてご紹介していきましょう。

JPEG形式

結論から言ってしまいましょう。簡単に言うと、

JPEG形式は、写真に向いている。
JPEG形式は、イラストには向いていない。

……と言えます。

先ほどの例では、最初に All About のロゴを使いました。 そのとき、JPEG形式を選択した方は、画像がボケて粗くなっていましたね。
その次の例では、風景を撮影した写真を使いました。 そのときは、JPEG形式の方が、ファイルサイズが小さくなっていましたね。

JPEG形式は、写真などの連続して色が変化するような画像の圧縮に適しています。 逆に、イラストのように「色の境目」がハッキリしているような画像の圧縮には向いていません。

また、JPEG形式は「非可逆圧縮」という形式で、元の画像から情報を削減する(一部のデータを切り捨てる)ことで、データサイズをより小さくする手法を採っています。 どの程度の情報を削減するかを「圧縮率」という形で自由に指定できるため、 画像が粗くなるのと引き替えに、かなりデータサイズを小さくできるというメリットがあります。

写真ならある程度まで圧縮率を上げてもあまり粗さが気にならないのですが、イラストなど色の境目がハッキリしている画像なら少し圧縮するだけでも粗さが目立ってしまいます。

▼JPEG 60% ▼JPEG 30% ▼JPEG 15%
JPEG形式 60% JPEG形式 30% JPEG形式 15%
5.87KB 3.51KB 2.42KB

なお、「非可逆圧縮」という名称の通り、一度JPEG形式に変換すると、二度とオリジナルの状態には戻せません。(一部のデータを切り捨てているから)
※劣化させずに保存しておきたいなら、作成した画像編集ソフトの独自形式で保存しておくか、可逆圧縮方式(後述)であるPNG形式で保存するなどすれば良いでしょう。

GIF・PNG形式

こちらも結論から言いましょう。

GIF・PNG形式は、イラストに向いている。
GIF・PNG形式は、写真にはあまり向いていない。

……と言えます。JPEGとは逆ですね。

先ほどのイラストを使った例では、GIF形式を選択した方は、ファイルサイズが小さく、画像も粗くなったりしていませんでしたね。
逆に、写真を使った例では、画像はきれいに見えてはいましたが、ファイルサイズが非常に大きくなっていました。

GIF形式やPNG形式は、イラストのように色の境界がハッキリしていて、全く同じ色が連続して使われている箇所が多い画像の圧縮に適しています。 逆に、写真のように、色がたくさん使用されている画像の圧縮には向いていません。(=あまりデータサイズが小さくなりません。)

また、GIF形式もPNG形式も「可逆圧縮」という方式で、元の画像の情報を100%保持していますので、 これらの形式に変換することで「画像が粗くなる」ことはありません。
しかし、適していない種類の画像に用いても、あまりファイルサイズが小さくなりません。

※画像編集ソフトウェアを用いると、GIF/PNG形式で出力する際に、減色を行って色数を下げる機能があるものがあります。 これを使うとファイルサイズがもっと小さくなる可能性が高くなるわけですが、この処理を行うとオリジナルの画像データには戻せなくなります。(色数を減らしているわけですから。) ただ、これはあくまでも画像編集ソフトによる処理の問題であって、GIF/PNG形式という画像形式の問題ではありません。

特に、GIF形式に関しては、最大で256色しか表現できませんので、フルカラーの写真には向いていません。
PNG形式はフルカラーをサポートしていますので、写真にも利用はできますが、(写真に関しては)JPEGほどデータサイズは小さくなりません。

簡単なまとめ & いくつかの例

それでは最後に、画像形式の選択方法について簡単にまとめます。

それでは、次のページへ →

  • 前のページへ
  • 1
  • 3
  • 4
  • 5
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます