Webイロハ
11. JPEGは画質とデータ量のバランスに注意！
JPEGは画像データを圧縮しますが、その圧縮率は画像の美しさとデータ量のかねあいで調整します。
圧縮率が高ければきれいになりますが、データ量も多くなり、いわゆる「重い」画像になります。逆に圧縮率が低ければ画質は劣りますが、データ量が少なくなり、いわゆる「軽い」画像になります。
調整の細かさは画像処理アプリケーションによりますが、たいていは50%前後で保存すればOK。
圧縮後の画像をプレビューできるアプリケーションもありますので、好みや用途によって圧縮率を微調整しましょう。
capture11-1 capture11-2 capture11-3
※画像をクリックして拡大してください。

JPEGの圧縮率とファイルサイズ。
左から　圧縮率100%-サイズ14KB、50%-5KB、10%-3KB。
【理由】 画質とデータ量は相反するため。
【注意】 写真集や商業画像でない限り、見ている人は案外画質については疎い。作った本人だけは、圧縮前の画像を知っているので、画質の劣化に敏感だということを忘れずに。
12. 高画質なJPEGを見せたいときには、サムネール！
「どうしても俺のポートレート集だけは高画質にしたい！」というのであれば、圧縮率を高めにすれば高画質になります。その反面データ量が増えるので、細い回線の人には見づらいデータになってしまいます。そんな画像が1ページに何点もあったら……。
そこで、高画質の画像を多く見せるには「サムネール方式」がお勧め。これは通常サイズの画像とは別に縮小したサイズのファイル（サムネール）を別途用意して一覧形式にし、その中から見たい画像を選んでもらうというもの。

　１） 通常サイズの画像をコピー
　２） 画像処理アプリで画像の画面サイズを縮める（Photoshopならイメージ→画像解像度）
　３） 別名で新しいファイルとしてJPEG保存。これがサムネール。
　４） １）〜３）を繰り返しサムネールを大量生産
　５） 一覧用のhtmlファイルを作り、サムネールを並べる
　６） 各々のサムネールに、通常サイズ画像へのリンクを貼る

見に来た人は、まず一覧ページでサムネールを見て、拡大したい画像を選びます。このときに「大きい画像を見よう！」と意識してクリックしているので、多少ファイルサイズが大きく表示に時間がかかっても待ってくれる可能性が高いです。
【理由】 見に来た人を待たせないため。一覧ページで画像を探しやすくするため。
【注意】 htmlで画像サイズを縮めても、参照ファイルは大きいまま表示だけを縮めているので意味がない。別途、小さい寸法・小さいファイルサイズのサムネールを作ることに意味がある。
13. GIFにするなら色数を少なく！
GIF画像は連続した色が続くイラストやタイトル、ロゴなどには最適ですが、最大で256色しか扱えないという制限があります。GIFに変換するときに画像処理アプリでは使っている色の数を減らす「減色」作業をしていますが、あまりに色数が多いと汚れた感じの画像に減色されてしまいます。
また使っているのが256色以下でも、可能な限り色数を減らすと、ファイルサイズが軽くなると言うメリットも。GIFに変換するときに色数とファイルサイズのバランスを調整して、軽くなるよう工夫してみましょう。
capture13-1 capture13-2 capture13-3
※画像をクリックして拡大してください。

色数とファイルサイズの違い。
左から　色数256色-サイズ23KB、64色-18KB、32色-14KB。
【理由】 画質を落とさずにGIFにするため。またはファイルサイズを減らすため。
【注意】 最終的にGIF形式となる画像を作るときには、はじめからあまりたくさんの色を使わないで画像を作成する。例えば、赤を使うときはなるべく同じ赤を使い回すようにして、全体の色数を増やさないようにすれば、きれいなGIFにすることができる。