Shino's Bar  あなたのホームページはなぜそんなに重いのか? 画像のデジタル処理を間違えてませんか? インターネットで忠実再現を夢見るのは大間違い。 シノバー・マスターが送る、 ホームページ作りのためのデジタル・カメラの使い方講座、続編。
GIF と JEP の決定的相違

ホームページ作りのためのデジカメ使いこなし術
(デジタル処理編)


Image
Nov. 30, 1997 - Jan. 14, 1998 M.Shino
1部 デジカメ撮影編
3部 HTML作法編(執筆中)へ 関連リンク

  1. 糸電話よりか細いインターネット
  2.  糸電話では音源は糸の振動に変換され、その先でもとの音に再変換される。 変換するもの、伝えるもの、再変換するものの3つが通信の要素である。 画像をインターネットで送るとき、最初はデジカメあるいはスキャナ、 最後はディスプレイであり、その性能が忠実度を左右するのはもちろんである。 間の通信路はデジタルだから心配ない?・・・ しかしその速度は画像にはまだまだ不十分だ。  あのシンプルな糸電話が、生き生きとした音を伝えるのには驚きを覚える。 それに比べインターネットは高度な技術を使っても、あるいはその複雑さゆえに、 人々の期待ほどには能力がないのだ。

  3. 午後11時のラッシュ
  4.  Yahoo! Japanの統計によるとダイアル回線の速度は28.8kbpsが主流で、 INSの 64kbpsはまだ普及途上である。 しかし INSに変えても期待どおりに速くならない。 インターネットはたくさんのコンピュータを中継してデータを届ける技術で、 電話回線はその最後のものである。 途中のコンピューターが込み合えばそこで速度の制限を受け、 これは午後11時からのテレホーダイ の時間帯になるといっきに遅くなることで経験できる。

  5. ファイルサイズは 10kB以下に!
  6.  28.8kbpsで計算すると毎秒 3kB程度がその速度となるが、 込み具合などでそれは変動する。とりあえず1秒1kBを目安にしよう。 そうすると 10kBでも 10秒かかるわけで、 ものの本に「 100kB以下を目安に」などとあるのはもってのほか。 1枚の画像を見るのに1分半も待てるだろうか? 安易に大きなファイルを流していないか? 通信の制限の中で画像を送るにはそれなりに努力が必要なのだ。

  7. ファイルを小さくするには
  8.  まずは元の画像サイズを小さくする。 もとから小さくなる上に高圧縮で画質が落ちても目立たないという二重の効果がある。 そして適切で高度な圧縮をすることである。

  9. 画像サイズを小さくする方法
  10. 部分で表現
    1. 画像処理ソフトで縮小する  なぜこういうことを言うかというと、 HTMLの IMG文でサイズを指定すると原画像はそのままで縮小表示できるが、 これだと通信路に乗るのは大きい画像なのでまったく意味がない。 原画像を縮小しなければならないのに、 ときにこの間違いをしている人がいる。
    2. 一部を切り取る  多くを取り込もうとせず、特徴ある部分で表現する。 これは撮影時からそのように思い切って接写する。
    3. 補間を使う  画像処理ソフトにより呼び方が異なるので困るが、 拡大・縮小のさいに境界にギジギザがでるのを中間色を使うことで目立たなくする手法である。 小さくてもそこそこ見える方法として、一部の例外を除きこれは使ったほうが良い。
    4. コントラストを上げる  画像を小さくする方法ではなく、小さくしても目立つ工夫である。 大きな画像と縮小したものではコントラストを変えるのも工夫のひとつ。 シャープ・フィルタでシャープネスを上げるのも方法。 シャープ・フィルタは必ず縮小してからかける。 (コントラストや色調補正は大きな画像で施してから最後に縮小をかける。)

  11. 圧縮の方法 −GIF と JEP の決定的相違
    1. JPEG 圧縮のカラクリ  35万画素、24bit-colorだと1画面 1MBの計算になる。 デジカメはこれを普通数十kBに圧縮してしまう。 どうすればこんなに小さくなるのだろうか? 実は JPEGという圧縮方法は目立たぬように画質を落としながら圧縮しているのである。 デジカメは老木の木目などカサカサした被写体は苦手で、 逆光の葉脈のような微妙なグラデーションを見せるのは得意だが、 これは圧縮の原理からくる性質である。
    2. JPEG でどこまで圧縮できるか?  Photo Shopという画像処理(レタッチ)ソフトでは JPEGで保存しようとすると 「低画質(高圧縮)」から「最高画質(低圧縮)」まで 4段階だが、 Paint ShopPicture PublisherGraphicConverterなどでは 0-100の数字で圧縮率が選択できる。 JPEGによる圧縮は無段階で、極端に言えばどこまでも小さくできる。 ただ確実に画質は低下するので、どこからそれが目立ってくるかによって限界ができる。
    3. GIF はなぜ圧縮率が悪い?  したがって JPEGでいったん圧縮したものは再び展開しても元の画像には戻らない。 ところが GIFで圧縮すると展開によって元の完全な姿が再現される。 GIFが JPEGと決定的に違うのは、元の情報を完全に保持しながら圧縮する点である。 これでは圧縮にも限界がある。高圧縮は JPEGだけに可能なものである。
    4. GIFを使うわけ  インターネットに載せるなら断然 JPEGである。 それでも JPEGが苦手とするものがある。それは文字や線が主体となる、 代表的には地図のようなものだ。このような図を JPEGで高圧縮すると 線の周りにテレビのゴーストのようなもの(ブロックノイズ)が出る。 GIFを使うのは地図やテキストを中心としたもの、 それと小さなアイコンである。 それ以外はともかく JPEGで決まり。
    5. 透過 JPEGはあるか?  GIFを使うもうひとつの理由は透過GIFが使えることにある。 JPEGでは原理的に言ってできない。 しかし JPEGでも背景色を同じにしておけば同じ効果が得られる。 背景に画像を入れているとそうはいかないが、同系色にしておけば目立たない。

  12. JPEGによる圧縮の実際
    1. JPEGは減色するな  JPEGでは減色してもちっともファイルは小さくならない。 JPEGは1677万色を表現できる。もしディスプレイが256色だったら、 受け取ったブラウザ側で減色してくれる。 このような場合は最初から減色しておいたほうが合理的? ところがJPEGでは減色すると逆にファイルは大きくなるから不思議。 フルカラーで処理を続け、最後に画像サイズを思い切り縮小し、 圧縮率を上げて保存する方法しかない。
    2. 高圧縮に適したソフトを  画像レタッチには高能力のPhoto Shopだが、JPEGの圧縮率は 4段階しか選べない。 Photo Shopでは迷わず「高圧縮」を選択しよう。これでも圧縮はまだ足りない。 これは印刷などを目的としているからである。 インターネットで忠実再現などを夢見る人はこのページ冒頭を読み直して欲しい。
       JPEGの圧縮率の高さを使うには圧縮率が選べるソフトが必要で、 たとえばすでに挙げたPaint ShopPicture Publisher、 MacではGraphicConverterなどで、 これらは比較的安価なので、ホームページを持つ人はぜひ準備していただきたい。
    3. 圧縮率はどのくらいが適当?  それではどれくらいの圧縮率がよいかというと、一律ではない。 サイズや絵柄によっても違う。 立派なシステムで注意深くみれば少しの圧縮でも画質の低下は見える。 どこまで辛抱できるかだ。受け手のシステムもいろいろあるのだから、多くを望まない。 思いっきり圧縮してみて、「見苦しくない程度」が確認できたらよしとしよう。

  13. GIFファイルのサイズ縮小
    1. GIFファイルは16色  いずれにせよGIFはmax256色だから減色はつきものだが、 そのmaxを使う必要はない。16色ならファイルサイズはほぼ半分になる。 2色というのもある。ただこれらを作れるソフトは少ない。 またまた登場するPaint Shopが数少ないそれ。 なぜ「16色」かというと、GIFを使うのは地図やテキストを中心としたものだから、 そんなものに256色は必要ない。 2色でもよいが、16色あると小さい字でも読めるようになる魔法が使える。
    2. 小さな地図でも
      2色だと 2色で表した地図 (1kB) あちこち画が消えているが、 16色で表した地図 (2kB) なんとか読めるようになる。 このからくりは16色のものを拡大すると
      16色で表した地図 (4倍拡大)

      となっていて、中間色で補間されていることが分かる。
       ただしこれは縮小のとき、 「リサンプリング」だとか「アンチエイリアス」だとかレタッチソフトにより呼び方が違うが 補間しながら画面縮小するよう指定しなければならない。 なお、この作業はフルカラーで行い、最後に減色する。 4色に減色できるソフトであれば、それでも充分だろう。
    3. GIFでグラデーションは使えない  減色のさい原画のグラデーションが近似色の境界線で見苦しくなる。 限られた色でこれを避けるのに印象派の点描のようなやりかた(ディザリング)がある。 しかしこれにより、ファイルサイズは大きくなります。 見苦しさを我慢してディザリングなしとするか、 いっそGIFではグラデーションは使えないと考えたほうが良いようです。 しからば JPEGで高圧縮すると文字などではノイズが目立つ。 だから文字にグラデーションを付けるのは禁物とあきらめましょう。

  14. デジタル処理の手順
  15. 処理には順序があって、この順番を間違えると質が低下する。
    1. トリミングで不要部分をカット。
    2. 後の処理のためフルカラーに増色。
    3. ガンマ補正で暗い部分を起こす。
    4. 色合い調整。目で見ていると分からなくなるので、ヒストグラムを見ながら。
    5. 必要によりソフト・フィルターやレタッチ。
    6. コントラスト調整。原則は最大が真っ白、最小が真っ黒になるように。小さい画像ではややオーバー目に。
    7. サイズ縮小。「リサンプリング」や「ディザリング」などの補間を使う。
    8. 必要によりシャープネス・フィルタを掛ける。
    9. JPEGでは圧縮率を指定し保存して出来上がり。
    10. GIFではここで16色などに減色して保存。
1部 デジカメ撮影編
2部 デジタル処理編トップ へ
3部 HTML作法編(執筆中)へ 関連リンク
このテーマについてもっとご存知の方、あるいはもっと知りたい方は アンケート・コーナー へお知らせ下さい。

マスターの部屋

Shino's Bar HomePageへ