HP上の画像の“にじみ”の解消法は？

[上に] [前に] [次に]
｣eetpop [E-Mail] [HomePage] 2000/02/24(木) 19:01:03
こんにちは。初めて質問させていただきます。
我が家ではお友達や家族に向けて近況をお知らせする目的でHPを公開しています。
その際いつも困っていることが、画像のにじみです。

ちなみに私の画像処理の方法は次の通りです。
①デジカメで静止画を撮影
②Microsoft Photo Editorで取り込み
③トリミングや縮小してHP上に載せる…というものです。

そのようにしたらなめらかな画像がHP上で出せるのか、コツや方法、
また、私の処理方法で間違いや何か抜けていることがありましたら、ぜひ教えてください。

それでは、よろしくお願いします。
ＥＭＩ 2000/02/24(木) 19:49:08
Photo Editorは、あまりいい画像変換機能を持ってませんからねぇ。
なので、JPEGに変換するとどうしても画質が落ちます。
Photo Editorを使うという前提で、一番手っ取り早いのはJPEGのかわりにPNGを使うことでしょう。
画質の劣化もないし、圧縮効率もJPEGやGIFより上です。
ただし、古いブラウザだと見られないと言う欠点がありますけど。
HIROPON [E-Mail] [HomePage] 2000/02/24(木) 19:58:24
にじんでいる画像は「JPEG」という形式で保存されています。
この形式は、簡単に言うと人間の目に目立たないように
色の情報を間引いてファイルサイズを小さくするものです。
この間引き具合が大きすぎると、問題の画像のように
色のにじみが発生してしまうのです。

PhotoEditorでは保存時に、この間引き具合を設定することが
できます。JPEG形式で保存するときに開くウィンドウの下のほうにある
「オプション」を開くと、スライドバーが出てきます。
ここでつまみを「ファイルサイズ大／画質高」のほうに動かせば、
画質の劣化を減らすことができます。

ただ、画質をあげると色の間引が少なくなる分、ファイルサイズが
大きくなりますので、ファイルサイズと画質をにらみながら
最適の位置を探すようにしましょう。
HIROPON 2000/02/24(木) 20:04:10
JPEGの保存では、個人的にはフリーソフトの
「Dibas32」がお勧めです。「間引き」の具合を
かなり細かく調節できますので（窓の杜などでダウンロードできます）

PNGは、圧縮率自体はGIFよりは上ですが、写真のような画像では
JPEGよりサイズが小さくなることはまずありません。
（やってみれば分かります(^^;）
ＥＭＩ 2000/02/24(木) 20:13:19
＞PNGは、圧縮率自体はGIFよりは上ですが、写真のような画像では
＞JPEGよりサイズが小さくなることはまずありません。
そうですか？
経験的にグラデーションなどを多用した画像をPhoto Editorで圧縮した場合、JPEGだと標準の圧縮率で既ににじみが大きいし、PNG並に圧縮率を高めるともはや使い物にならないくらいが質が落ちるので。
まぁ、「写真のような画像」というのがポイントかもしれませんが。
（グラデーションと写真は違うだろうし）
HIROPON 2000/02/24(木) 20:47:04
本題からちょい外れた、かなり細かい技術的な話ですが(^^;

PNGの圧縮はZIPで使われているのと同等の圧縮技術を用いています。
このアルゴリズムでは、頻繁に出現するデータの並びを短いコードに
割り当てることで、データの大きさを小さくします。ですから、
同じ色が続いたり、規則正しい色のパターンが多い画像については
圧縮率がかなり高くなります。しかし、写真のような複雑な画像では、
どうしても圧縮率が落ちてしまう傾向があります。

さて、問題のJPEGですが、この形式では複数の手法を組み合わせて
高圧縮率を達成しています。まず、表色系をRGBからYCbCrに変換します。
YCbCrは色を輝度（Y）と色合い、すなわち青の色差（Cb）と
赤の色差（Cr）で表現する方法です。人間の目には輝度の変化には
敏感だが色合いの変化には鈍感という特性があります。そこでJPEGでは、
次のサンプリングの段階で、色差の成分をカットしてしまいます。
ここでまず画質が劣化します（ここではカットしないようにすることも
可能ですが、PhotoEditorではそのあたりの設定は無理のようです。
前述の「Dibas32」では可能です）。

次にサンプリングしたデータを離散的コサイン変換（DCT）にかけた後、
画像の高周波成分（画像中の細かい図形や輪郭線に相当）をカットします（量子化）。
この段階で、再び画質が劣化してしまうのです。

ここで、サンプリング時の色差成分のカットの有無、量子化の度合いなどを
個別に設定することができれば、かなりのところまで画質を向上させつつ
ファイルサイズを押さえることが可能になります。

このへんの設定がPhotoEditorはたしかに弱いですね(^^;

＃だいぶはしょって説明しましたが、JPEGの仕組みなどについては
＃ウチのサイト内でも紹介していますので、興味がありましたら・・・
ちゃちゃ 2000/02/24(木) 23:44:03
たしか、人間の敏感な方は明度ではなく色彩の方な気が・・・

＞＃ウチのサイト内でも紹介していますので、興味がありましたら・・・
URLがふめい・・・(^^;
ＴＥＤ 2000/02/25(金) 00:26:11
（ちょっと話題はそれますが）
ちょっとでも試した事のある方ならご存知と思うのですが、ロゴや、セルアニメ風に塗ったCGイラスト、線画などは、僅かなにじみであっても致命的なくらいに目立ってしまいます。実用レベルまで落とせば正視できないものになってしまいます。おまけに圧縮率も悪いです。
「写真のような複雑な画像」の場合、あまりにじみは目立たないし、圧縮率も高くなります。
HIROPON [E-Mail] [HomePage] 2000/02/25(金) 00:38:34
ちゃちゃさん＞
> たしか、人間の敏感な方は明度ではなく色彩の方な気が・・・

いいえ、人間の目は輝度のほうに敏感です。

網膜上の視細胞には桿体細胞と錐体細胞の２種類があります。
錐体細胞は昼間視を主に司る細胞で、色の識別が可能です。
一方、桿体細胞は薄明視を司る細胞で、錐体細胞に比べて
ずっと感度が高いのですが、明暗しか判別できません。
これが、目が輝度に対して感度が高く、色彩に対して感度が
低い理由です。

URLは最初の書き込みのところに書いてあるハズですが・・・(^^;

# まずい、どんどん本題から外れていく・・・(￣▽￣;ゞ
笑み 2000/02/25(金) 01:35:04
> 一番手っ取り早いのはJPEGのかわりにPNGを使うことでしょう。
手っ取り早いのは、JPEGでは？
ネスケとＩＥで色調が変わるので、PNGは今のところお奨めできないと思いますが・・・

> たしか、人間の敏感な方は明度ではなく色彩の方な気が・・・
「色彩」って「色相」のこと？　「彩度」のこと？
「色相」も「彩度」も意味が違うので、紛らわしい表現はやめてくださいね。
ちゃちゃ 2000/02/25(金) 02:07:48
話題がずれるのでHIROPONさんの方へ書かせていただきました。

＞「色相」も「彩度」も意味が違うので、紛らわしい表現はやめてくださいね。
失礼しました！
正解は色相でした。

せっかくだから、自分の経験から・・・
GIF
　圧縮アルゴリズムから横に同じ色が並ぶ画像は圧縮率がよい
　(縦と横のグラデーションを同じ条件で圧縮すればわかる)

JPEG
　ボケている写真の方が圧縮率がいい(結果的？)
　よく使う手は、人物の眼や顔から周辺に行くほどボカすと効果的にも
　良いし、圧縮率も高い(ポートレートみたくなる)

PNG
　データなし(^^;
SWEETPOP [E-Mail] [HomePage] 2000/02/25(金) 18:29:55
[[解決]]
こんばんわ。質問者のSWEETPOPです。

昨晩質問したところ、たくさんのアドバイスを頂き、ありがとうございました。
そして専門的な解説まであって、すごく勉強になっちゃいました。
これで我が家のHPも、画像の質が良くなると思います。

アドバイス頂いた方でメールアドレスのない方もいたので、個別のお礼ができませんが、ここでお礼にかえさせていただきますね。

初めてこちらを利用しましたが、これからもお邪魔させていただきますね。
[上に] [前に] [次に]