pickup
画像ファイル形式

JPG、PNG、GIFって言葉は聞いたことはあるけど、意味が分からずそのままWebサイトなどで使用していませんか?

JPGPNGGIFはどれも画像を保存する際のファイル形式の一つで、他にもBMPTIFFといった画像ファイル形式があります。

でもどれがWebサイトの画像に最適であるか分かりませんよね?

それは貼り付ける画像によって変わってきます!

Webサイトに最適な画像ファイル形式は画像によって異なり、使用目的に合わせた最適な方法で保存することがWebページなどで使用する一番良い形式になると思います。

スポンサーリンク

・画像ファイル形式について

①JPGファイル(Joint Photographic Experts Group)  

拡張子:jpg、またはjpeg(ジェイペグ)

保存形式:非可逆圧縮(一度圧縮してしまうと元に復元できない)非可逆圧縮は保存をするたびにデータを損失していく。

 

色数:24bitフルカラー(1,677万色)

 

透過:不可能(背景を透明にすることが出来ない)

 

画質劣化:あり(見た目では分かりにくい、画質に影響しないようにデータを捨てているが、何度も保存を繰り返すと画質の劣化に気づく)

 

用途:写真やCGなど多彩な色を表現したい画像

 

不向き:アンチエイリアスによって、ぼやけたり、かすれたりするので活字や線、シャープな輪郭を含む写真に向かない。ロゴ、イラスト(ノイズが発生する)

アンチエイリアスとは

コンピュータで扱うデジタル画像ではピクセル単位より細かく描画することは出来ない。このため物体の輪郭にジャギーと呼ばれるギザギザが発生してしまう。このジャギーを軽減し少しでも目立たなくするために、物体の輪郭を背景と融合するように色を滑らかに変化させることをアンチエイリアスといい、その処理をアンチエイリアシングという。

②PNGファイル(Portable Network Graphics)

拡張子:.pig(ピング)

 

保存形式:可逆圧縮(圧縮してもまた同じ状態に戻すことが出来る形式))

 

色数:24bitフルカラー(1,677万色)、最大で48bit(280兆色)

 

透過:可能(GIFよりも透過を用いた画像を作るのに適している)

 

画質劣化:なし(保存の際に画像の劣化が起きない)

 

用途:透過を生かした画像合成でき、透過度の異なるグラデーションを表現することが出来る。劣化をさせたくない場面に使用されることが多い。

 

不向き:印刷物に使った場合、RGBしか対応しておらず、CMYKに対応していないため印刷するとパソコンで表示されていた色から若干異なるなどの不具合があるので不向きと言える。またJPGと比べると同じフルカラーでも可逆圧縮形式のためファイルが大きくなってしまう。

 

CMYK:インクやトナーなどで紙などに印刷する時に色の3原色+黒色で表現する形式。(シアン(Cyan)、マゼンタ(Magenta)、イエロー(Yellow+)

 

RGB:パソコンなどモニター上で光の3原色で色を表示する形式。((Red)、緑(Green)、青(Blue))

③GIFファイル(Graphics Interchange Format)

拡張子:.gif (ジフ)

 

保存形式:可逆圧縮(圧縮してもまた同じ状態に戻すことが出来る形式)

 

色数:モノクロ2階調 8bitカラー(256)

 

透過:可能(簡単な透過なら可能)

 

画質劣化:色数が同じなら基本なし

 

用途:アイコンやロゴなどの単調な画像に適しており、アニメーションにも対応している。扱うことが出来る色数は少なく、透過もPNGより劣るが高圧縮できるのでファイルサイズを最小限に抑えることが出来る。

 

不向き:JPGPMGに比べて色数が極端に少ないので、写真などの高画質なものには不向きと言えます。また透過には対応しているが、半透明には対応できない。

④BMPファイル(Microsoft Windows Bitmap Image)

拡張子:.bmp(ビットマップ)

 

保存形式:無圧縮。圧縮ができないわけではないが、対応しているソフトウェアが少ないため基本的には無圧縮となり無圧縮の画像形式と説明されることが多い

 

色数:モノクロ2階調(白と黒のみの2)から24bitフルカラー(16777216)まで対応

 

透過:不可能。

 

画質劣化:基本的には無圧縮のため画像劣化はなし。

 

用途:編集中などの中間フォーマットとして利用をすることがおすすめ。印刷やホームページに掲載など、使用する際はJPGPMGなどに圧縮をすれば使用が可能。

 

不向き:データ転送や印刷(CMKYに対応していない)Webサイト(容量が大きい)などには不向き。またメールや添付にも適していない。BMPはこの中の形式では開発時期が一番古いため、他の優れたファイル形式を使用する人がほとんどであり、好んで使用されることがない。

⑤TIFFファイル(Tagged Image File Format)

拡張子:.tiff、または.tif(ティフ)

 

保存形式:無圧縮。圧縮することは可能だが、ファイル形式がWebに対応していないので、ブログなどにアップする場合にはJPEGなどに変換する必要がある。

 

色数:8bitフルカラー(1670万色)対応。

 

透過: 不可能。

 

画質劣化:基本的には無圧縮のため画像劣化なし。

 

用途:高い解像度が必要な場合や、デジタルカメラの画像形式に用いられることが多い。また再現度が高いので原稿の入稿等によく使用される。

 

不向き:容量が極端に多すぎるので、Webサイトなど容量を抑えたい場合には不向き。また容量が大きいためアプリケーションに読み込ませる時やWebにアップロードする時に時間がかかる。

 

 

それぞれのファイル形式の基本を解説しましたが、今回はWebサイトに最適なファイルについて解説しているので、ここからはJPG、PNG、GIFファイルの3つに焦点をあてて解説していきます。

・JPG、PNG、GIFファイルの違いと特徴

 

①JPG、PNG、GIFの違いは?

上記の写真から各画像のファイル形式を比較するとGIFは色数が少ないため、このような場合だと画像が粗くなってしまう。

またJPGPNGではきれいに表示されているが、PNGの容量はJPG5倍以上大きくなってしまう。

 

各画像のファイル形式は次のような場合に適しています。

JPG風景・景色・人物像などの多くの色を使う写真に適している。

 

PNG透過処理も出来るので、遠近がある画像や色数が多いイラストに適している

 

GIF256色以下のロゴやイラスト、アイコンなどに適している

 

紙媒体をデザインする際は画質が綺麗なものが良いですが、Web制作の場合は画像データの重さがページの読み込み時間に影響が及んでしまうので、出来るだけファイルサイズは軽いものが良いと思います。

それぞれの特徴を生かして細かく設定をすることで、綺麗な画質を維持することができ、尚かつファイルサイズも抑えることが出来ます。

②JPGの使用パターン

JPGはデジタル写真用に開発された画像のファイル形式で、1670万色(24ビット)のフルカラーに対応しており、ホームページに掲載する大きな画像を使用する際に最適です。

写真などのグラデーションを使った色の変化がある画像にも適しているので、よく使われていると思います。

 

圧縮率を高くし、容量を小さくまとめて保存することが出来るので、Webサイトなどにサイトスピードを考えている方にはピッタリなファイル形式です。

 

しかしながら、一度圧縮すると元の画像、品質に戻せない非可逆圧縮方式なので、保存する時の圧縮率には注意が必要です。

圧縮率を高くすればするほど、画像にノイズが出ます。保存する時には何枚か圧縮率を変えた画像を作成して、最適な圧縮率を選択することをおすすめします。

③PNGの使用パターン

PNGJPGと同じくフルカラーに対応しています。

最大で48bit281,474,976,710,656(280兆色)が表現できるので、JPGよりも綺麗に表示ができるが、JPGより容量が大きくなってしまいます。またRGBのみの対応になるため印刷物に使った場合、色合いが若干異なるなどの不具合があるので不向きと言えます。

 

しかしながら、JPGとは異なり可逆圧縮を採用しているので圧縮後の画質劣化がありません。

また完全な透過、不透明、半透明を表現することもできるので、ホームページに掲載する画像で、重ね合わせたデザインをする時にはとても便利な画像のファイル形式と思います。

Webサイトでどうしても綺麗に表現させたい箇所などは、ファイル容量が大きくなりますが、JPGよりもPNGの使用をおすすめします。

④GIFの使用パターン

 

 ホームページによく使われる画像のファイル形式で、モノクロ2色から最大で256(8ビット)に対応しています。

 

ロゴやボタン、アイコンといった多くの色を使わないホームページ素材やイラストの使用に最適で、透過ができるという特徴もあり、画像の一部やすべてを透明にして使用できます。

またGIFはアニメーションを設定できるのも特徴で、パラパラマンガのようにコマ送りの動きを付ける事ができます。

滑らかな動きを表現するには不向きですが、アイコンに簡単な動きを付けたりするには便利です。

 

欠点としては表現できる色数がJPGPNGと比べると極端に少ないので、写真や高画質を求める画像には不向きです。

またPNGの様に透明に対応していますが、半透明には対応できないという点があります。

・まとめ

画像のファイル形式にはこのような意味があり「何を表示するのか、何に使うのか」を明確にして、適した形式で保存することが大切です! 

Webサイトやブログをやっている人は特に気にしていると思いますが、サイトスピードは重要ですよね?

画像の最適化はサイトスピードにも大きく関わっているため、SEOの重要な要素の一つでもあります。

私自身もブログを始めたばかりなので、しっかりと特徴にあった最適な画像ファイル形式を使用し、サイトスピード、画質のクオリティを上げて良質なWebサイトに仕上げていきたいと思います!

スポンサーリンク

Twitterでフォローしよう

おすすめの記事