いまからはじめてみるブログ

日記とか趣味のこととか、いろいろ書いてみようと思っているブログです。とりあえず何かやってみます。

スポンサーサイト

--.--.-- (--)
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

画像の形式・GIFとJPGの違い、それぞれの使い分け[初心者向け]

2013.05.16 (Thu)

■画像の種類・GIFとJPGについて


ブログやデジカメが一般的になってから、webやhtmlの知識がない方でも、自分で撮影したり、加工した画像を公開する機会が多くなりました。


この画像ファイルには、いくつかの種類がありますが、特に多く使用されている形式として「GIF」と「JPG」を挙げることができます。


画像を扱った経験のある方は、「xxx.gif」や「xxx.jpg」という形式のファイルを目にされたことがあると思いますが、それぞれの性質の違いは御存知でしょうか?



適切に使い分けることで、画像を綺麗に表示したり、ファイルサイズを小さくして表示を早くすることができます。


サンプル画像を用意しましたので、興味のある方は、それぞれを比較しながらご覧になって下さい。



■GIF画像とJPG画像の比較


・サンプル画像1(JPG形式)


GIFとJPGの比較・サンプル画像1

画像はクリックで拡大できます(別ウィンドウで開きます。)ので、次の画像と見比べていただければ、画質の差がよく分かると思います。


・サンプル画像2(GIF形式)


GIFとJPGの比較・サンプル画像2

サンプル画像の1と2、どちらもファイルサイズは約200KBですが、画質に大きな差があることには、すぐ気がつかれると思います。


まず、もっとも分かりやすい特徴として、JPGとGIFでは、使用できる色数が異なっています。
JPG画像は最大約1678万色、GIF画像は256色まで使用することができます。
多くの色を表現できるため、特に写真などはJPG形式の方が向いています。



それでは、色数の多いJPG形式だけを使用すればいいのか?となると、それは正しい選択とは言えません。

続いて、次のサンプル画像をご覧ください。



・サンプル画像3(GIF形式)


GIFとJPGの比較・サンプル画像3


・サンプル画像4(JPG形式)


GIFとJPGの比較・サンプル画像4

サンプル画像の3と4のファイルサイズは、どちらも約15KBですが、拡大してみると画質の差は一目瞭然、今回はGIF画像の方が、綺麗に表示されています。


これはGIFとJPG、それぞれの圧縮方法に理由があり、GIFは「可逆圧縮」、JPGは「不可逆圧縮」という方式で画像を圧縮しています。


専門的な説明は省略しますが、GIFは「どの色が何回使われるか整理する」という方法の圧縮、JPGは「色の変化をもとに、似た色を取り除く」方法の圧縮と言えます。



これでもまだ分かりにくいと思いますので、もっと平たく言ってしまうと、GIFは色数が少なく、均一な塗りの表現に適しており、JPGは色数が多く、色の変化の多い表現に適している、ということになります。


例えば、ベタ塗りの背景や細い線、文字・ロゴなどであればGIF画像、写真や滑らかなグラデーションであれば、JPGの方が綺麗に表示することができ、ファイルサイズも小さくて済みます。



ここで、JPG画像を加工する場合に、注意すべき点があります。

JPGは「不可逆圧縮」という説明をしましたが、この「不可逆」、画像を加工して保存する度にデータが劣化していく、という意味になります。


ペイントツールなどでJPG画像を加工・補正する際に、同じ画像を何度も上書き保存して修正する方法は、ファイルサイズばかり大きく、汚い画像となってしまいますので、あまりお勧めできません。



■JPGにはない、GIFの特徴


ここまで、JPGとGIFの性質について、画質やファイルサイズに関する比較で見てきましたが、GIFはJPGにない特徴を二つ持っています。


一つは「背景の透過」、もう一つは「アニメーション」です。


透過は、画像の一部分を透明にすることで、背景色や背景画像が見える様になる処理です。


サイトのメニューやボタンなど、色々な背景に対応できる汎用性が必要な場合に用いられます。
GIF画像で保存できるペイントツールであれば、多くの場合、透過処理にも対応していると思います。



また、アニメーションは「GIFアニメ」と言われるもので、近頃は多用するサイトも少なくなりましたが、バナー広告や、点滅するアイコンなどは、まだ見かけることがありますね。


GIFアニメに関しては、全てのペイントツールに含まれる機能ではないので、作成可能なツールを探す必要があります。


ただ、仕組みは簡単で、コマ撮りのアニメのように何枚かの絵を描いていき、表示の秒数を指定して順番に切り替えているだけです。


フリーのツールも出回っていると思いますので、興味を持たれた方は、挑戦されてはいかがでしょうか。

関連記事

コメント

お手数をお掛けします
simple_planを利用させていただいています。

お願いがあるのですが両サイドバーの幅を200から230にしたいのですがそのカスタマイズの方法をお教えいただけないでしょうか?

width:960px;のところは1020pxに変更し、header_menu {width:940px;は1000pxに変更、サイドバー200pxの部分は230pxに変更し画像幅も230pxにしましたがうまく表示できません。

迷惑とは思いますがよろしければ、カスタマイズの方法教えていただけないでしょうか?

おねがいします。
Re: お手数をお掛けします
遅くなってしまい、申し訳ありませんでした。
お問い合わせいただいた件、その部分の数値の変更だけでは、レイアウトが崩れてしまうと思います。

スタイルシート中の#leftsideと#content部分で回り込みを行っていますので、この部分も変更が必要になります。
言葉では説明しにくいのですが、イメージ的には、960pxの箱の中に、左740pxと右220pxの箱があり、740oxの箱はさらに、220pxと520pxに分かれている構造になります。

divタグのflatの挙動は御存知でしょうか?
この辺りの知識があった上で、ソースを読むのに慣れていないと、カスタマイズは難しいと思います。
作った時にはカスタマイズまで考慮していなかったので、分かりにくい作りですいません。 
No title
ご説明ありがとうございました。

基本的なことしかまだ理解しておりませんのでCSSの勉強をしてから再度チャレンジしたいと思います。

お手数おかけいたしました。

管理者のみに表示

トラックバック

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。