モノクロ画像は軽い？

Question

自分のwebサイトに大きな画像を鮮明に載せたいのですが、重いデータではアクセスする方に迷惑でしょう。色を減らせばパッと開いてしかも鮮明に見せられますか。データを軽くしても解像度は落としたくないのです。

Naka · Accepted Answer

◆Naka◆
どのくらい軽くなるか、というのは、元の画像のカラー情報によりますから一概には言えませんが、まあ一般的なカラフルな画像をモノクロ（と言うかグレースケールですね？）に変換すると、jpegで約半分ぐらいのサイズになります。
カラー情報の少ない元画像を使用すれば、グレースケールに変換しても、あまりファイルサイズは稼げません。

ARC · Answer

どの程度軽くなるかは、実際に原色等してみて、エクスプローラでそのファイルのサイズを見てみればいいでしょう。

減色が効果的な画像は、色相が統一されている画像です。
例えば、全体的に青系統で構成されている絵であれば、256色、場合によっては64色程度に減色すれば、結構サイズを縮めることが出来ます。

逆に、モノトーン調であっても多くの色が使われてるような画像は、減色するといろいろとアラが出てくる場合がありますね。
こんな時はJPEGにして、圧縮率を少し上げてやるといいでしょう。

色相、色彩ともにメリハリのある絵の場合は、軽量化はちょっと困難です。
一番効果がありそうなのは、画像のスライシングでしょうか。
画像をいくつかのパーツに分割して、パーツごとに最も適した方法で軽量化を施します。
そして、HTML上で、元と同じように配置する、というわけです。
スライシングした場合、通信回線も効率的に利用できますので、軽量化の高価は更に上がります。


あと、JPEGファイルの場合には、圧縮アルゴリズムの関係で、コントラストを下げれば軽くなる、という特性があります。
手元の実験では、コントラストを１０％下げると、サイズが５～７％減少しました。

あと、(蛇足になるかな) このように大きい画像を使う時は、サムネイルを用意するといいです。
あまり、画像自体に興味のない人にはサムネイルを見てもらって、興味のある人にだけ大きい画像を見せるっていうふうにしたほうが、閲覧者の観点からすれば、軽い、ってことになるかと思います。

reis · Answer

使う画像が御自分で描かれたイラスト等なら、色数を
落とす方法では満足出来ないと思います。
グレースケールや２階調にするのは、一般的に軽くは
なりますが、やはり画像の鮮明さは犠牲になります。
逆に色ではなく、jpgで質を落としてしまうほうが
綺麗な場合もあるので、画像によって使い分けるほうが
確実です。
乱暴な話ですが、「解像度」を大切にしていても
ブラウザ自身の解像度というものがあるので思い通りには
なりません。

それでも最高画質のままでアップするのであれば、
最初に軽い画像を出しておいて重い画像にチェンジする
とか（JavaScriptで可能）、出し方を工夫したほうが
良いのでは？
他には、１枚の画像としてではなく、数枚に切断して
並べて表示することも可能ですよ。

どちらにしろ、重い画像を「パッ」と表示というのは
画像を表示するサイトの悩みどころなので、残念ながら
思考錯誤してぎりぎり譲歩出来るところを探すしか
ありません。
がんばって下さいませ！！

joy-m · Answer

書き忘れましたが、鮮明という点において色数とは反比例しますので、色数を少なくすると鮮明さも失われてしまいます。双方において妥協できる色数や圧縮率を探さなくてはならないと思います。
カラーよりモノクロの方が軽いというのは、一般的にそう考えて間違いないと思います。

joy-m · Answer

色数とデータ量は関係があり、おっしゃる通り色数が少ないほど軽くなります。

モノクロ画像は軽い？

◆Naka◆

どの程度軽くなるかは、実際に原色等してみて、エクスプローラでそのファイルのサイズを見てみればいいでしょう。

使う画像が御自分で描かれたイラスト等なら、色数を

書き忘れましたが、鮮明という点において色数とは反比例しますので、色数を少なくすると鮮明さも失われてしまいます。

色数とデータ量は関係があり、おっしゃる通り色数が少ないほど軽くなります。

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング