TAG index
ホームページ作成ガイド

ステップアップ&テクニック - ホームページ作成ガイド

HTML&CSS Web制作リファレンス
- ホームページの構築・運用 -

< HOME / ホームページ作成ガイド / JPEGの圧縮率と画質
JPEGの圧縮率と画質


画像をJPEG形式で保存する場合、その圧縮率を変更することができます。(ソフトによっては変更できない場合もあります)

圧縮率を高めるほど、画像のデータ量は減っていくので、その画像の表示スピードは速くなります。しかし、それと引き換えに画質が悪くなってしまうので、画質の良さをキープしたいのであれば、画質とデータ量のバランスを考える必要が出てきます。

ここでは、JPEGの圧縮率を変えることにり、画質やデータ量がどの程度変化するのかをチェックしてみたいと思います。


 圧縮率の変更方法
私の使っているソフトでは、次のような操作内容になります。

Paint Shop Proの場合
 1. 名前を付けて保存
 2. 保存形式をJPEGにする
 3. 「オプション」ボタンをクリック
 4. 圧縮レベルを変更
 5. 「保存」ボタンをクリック

Photoshopの場合
 1. 別名で保存
 2. 保存形式をJPEGにする
 3. 「保存」ボタンをクリック
 4. 画質を変更
 5. 「OK」ボタンをクリック

ソフトにより操作方法は多少異なりますが、だいたいは画像を保存する際に変更できるようです。詳しい操作方法については、使用するソフトのマニュアルをご覧ください。


 データ量の変化
Paint Shop Proを使い、圧縮率の違いによるデータ量の変化を確認してみました。

圧縮レベル (低) 1 10 20 30 40 50 60 70 80 90 99 (高)
データ量 (大) 630KB 237KB 166KB 111KB 93KB 79KB 69KB 57KB 43KB 26KB 10KB (小)

圧縮レベルを1→10にするだけでデータ量は半分以下、20にすると1/4程度まで落とすことができました。このように、圧縮率を少し高めるだけでも、画像のデータ量を大幅に落とすことが可能になります。

※上記のデータは一例です。画像の内容によっては異なるデータが出る場合もあります。


 画質の変化
Paint Shop Proを使い、圧縮率の違いによる画質の変化を確認してみました。
(数値は圧縮レベル)

圧縮レベル1 圧縮レベル10 圧縮レベル20 圧縮レベル30
1 10 20 30

圧縮レベル40 圧縮レベル50 圧縮レベル60 圧縮レベル70
40 50 60 70

圧縮レベル80 圧縮レベル90 圧縮レベル99
80 90 99

この例の場合、圧縮レベルを高めていくと、まずは空と塔の境目あたりにニジミが出てきます。続いて空のグラデーション部分がカクカクとした感じになり、最後はモザイク状でワケ分からなくなります。

※画像の内容や大きさにより、ニジミなどの目立ち加減は異なります。


ホームページ作成ガイドTOP


HTML5HTMLタグCSSカラーチャートWeb便利ツールテンプレートJavaScript
< HOME PageTop▲