●上の画像は見た目は同じような素材ですが、減色のやり方次第では、画像サイズが全然違ってきます。上の画像で一番重い画像は8503バイトです。一番軽い画像は4088バイトです。差が4415バイトになりました一番軽い画像をを2枚使っても327バイト余りが出ます。これは、何を意味するかわかりますか?
私達が何気なく使ってる画像、1ページあたり何も考えないで普通に使ったのと、ちょっと意識して手を加えて使ったのでは表示時間がかなり変わってきます。
あまり1ページあたり重い場合、次回貴方はこのホームページに来て見たいと思いますか?「あそこは表示時間が遅くって」と思うんじゃないかな?
画像の重さについては私自身は1ページ(全体)あたり出来るだけ軽く抑えるよう心がけています。一概に重いから駄目だという訳ではありません、写真とかグラフィクスなどのページはより綺麗により鮮明にと言うことであえて大きめにしてあるサイトがあります。それはそれで良いと私は思ってます。(見せる画像を扱っているんですからね、それを知ってて見に行くんですから当然ですよね)
画像はたくさん使いたい、文字だけのページじゃつまんないですよね。
上の画像で一番重いのは1番上で、一番軽い画像は1番下です。「お分かりになりますか?」見た目はそんなに差が無いとういより分からないですよね。
分かりにくいと言う事は、軽い画像を使った方が表示時間の節約ができ、また軽いページを作成する事ができます。
●画像の圧縮・減色
・JPGの場合圧縮の比率を10%くらいが良いみたいです。あまり圧縮率を大きくしてしまうと画像に乱れが生じ見映えが良くないみたいです。
・GIF画像の場合はいろいろ試して見る。ペイント系なんかですと結構色数を落とす事が出来ますが写真とかアンチエイリアス化した画像、またはグラデーションを多く使ってある画像などはかえってJPGの方がいい時もあります。(色の変化の激しい画像はGIFには向かない)
ちょっと面倒だけどある程度やってなれてくるとそんなに難しくないです。
ソフトに関しては現在自分の持っている画像処理系ソフトのマニュアルを参考にしてください。個人的にはPSPなんか良いみたい、またお手頃なところでOPTPIXなどもかなり良いそうです。
ペイントショップ6の場合の減色手順
ファイル(F)→開く(O)から減色をする画像を選択します。
カラー(C)→減色(D)→X(4/8ビット)(X)でダイアログを開き
色数(U)でパレットの色数を減らす。
※アンチエイリアス、画像と背景の境界を滑らかにして違和感のない画像にしてある
※GIFフォーマットはライセンスをきちんと取得してあるソフトを使いましょう。 |