よら’s atelier

保存形式いろいろ

当然赤石以外のブログもあるのですが、記事を書いていく際画像を交えて書いていくと読み手側も理解しやすく、書き手側も説明がしやすいという利点があります。

画像と一言で言っても色々な形式があります。
bmp、jpg、gif、png等と言われる拡張子ですね。

色々あって分かりづらいし何がどう違うんだよ！
見えてれば良いんじゃね？
という方も居るでしょうが、ブログスペースの容量にも限りがあるしどうせなら綺麗な画像で載せたいな～と私は思いますｗ

さらに画像というのは文字情報のみと比べ圧倒的に重いです。
画像を軽くするというのは、限られたブログスペースにたくさん画像データをアップできるという利点とともに閲覧者側も素早くページをダウンロードできるという利点があります。

では実際にどういう風に使い分ければいいのか。
まずはそれぞれについて軽く説明。

bmp - Bit MaP -　ビットマップ
Windowsが標準でサポートしている画像形式で白黒2色の画像からフルカラー(1677万7216色)までの色数を指定できる。基本的には無圧縮で画像を保存するが、16色と256色の形式では、圧縮するオプションが選択できる。
赤石のスクリーンショットを撮るとこの形式で保存されますね。
容量はかなり大きいです。

jpg - Joint Photographic Experts Group -　ジェイペグ
この圧縮方式はフルカラーを使え、更に高圧縮率が得られるのが特徴です。さらに圧縮率を変化させ用途に応じた画像を得られる事も素敵な点です。圧縮率次第でbmpの数十分の一にもなります。
グラデーション等色の変化の多い画像が得意でgifよりも軽くなる場合もあります。

gif - Graphic Interchange Format -　ジフ
256色までの画像を保存することができ、JPEGが苦手なベタ塗りイラストやアイコンなどの保存に向いています。またパラパラ漫画のようにgif画像を繋げる事でアニメーションを表現することもできます。
スチーム先生2

これがアニメーションgif。
さらにjpgやbmpでは不可能な透明部分を表現できる点も大きいです。

圧縮に使われているLzWというアルゴリズムはUnisys社が特許を持っているため、GIFに対応したソフトウェアを販売／配布するにはUnisys社にライセンス料を払う必要がある。このライセンス料を嫌って、PNGというライセンスフリーの画像フォーマットが策定された歴史もあります。

png - Portable Network Graphics -　ピング
gifのライセンス問題によって生まれた方式。
圧縮アルゴリズムにはライセンス料のいらないdeflation方式を採用していて、これはファイル圧縮フォーマットのZipなどでも採用されている方式です。
また、フルカラーの自然画を劣化無しで圧縮できたり、gifのように透明度を指定できるのが良い点で、私はFlashを作る際よく活用しています。

ちなみに
セイジjpg画質100

jpgでweb用保存して画質を最高の100に設定。183kb。

セイジjpg画質60

同じように画質を60に設定。48kb

楽天ブログではbmp形式は載せられないみたいですが、bmpの場合341kbです。

私は主にPhotoshopで画像処理を行うのですが、ウェブに公開する用途の場合ウェブ用保存という機能が便利です。かな～り軽くなりますよ。
ディスプレイ上で見る場合jpgの画質60以上だとほとんど変わらないのでなるべく軽くしたい場合は調節した方が何かと良いです。

【グラデーションのある画像。】
レモンjpg画質80

jpg画質80。19kb。　　　　　　　　　　　　　　　　　　gif256色。37kb。

レモンpng8ビット

png8ビット。36kb。　　　　　　　　　　　　　　　　　　png24ビット。91kb。

レモンの背景を切り抜いてグラデーションを付けてみました。
jpgでは画質を80に落としても綺麗にグラデーションが掛かっていますね。
しかしgifではカクカクになってしまいます。
gifに対抗して作られたpngも8ビットではgifと同様。
というのも8ビットというのは2の8乗＝256色の表現ができるという意味なので同レベルなのも納得です。
pngには24ビットもあり、こちらは綺麗にいってますね。しかしjpgに比べかなり重いのが難点です。ただ、ベタ塗りの多い画像の場合はjpgよりも軽くなります。

とこんな感じです。
私は基本的に写真やグラデーションの多い画像はjpg保存、装備紹介に使っている装備品などのベタ塗りの多い画像はgif、Flashを作る際の光彩や透明度を表現する場合の画像はpngを使用しています。
ただし、透過性pngは古いブラウザだと対応していない場合があるので多用禁物です。

ジャンル別一覧