目次

  1. ファイル形式とは
  2. 主な画像のファイル形式
  3. 画像ファイルの圧縮方法の違い
  4. アルファチャンネル
  5. 実践編
  6. プログレッシブとインターレース
  7. まとめ

 

1.ファイル形式とは


ファイル形式とは、コンピュータ上でデータをどのように扱うかを定めた規約のことです。 文章、画像、音楽、動画、アプリケーションなど、用途に応じて細かく分類されています。

ファイル形式は、拡張子によって識別することができます。 拡張子とは、ファイル名の後に”.”で区切られた文字列のことです。

参考:ファイル名と拡張子の関係の一例

拡張子を不適切な文字列に変更すると、正しい拡張子として識別されずにファイルが開けなくなってしまうので注意しましょう。 なお、ファイル名に複数”.”が含まれている場合、パソコンが拡張子を誤認するケースも存在するので、ファイル名に複数”.”を使用するのは避けたほうが無難です。

補足:なぜファイル形式を使い分ける必要があるのか?

ファイル形式は、画像のものだけでも様々な種類がありますが、それぞれの形式にはデータを保存する上での長所と短所があります。もし、不適切なファイル形式を選択してしまうと、画質が劣化や、データ量がかさばるなどの弊害が生じてしまいます。

そこで、それぞれのファイル形式の特性を理解したうえで、画像の使用目的に合わせて、適切なファイル形式を選択する必要があります。

 

2.主な画像のファイル形式


主に使用される画像のファイル形式を表にまとめました。

補足:作業用データについて

パソコンでイラストを描くのに、Photoshop、GIMP、SAIといったソフトを使用している方もいらっしゃるかと思います。 これらのソフトには、アルファチャンネルやレイヤー情報などを記録した、ソフト固有のファイル形式(psd/xcf/saiなど)が存在します。 作業している間はこのデータを編集することになります。

ただし、これらのデータ形式は、対応するソフトがインストールされていないパソコンでは展開することができません。そこで、学校の作品展示やWebで公開する際には、標準的な画像のファイル形式(jpg/gif/pngなど)で書き出す必要があります。

補足:ベクトル画像について

ベクトル画像は、線や図形を座標データで描画する画像形式です。

ベクトル画像のメリットは、画像がデータで描画されるため、いくら拡大、回転しても画像が荒れることはありません。ただし、ベクトル画像のデータは主に作業用データで、一般公開する際にはベクトル画像編集ソフトでビットマップ画像に変換してやる必要があります。

Illustratorなどのソフトがないと扱う機会がないので、あまり馴染みのないファイル形式かもしれません。しかし、 InkscapeやParaDrawなどの無料でベクトル画像を編集できるソフトもあるので、興味のある方はベクトル画像でのイラストレーションにもチャレンジしてみてください。

 

3.画像ファイルの圧縮方法の違い


画像ファイルの保存でまず重要となるのは画像ファイルの圧縮方法です。画質の劣化を避けるためにもこの項目は覚えておきましょう。

  • 非圧縮(画像に圧縮がかけられていない状態)

    非圧縮のデータは、データ量が非常に大きいので、通信には不向きです。 メールに添付すると相手の迷惑になりかねないので注意しましょう。

  • 非可逆圧縮(データを改変し、画質を落としてデータ量を減らす圧縮方法)

    非可逆圧縮のデータは、圧縮の際に必然的にデータが失われてしまうので、画像の劣化は避けられません。 非可逆圧縮するファイル形式で保存する際には注意が必要です。

  • 可逆圧縮(データを均一に圧縮し、使用する際に元の状態に戻す圧縮方法)

    可逆圧縮のデータは、データを均一に圧縮するため、非可逆圧縮ほどの圧縮率はありません。 しかし、使用する際に画質が元の状態に戻るのは大きなメリットです。

 

4.アルファチャンネル


アルファチャンネルとは、画像の透明度を指定するデータ領域のことです。アルファチャンネルを適応すると、画像の背景を透明にしたり、半透明の画像を作成することができます。アイコンやボタンといった、WebやPowerPointで使用する画像素材は、先ほどの表の透過の項目に○のついた、アルファチャンネル対応のファイル形式で保存することをお勧めします。

参考:アルファチャンネルと画像の重なりの一例

背景のギンガムチェックの上に2種類の画像形式のドーナツを重ねています。左がgif形式(アルファチャンネル対応)、右がjpg形式(アルファチャンネル非対応)です。

 

5.実践編


主に利用される画像のファイル形式は、jpg形式、gif形式、png形式の3つです。それぞれ得意な画像のタイプをまとめておきましたので、ファイル形式を選択する上での参考にしてください。

  • jpg形式

    デジタルカメラで撮影した写真、絵画調のイラストやテクスチャの多いイラストといった、色彩が複雑な画像を保存するのに優れています。圧縮率を変えられるので、画質とデータ量の優先度を振り分けることができます。ただし、アルファチャンネルを適応したい場合はこの形式では保存できません。

    注意:ベタの多い画像には不向き

    jpg形式で画像を保存すると、圧縮によるデータ改変のため、必然的にブロックノイズによる画像の劣化が起こります。写真などではあまり目立ちませんが、ベタの多い画像だと、このブロックノイズによる画像の劣化がはっきりとわかるようになります。さらに、データ量もgif形式やpng形式と比べると大きくなってしまうので、ベタの多い画像をjpg形式で保存するのは避けましょう。

  • gif形式

    シルエットや単色のロゴなど、色数が非常に少ない画像を保存するのに優れています。アニメーションを適用したい場合もこの形式で保存します。

    注意:色数の多い画像には不向き

    gif形式は最大256色しか表現できません。PhotoShopなどのカラーマネジメントができるソフトでも使用しない限り、gif形式で色数の多い画像を保存すると、カバーできない色データが破棄されてしまいます。色数の多いベタな画像はpng形式で保存しましょう。

  • png形式

    ベクトル画像やアニメ塗りのイラストといった、比較的ベタが多い画像を保存するのに優れています。オールラウンダーな性質を持つので、判断に困ったらこの形式で保存しておくとよいでしょう。

    注意:写真には不向き

    写真のように色彩が複雑で縦横のサイズが大きい画像をpng形式で保存すると、データ量が膨大になります。人間の眼で識別できない部分は圧縮をかけたほうがデータ量が抑えられるので、適度な圧縮率のjpg形式で保存しましょう。デジカメで撮影した写真の画像データがjpgなのも、jpgが写真の画像データの保存に適しているからです。

 

6.プログレッシブとインターレース


補足として、プログレッシブとインターレースについて触れておきます。

PhotoShopなどで画像を保存する際に、jpg形式で保存する際にはプログレッシブ、gif形式やpng形式で保存する際にはインターレースという設定の項目が見つかるかと思います。この部分は標準のままで特に問題はありません。どういう効果があるのか知りたい人以外は、以下の説明を読み飛ばして下さって結構です。

補足:プログレッシブとインターレース

プログレッシブやインターレースを行うと、Webで画像を閲覧する際に、ファイルが完全に読み込みまれるまでの間、低解像度で画像が表示されます。ユーザーが、読み込みまでの間、画像の全体像をつかみやすいという、通信速度の遅い環境にあるユーザーに配慮した設定です。しかし、このブロードバンドの時代、ほとんどその役目は薄れてきています。

ちなみに、jpg形式でプログレッシブを設定にすると、データ量が若干小さくなり、gif形式やpng形式でインターレースを設定にすると、データ量は若干大きくなります。jpg形式の画像のデータ量をわずかでも小さくしたい場合は、プログレッシブを設定しておいてもよいでしょう。

なお、プログレッシブとインターレースの違いは、画像の走査・処理の仕方にあります。動画を扱う場合には非常に重要になりますが、少し高度な内容なので、今回は説明を割愛させて頂きます。

 

7.まとめ


画像ファイルの形式選択には、画質とデータ量の妥協点をみつけることが必要です。しかし、実際は判断がつきにくい場合が多いので、困ったら複数の画像形式で保存して比較してみましょう。

作業データを破棄しなければ、様々な形式で保存できるので、遠慮なく試してみてください。jpg形式とpng形式の二つの形式で保存して、二つのファイルを比べてみれば、ここまで読んだあなたなら、どの形式で保存すればよいか分かると思います。

 


Author: observatory17




blog comments powered by Disqus