 |
ソフトウェア > Lotus > Lotus Developer Domain >
Iris Today Archives
ノーツでのグラフィックの取り扱いテクニックについて
|
|
 |
by David DeJean
レベル：中級者
対 象：Designer R5
原文の掲載：2000年3月3日
Web の影響でノーツ・アプリケーションにおけるグラフィックの重要性はかつてよりも大ききなっています。ワールド・ワイド・ウェブがグラフィックの使用の拡大に一役買っています。かつてはノーツ・アプリケーションの見た目はデータベースのレポートのようでしたが、いまやカラフルな画像やデザインが施されて
Web サイトのようになっています。
しかし、ディスカッション・フォーラムの様子から判断すると、グラフィックはノーツの開発者の問題の種になっているようです。フォーラムでの発言はたいてい、「画像をノーツに貼り付けたが何かおかしい」というような内容から始まります。
上手な選択をしよう
グラフィックに関する問題が何であれ、その原因の多くはどのファイル形式を使うか、ノーツの文書にどうやって画像を取り込むか、画像を最適化するのにどのような方法を用いるかといった選択の問題です。
この記事で扱う選択の問題について以下に列挙します。
- 貼り付けか呼び出しか
- GIFかJPEGか
- ロータス・パレットか Web パレットか
- ディザリングか Web セーフか
- 画面かプリンターか
これらのうちいくつかの項目は個人の好みの問題です。お使いの画像編集ソフトや業務上の習慣に照らし合わせて1番の選択をすればよいでしょう。
それ以外の項目は正しいか誤りかという種類のものです。どちらでも選ぶことはできますが、片方は他方よりも好ましい結果になります。ある選択肢は納得できて、他の選択肢はがっかりする結果になります。
結果としてアプリケーションの設計者は新しい技術を習得する必要があります。幸いにも、Web
は問題を引き起こすだけでなく数多くの問題も解決してくれました。例えば、限られたファイル形式への標準化、カラー・パレットの標準化、画像編集ソフトの改善などです。
最も単純な選択は、どうやって画像をノーツのフォームや文書に取り込むかという一番最初の選択が結果の成否の分かれ道となります。ただ単に画像編集ソフトから画像をクリップボードにコピーし、それをノーツに貼り付けるというのは誤りです。
問題はクリップボードにあります。クリップボードにコピーする時点で、もともとのファイル形式は破棄され、その代わりに他のプラットフォームでは動作しない
Windows 独自の形式に変換してしまいます。そして、クリップボードからノーツに貼り付けられたときにノーツの画像形式に変換されます。
カラー・パレット
グラフィックに含まれる色のことです。色の数は画像形式の深度に依存します。例えば
GIF 形式は画像の各ピクセルを表現するのに８ビットコードを用い 256 色のカラー・パレット色を表現します。JPEG
形式では 24 ビットの深度を用いることで 1670 万色を表現できます。
ノーツの画像形式は 256 色のパレットに制限されています。画像により多くの色が使われていても
256 色の深度に減色されます。
しかし以下の例に示すように、それがひどい結果になることがあります。左側が元の画像で、JPEG
形式で保存されています。また含まれる色の数は 141,672 色です。それをノーツの文書に貼り付けます。そのときに
256 色に自動的に変換され右側の画像になります。驚くべきことに、赤色が十分に含まれておらず、これではグラフィックとして受け入れられません。
(背景の部分で起きていることに注意してください。減色の結果、黄色から緑そして灰色へという色のスムーズな変化が、単色のしみのようになっています)
解決策: 名前を指定してファイルを呼び出しましょう
Web の影響で画像ファイルの形式の選択肢はかなり単純化されました。最初のグラフィカルな
Web ブラウザーは GIF と JPEG の2つの形式をサポートしていました。結果として、それらの形式は世界の標準となりました。ノーツ
R5.0 は標準に合わせていますので、GIF や JPEG ファイルの型式で文書やアプリケーションに呼び出すようにしてください。こうすることで「何かおかしい」問題を避けることができます。
呼び出された GIF や JPEG の画像は「インライン」の型式でデータが格納されます。これはアプリケーションの中に格納されていることを意味し、添付ファイルのように別々のファイルとして保存されていないということです。表示する場合は、ファイルの形式も変更されることはなく元の
GIF や JPEG 型式で Web ブラウザーおよびノーツにデータが渡されます。ノーツで表示する場合は
Web ブラウザー同様のレンダリング (描画処理) がなされます。
GIF や JPEG ファイルを扱っている場合、それらをノーツに取り込む1番よい方法は呼び出すことです。メニューから〔作成〕-〔図形〕または、メニュー〔ファイル〕-〔呼び出し〕のどちらでも呼び出せます。どちらの場合でも呼び出したい画像のファイル形式を選択し、ファイル名を入力してください。
他の画像形式を使っている場合は、もう少し複雑な手順を踏まなければなりません。ノーツは以下に示されるファイル形式の画像を読み込むことができますが、それらをすべて同じように扱うわけではありません。例えば
BMP ファイルは 1670 万色をあつかえますが、他のプラットフォームでは正しく表示されないので
256 色のノーツ形式に変換されて保存されます。
世の中には数百もの画像ファイルの形式がありますが、ノーツで呼び出せるものはごくわずかです。さらにある形式の特定のバージョンしかサポートしていないこともあります。例えば
TIFF 5.0 はサポートしていますが、TIFF 4.2 はサポートしていません。
この種の問題の解決方法として、画像編集ソフトを用いて画像をノーツで呼び出せる形式に変換することです。つまり、画像を別の形式で保存します。また必要であれば画像の深度も変更します。(この記事の最後の節「リファレンスとリソース」で役に立つツールの紹介をします)
例外
GIF や JPEG ファイルの呼び出しには1つ欠点があります。R5.0 未満のノーツはノーツ形式しかインライン表示できません。そのため、古いバージョンのノーツ・クライアントでは
GIF や JPEG のインライン画像は無視して表示されません。
これが問題にならないようにアプリケーションを設計してください。(例えばメールの中の画像が表示されないとユーザーが苦情を訴えるというのは十分ありうることです）
以下にいくつか有効な解決策を挙げます。ここで重要なポイントとなるのは、どのようなクライアントでアプリケーションを利用しているかです。ノーツ
R5.0 で設計している場合、以下のような選択肢があります。
- クライアントがノーツ R5.0 の場合は何も頭を悩ませる必要はありません。できるだけ
GIF か JPEG の画像を使いましょう。それらを呼び出すことで最良の結果が得られます。
- ユーザーが Web ブラウザーを使っている場合も GIF や JPEG ファイルを呼び出してください。また、他の画像形式の場合は画像編集ソフトで
256 色に減色し GIF で保存してから呼び出してください。
- ユーザーが古いバージョンのノーツ・クライアントを使っている場合は、GIF や
JPEG ファイルを呼び出さないでください。クリップボードにコピーしてそれを貼り付けるという方法もありますが、がっかりするような結果になるでしょう。色が違った色に変化したり、好ましくないディザリングを少なくするために画像編集ソフトを用いて
256 色の深度に減色してから GIF として保存し、それを呼び出すようにしてください。
R5.0 での GIF と JPEG ファイルを呼び出すという選択が優れているというのは明らかです。1つのアプリケーションで
Web ブラウザーにもノーツ R5 のクライアントにも対応できます。もはやノーツ・ユーザーと
Web ユーザーとを分けてフォームを設計する必要はありません。また Web ブラウザーで
JPEG ファイルを添付ファイルのようにあつかう必要もありません。
GIF を使うか JPEG を使うかは用途に応じて決めます。ある種の画像は GIF の方がよいでしょうし、また別の種の画像は
JPEG の方がよいでしょう。大まかに述べると、写真のような画像の場合は JPEG
を用い、それ以外は GIF にすればよいでしょう。
JPEG
写真画像の圧縮に最適化された標準的な画像圧縮アルゴリズムです。JPEG は Joint
Photographic Experts Group の略で、この委員会が標準化しました。JPEG ファイルは1ピクセルあたり
24 ビットの色情報を持つことができ、1670 万色をあつかえます。しかし、JPEG
は損失のある形式で、圧縮の過程で一部のデータが失われて、画像の鮮明さが減少します。
GIF
Graphic Interchange Format の略で、1987 年に CompuServe で誕生した形式です。GIF
は 256 種類の色しか持つことができませんが、損失のない形式です。つまり、圧縮した画像を表示させても元の画像とまったく同じということです。現在の
GIF のバージョン (GIF89a) はアニメーションやインターレース表示もサポートしています。
GIF にするか JPEG にするか選択するときの大きなポイントはファイルの大きさと色が忠実に再現されるかということです。写真の場合、JPEGは両方の面において最良の選択肢です。JPEG
の圧縮方式はファイルをより小さくし、より多くの色を扱うことができます。
しかし、JPEG はロータス フリーランスや Microsoft PowerPoint で用いられるプレゼンテーション画像など、単色の大きな領域をもつ画像の場合、うまくいきません。画像を圧縮、伸長する過程でその領域が汚く見えたりぼやけて見えたりしてしまいます。左の
GIF 画像と右の JPEG 画像とを比較してください。
写真以外のすべての種類の画像では GIF 形式を用いたほうがファイル・サイズが小さくなります。これはノーツ・クライアントや
Web ブラウザーのユーザーにとって非常に重要なことですが、ファイル・サイズが小さいほどダウンロードが早くできます。GIF
で保存した場合と JPEG で保存した場合とでファイル・サイズが同じぐらいになったときはデータの伸長をする必要がない
GIF のほうが早く表示されるでしょう。
もう1つのヒント：
ロゴ、罫線、飾り活字などの装飾用の画像やテキストを画像として保存する場合は
GIF にしてください。GIF は透明色もサポートしており、ページの背景と画像とをうまく重ねあわせることができま。GIF
を用いるとたいていよい結果が得られます。いったん画像のパレットを設定して
GIF として保存すれば、色が変わることもありませんし、画像がぼやけることもありません。
ノーツの画像形式は GIF を改良したようなものです。(ノーツのグラフィック形式には標準化されたヘッダー情報がありません)
GIF ファイルのようにノーツ・ファイルは 256 色のパレットを持っています。しかし、GIF
ファイルはどのような 256 色でもよいのに対し、ノーツ・ファイルはすべてのノーツのプラットフォームで同じ結果が得られるようにパレットの色はあらかじめ決められています。
ワールド・ワイド・ウェブもノーツに追いついて、どのようなプラットフォームでも同じように表示できるように注意深くパレットの色が選択されました。
このパレット (一般に Web セーフ・パレットと呼ばれます) やロータス・パレットは実際は
256 色ではありません。ロータス・パレットは 226 色、Web セーフ・パレットは
216 色になります。
カラー・ルックアップ・テーブル
ロータス・パレットも Web セーフ・パレットも技術的には「パレット」ではなく正確にはカラー・ルックアップ・テーブルです。これは、画像データの各ピクセルの論理色番号を画面上に実際に表示される
RGB の三色にマッピングします。RGB の値は赤、緑、青の各要素について ０ から
255 の値をとります。そのために表現できる種類は 16,777,216 色になります。
RGB の三つ組は HTML で使われる 16 進数の三つ組とほぼ同じものです。HTML
で背景やリンクなどの色の指定には 16 進数の三つ組を用いています。各要素は０から
FF、つまり 256 種類の値をとります。黒は RGB で 0,0,0 となり、16 進法で表すと
00,00,00 になります。白は RGB で 255,255,255 となり 16 進法で表すと FF,FF,FF
となり、赤は同様 255,0,0 つまり、FF,00,00 となります。
それではなぜ Web セーフ・パレットは 216 色、ロータス・パレットは 226 色で
256 色ではないのでしょうか。これはどちらの開発者もすべてのプラットフォームではうまく表示されないと判断した色を排除した結果このようになりました。(Web
セーフ・パレットについて詳しい解説はこの記事の最後に紹介している Lynda.com
を参照してください)
これらの2つのパレットの違いはそれほど大きくはありません。下にそれぞれのパレットを示します。左側のロータス・パレットは、右側の
Web セーフ・パレットに比べて 10 色多く、グレー・スケールが豊富です。(これは実際の色の近似です、よく目を凝らしてみるとロータス・パレットの方は
JPEG ファイルの特徴のぼやけを確認できるでしょう。ロータス・パレットを他に表現する方法がこれしかなかったのでこのようになっています。一方、Web
セーフ・パレットの方は GIF 画像で表示しています。)
 |
|
 |
| ロータス・パレット |
|
Web セーフ・パレット |
| フルカラーJPG |
ロータス・パレット |
Webセーフ・パレット |
 |
 |
 |
 |
上の各欄にはノーツのカスタム・カラー・ピッカーの画像と写真の画像があります。カラー・ピッカー・ボックスはすべての色のスペクトルとグレー・スケールを表示させることができる便利な機能です。区切られた写真の画像から、フルカラーの画像をロータス・パレットや Web セーフ・パレットの形式に減色したときにどのようなことが起こるのかが分かります。
- JPEG ファイル
カラー・ピッカー・ボックスはすべてのスペクトルと灰色を表示しています。このお城の画像には
50,200 の色で構成されています。
- ロータス・パレット
ロータス・パレットを上のカラー・ピッカー・ボックスに適用すると、写真の画像の構成色は
72 種に減りました。カラー・パレットのスペクトルへのマッピングには興味深いものがあります。下部では急激なトーンの変化があるのに対し、明るい色や純色の部分では色の変化が細かいです。写真の画像では空や屋根や前景の瓦で減色の影響を確認できます。これらの領域では、徐々に色合いが変化していたところを単一の色で代用しているため、しみのようになっています。
- Web セーフ・パレット
カラー・ピッカー・ボックスに Web セーフ・パレットを適用すると色数は 92
色に減りました。これはロータス・パレットの場合よりもくすんだ色になっていますが、灰色は少なくなっています。写真画像の減色の影響はロータス・パレットの場合とほとんど変わりませんが、Web
セーフ・パレットには、宮殿の屋根や瓦の赤にマッチする色が多くありますが、空の青には対応する色があまりなく結果として空の色のめりはりがなくなっています。
カラー・パレットは画像編集ソフトで編集する画像にも適用されます。ロータス・パレットが利用可能なソフトには
Adobe Photoshop と Jasc Software の Paint Shop Pro (この記事の最後にリンクを載せています)
があります。カラー・パレットが適用されると、画像の各ピクセルはパレットの中で最もそれに近い色に変換されます。
実際のところ、パレットについて悩むことはないでしょう。パレットが重要だったのは
VGA がまだ貧弱で Windows の標準が 16 色だった昔のことです。ユーザーの多くが
Web ブラウザーやワークステーション上のノーツを利用しているなら 16 ビット・カラー
High Color)や 24 ビットカラー (True Color) を用いれば何も問題にならないでしょう。
ノーツ R5.0 では GIF や JPEG ファイルをそのまま利用できるので、画像を貼り付けるのはなく呼び出すことさえ忘れなければこの問題はもはや過去のものです。
ノーツ・クライアントはノーツとブラウザーとの色の互換性を保つための設定ができます。そのようにする場合は、メニューから〔ファイル〕-〔[プリファレンス〕-〔[ユーザー〕を選択し、〔Webパレットを使用する〕をクリックしてください。
Web セーフ・パレットが「Web セーフ」と呼ばれるのは、それらの色を広範なプラットフォームでディザリングせずにブラウザーで表示できるからです。ディザリングは減色のときと同じように不注意な設計者を驚かすことになります。
ディザリングとは、明るいトーンのピクセルと暗いトーンのピクセルとを織りまぜてその中間のトーンを得る手法です。これによりカラー・ルックアップ・テーブルにない色を表現できます。減色のときと同じようによい画像編集ソフトにはディザリングを調節する機能があるでしょう。Web
においても現在の画面の色の設定で表示できない色を HTML で指定するとディザリングが発生するでしょう。
ディザリングは2つの異なった色のピクセルを織りまぜることで近似の第3の色を作り出します。以下に
16 進数の値で示した4つの色をあらわす GIF ファイルを示します。上の2色は
Web セーフで、下の2色はディザリングされています。左下のピンクは ff8899
となっていますが、実際には ff6699 という少し暗い色と ff9999 という少し明るい色の2色のピクセルから構成されています。
色空間
1670 万色から 256 色への減色は RGB の各要素が 00,33,66,99,CC,FF の6つの値のどれかをとるようにすることで実現されています。256
色のカラー・ルックアップ・テーブルではそれらのどのような組み合わせ (例えば、ffcc99
など) でも「純色(基本色)」とし、その他の色はディザリングで表現します。
画像編集ソフトにはいくつかのディザリング方法があるでしょう。下の左の図のように一定のパターンでディザリングする方法と右側の図のようにランダムにディザリングする方法があります。色の標本表示のように単色の領域が多いときは一定のパターンのディザリングを用い、写真画像のような場合はランダムにディザリングをするとよいでしょう。
(ランダムなディザリングは実際には完全にランダムではなく、色の変換の過程で誤差拡散のアルゴリズムを用いた結果になっています。これはピクセルの実際の色とカラー・パレット中の最も近い色との誤差、つまり差を次のピクセルの値に加えてディザリングをします。この拡散の重みづけを調整することで、色の変化の度合いが変化させより好ましい結果が得られるようになります。)
ディザリングとファイル形式の変換
もしノーツがサポートしていないファイル形式の画像を変換するなら GIF 形式ということになるでしょう。
( 「GIF か JPEG か」 で述べたルールを思い出してください)これはディザリングは避けられないということですが、ここでまたポイントとなってくるのが、数ある方法の中から上手な選択をすることです。以下では画像編集ソフト
Paint Shop Pro を用いた例を示します。
JPEG ファイル 12.8KB
比較の基準として 7137 種の色を含む JPEG 画像を用います。差し込み図は違いを確認しやすくするために拡大表示したものです。 |
|
 |
|
GIF ファイル 4.4KB
Web セーフ・パレットを用いて 256 色の画像に変換すればディザリングを避けることができます。しかし、この例ではかなり好ましくない結果になっています。ファイルのサイズは小さくなっていますが、画像のパレットには
216 色の Web セーフの色が用意されていますが実際の使われている色数はたった
17 色しかありません。 |
 |
ディザリング画像 9.8KB
減色に誤差拡散のディザリング・アルゴリズムを用いた結果です。先程の例よりも良好な結果になっています。下部ではディザリングによって画質が粒状になっていることがはっきりと分かります。 |
 |
最適化されたパレット 12.6KB
ディザリングをする代わりにパレットを最適化するという手段もあります。パレットはその色が画像中に現れる頻度に基づいて最適化されます。
256 色すべてを用いると 17 色の場合と比べて画像のより広い範囲でトーンを維持できより良い結果になっています。しかしまだ背景の部分はしみのようになっています。 |
 |
パレットの最適化とディザリング 15.2KB
パレットの最適化と、誤差拡散のディザリングとの組み合わせはすべての中で最良の結果となります。しかし、ファイル・サイズは元の
JPEG 画像よりも大きく 15.2KB となり最悪の結果になっています。それでも TIFF
形式の場合は 34.7KB、Targa 形式の場合は 58.8KB になることを考えれば 15.2KB
というのはそれほど悪い結果ではありません。 |
 |
ディザリングの算術と奮闘しましょう
ページの背景やフレーム、テーブルのセルなどの Web ページの要素がディザリングされると不愉快な結果になることがよくあります。
通常、このような問題は異なるプラットフォーム間で発生するものです。例えば、選択した色が
1670 万色表示の PC の画面では完璧に見えるのにそれをマッキントッシュで見ると違ったものに見えるということがあります。
また 256 色の環境のユーザーに 1670 万色向けのデザインを提供するなど、色の深度が異なるというのもよくあることです。
(しかしこのようなことはかつてほどは起こらなくなっています)
どちらにせよ解決方法は簡単です。Web セーフ・パレットから色を選択すればよいのです。赤、緑、青の各要素について
00,33,66,99、CC,FF の6つの 16 進数の値をそれぞれ順に組み合わせます。大きな値ほど明るい色になり、小さいほど暗い色になります。例えば
FF0000 は明るい赤、660000 は暗い赤になり 0000FF は明るい青、CCCCFF は非常に明るい青になります。
視覚的に表現するのは難しいのですが、色を 16 進数で表すときに3次元の論理というものがあります。これは
L.ウェイマンのカラー・キューブに近いものです。もしもっと色について興味がありましたら
New Riders プレスから出版されている「Coloring Web Graphics 2」という彼女の本を読んでみてください。ただ単に色を選択するためのカラー・チャートを見たいだけならD.ヤコブソンの「RGB
Hex Triplet Color Chart」が便利でしょう。その他のチャートはこの記事の最後に参照先を載せています。
ノーツの文書を印刷するとびっくりすることになるでしょう。文字や画像が予期しない位置になったり予期しない大きさになったりするでしょう。もし印刷することを想定しているアプリケーションを開発しているなら画面表示向けかプリンター向けに作るのかを決めなければなりません。
たいていの問題は、画面とプリンターの解像度の違いか画像のスケールの扱いから生じます。
画像のリサイズ(拡大/縮小)方法には2通りあります。1つには画像編集ソフトで画像をサンプリングし直して新しいサイズにするというものです。例えば 350×225 ピクセルの画像を50％にすると
175×113 ピクセルの画像になります。もちろんファイル・サイズも小さくなります。縦横それぞれが半分になったので元の画像の
25％のピクセルしかないということになります。
2つ目としてノーツで〔図形のプロパティ〕の〔スケール〕の設定を変えることで画像のリサイズができます。350×225
ピクセルの画像を 50％にして 175×113 ピクセルで表示できますが、ファイルのサイズは変わりません。そのファイルには
350×225 ピクセル分のデータが含まれており表示するときだけ小さなサイズにしているだけだからです。
| 以下では6つのデータ・フィールドと2つの 350×225 ピクセルの画像を含むノーツのフォームを例として用います。上側の画像は画像編集ソフトで
175×113 ピクセルにリサイズして呼び出したものです。下側の画像はプロパティ・ボックスでスケールを50％に指定したものです。画面上では2つとも同じに見えます。 |
|
 |
|
この文書を印刷すると何が起こるでしょうか。もはや2つの画像は同じ大きさではなくなってしまいます。つまり、プリンターにはピクセルの数と画面上の物理的なサイズについて同じ関係があることが分からないのです。実際にはプリンターの解像度の
360dpi で画像をディザリングします。これは2つのファイルのデータ量が異なるためですが、プリンターはその違いを小さく見せようとします。
これは、プリンターが画像のピクセルの数と画面上の物理的なサイズとの相関関係が分からないのです。プリンターは自分の能力である
360dpi の解像度で画像データをディザリングしているだけです。もちろん、プリンター自身はデータ・サイズの差による印刷サイズの違いを吸収しようとはしていますが、両者のデータ量が大きく異なるとどうしても出力される大きさが双方で大きく異なる結果となります。
|
|
| 印刷の解像度と画像サイズを変えてみましょう。プリンターの解像度を 1440dpi
に上げてプリンターの補間アルゴリズムも変えると2つの画像の差はさらに小さくなり、よりよい結果になっています。しかし、プリンターが出力の品質を最適化するときに、行間や文字のフォントも変わっています。(
Large の小文字の g を注意して見てください) |
 |
もう1つ必要に応じてどこでも使える設定があります。ノーツの〔印刷〕ダイアログで、画面上のサイズに関係なく〔図形を原寸大にする〕という設定があります。これを用いた結果を示します。
 |
|
 |
|
アプリケーションがノーツ・クライアントと Web ブラウザーの両方で使われることを考えると非常に複雑になります。以上に挙げたノーツのリサイズの問題はブラウザーでは起こらないことです。しかし、文字フォントと行間に関しては、単にノーツとブラウザーの間で表示が異なるだけにとどまらず、各ブラウザー毎にそれぞれ表示が異なるという問題があります。
画像を印刷するときの一番よい方法は画像の相対的な関係を維持することです。画像のスケールをすべて同じにするか、すべての画像を画像編集ソフトでリサイズしノーツ文書の中では何も変更を加えないようにしてください。
画像を原寸大で表示するというのが一番よい選択肢でしょう。それにはいくつかの利点があります。画像を縮小表示するとプラットフォームによっては色やコントラストが変わることがあります。また、原寸大の画像は必要以上のファイル・サイズにならず、ダウンロードも早くなります。
グラフィックの普及はノーツのアプリケーションに1つの大きな影響を及ぼしました。特にユーザーが
Web からアクセスするときにダウンロードに非常に時間がかかるようになりました。あなたがノーツの設計者ならアプリケーションの配送スピードについて気にもとめないかもしれませんが、ユーザーは非常に気にします。なるべくファイル・サイズが小さくなるように努力してください。きっとユーザーのためになるでしょう。
画像にはより多くのデータが含まれておりテキスト・ファイルよりも余計にダウンロードに時間がかかります。HTML
ファイルにはすべてのテキストと整形用のタグが含まれていて、例えばこの記事の場合およそ
35KB になります。40 かそれ以上の数の画像のサイズの合計は 500KB 以上にもなります。ダイヤルアップでアプリケーションにアクセスしているユーザーにとって画像は非常に大きなデータになります。
画像のダウンロード時間を減らしてユーザーの負担を軽減するための方法がいくつかあります。よりよいアイデアについては
「ロータス ノーツ/ドミノ R5 ベスト・プラクティス・ガイド」を参照してください。
減色することでファイルを小さくする
色の深度を 256 色よりも小さくしてみてください。例として以下のグレー・スケールの画像を見てみましょう。この古代ローマの胸像の画像は
16 色の灰色で、元の画像の背景が複雑な変化をしているのに対し下の例では単一の色に置き換えてみました。結果として元の
JPEG ファイルの 12.8KB から 2.9KB にまで小さくなりました。
もしこれで本気になったなら良いツールに投資しましょう。Adobe Photoshop は他の画像編集ソフトに比べてより多くの色の深度を調節する機能があります。また、Debabelizer
Pro や WebVise Totality を使えば減色やその他の加工を施すなど画像を最適化する処理を自動化できます。（この記事の最後に参照を載せておきます）
Web 画像のロードが早くなるようにしましょう
画像が完全に表示されるまでユーザーを待たせることはユーザーに心理的影響を及ぼします。GIF
でも JPEG でも最初は画像が粗く表示されデータをロードしていくうちに徐々に細かい画像になっていくように設定することができます。これを
GIF ではインターレース表示と呼び JPEG ではプログレッシブ表示と呼びます。これは画像編集ソフトで画像を保存するときに指定できます。これでダウンロードが早くなるわけではありませんが画像が完全に読み込まれるまでもなくユーザーは必要な情報を得ることができ、次の行動に移ることができます。
画像をイメージ・リソースとして格納しましょう
イメージ・リソースという新しい機能が R5.0 にはあります。これはいったん画像をアプリケーションに取り込むとアプリケーション内の複数の箇所から参照できるというものです。これにより個々のフォームや文書のダウンロード時間が減少するわけではありません。しかし、例えばアプリケーションにある6つのフォームがあり、それぞれに同じ画像を個別に持つ場合に比べて、イメージ・リソースを使った場合は、あらかじめイメージ・リソースとして格納された画像へのポインタを各フォーム持つだけですので、アプリケーション全体のサイズは劇的に小さくなります。
GIF や JPEG のサポートやイメージ・リソースの機能、「Web パレットを使用する」というオプションに代表される、ノーツ
R5.0 における画像の取り扱い機能の向上により、ノーツ・アプリケーションや
Web でより質の高い仕事をより簡単に実現できるようになりました。
これらの機能を使う最初のステップは、使いようによっては質の高い結果を得られたりとんでもないことになったりするということを理解することです。醜い色に変わってしまったり画質が粒状になる原因を理解していれば、問題が起きたときに自力で修正できるでしょう。
次のステップは知識を応用する段階に入ります。画像編集ソフトを使って色の深度やディザリングや
Web セーフ・パレットとの親和性の調整の仕方を知っていれば問題を避けてアプリケーションの画像の質を高めることができるでしょう。
画像編集ソフトとユーティリティー
- Adobe Photoshop
地球上で最も強力なアプリケーションです。プラグインを用いるとさらに強力になりますが、操作を覚えるのが難しいです。
- Jasc Software Paint Shop Pro
あなたがデジタル界のピカソではなく、単に柔軟で使いやすいソフトを求めているならピッタリでしょう。
- LView Pro
このイメージ・プロセッサーはグラフィカルなインターフェースが最小限にとどめられています。画像ファイルの形式の変換や色の補正などの機能を備えています。
- Debabelizer
数百のファイルに対し自動的にファイル形式の変換、圧縮、パレットの変換などをしてくれます。画像を多用する巨大なサイトの構築に便利でしょう。
- Auto FX WebVise Totality
先進的な画像編集のツールキットです。GIF、JPEG圧縮エンジン、Photoshopアニメーション・モジュール、デジタル透かしやWebでWebセーフでない色を作り出すためにディザリング・エンジンなどが含まれています。
ウェブサイト
- RGB Hex Triplet Color Chart Web
セーフ・パレットの最もよい図表が載っています。これは D.ヤコブソンによって提供されており、簡潔かつ分かりやすい内容です。
- Web Design Studio's Color Chart
上記のカラー・チャートほど分かりやすくありませんが、サンプルも多く RGB
の数値も載っています。
- Lynda.com
L.ウェイマンのサイトです。Web グラフィックの権威で「Coloring Web Graphics.2」など多数の著書があります。
- ColorMaker
JavaScript を用いて選択したテキスト、リンク、背景の色の組み合わせを実際に確認できます。
- Photoshop Web Reference 4
Photoshop を使うことを決めたならこのようなページは有用でしょう。
- PixelFoundry.com のグラフィック・サイトへのリンクの一覧
グラフィック・デザインの素材を探すときのスタート地点です。
- The Lotus color palettes
Photoshop や Paint Shop Pro 用のロータス・パレットを http://www.ibm.com/software/lotus/ の Support Downloads の中から見つけられるでしょう。
|
|
|
|
