ポール・アンダーソン
ウェブサイトに関わる仕事をしていると、遅かれ早かれグラフィックを扱わなければなりません。残念ながら、グラフィックを扱うことになる人全員がプロのデザイナーというわけではありませんし、経験豊富なウェブデザイナーでさえ、グラフィックが特定の方法で制作されなければならないことを必ずしも理解しているわけではありません。ウェブ上では、コンピュータ関連のあらゆるものと同様に、グラフィックを正しく作成する方法よりも、間違って作成する方法の方が多いのです。
グラフィックス入門では、チャンネルと色深度、ディザリングとガンマ補正、ベクターグラフィックスと画像形式など、画像とファイル形式の基本概念を学習します。しかし、Webグラフィックス作成はこれですべてではありません。学んだ知識を実際に活用することも重要です。そこで、画像を扱う最も一般的な6つのタスクについて、実践的なハウツーガイドを作成しました。画像の拡大縮小、透明度の追加、色の削減から、スクリーンショットの撮影、GIF画像の修正、JPEGの再保存まで、あらゆる手順をステップバイステップで解説します。
このチュートリアルを終える頃には、Web画像を自信を持って操作できるようになり、よくあるミスを回避し、サイトを可能な限り美しく仕上げることができるはずです。経験豊富なWebデザイナーの方でも、デザインの妨げとなっていた悩みの解決策を見つけられるはずです。基本はここで解説します。あとはご自身でご判断ください。
編集者注
これらの操作のほとんどは、適切なビットマップエディタへのアクセスが必要です。エディタの機能については、すべて同じ機能を備えているため、ここでは一般的な説明をしています。具体的な説明については、プロのデザイナーの間でほぼ普遍的に使用されているPhotoshopと、人気が高く手頃な価格のPaint Shop Proを例に挙げています。GIFファイルやJPEGファイルの操作や作成が必要な場合は、Download.comの画像編集に関する記事をご覧ください。
チャンネルと空間
コンピューター画像は、画面上の色付きピクセルの集合に過ぎません。しかし、コンピューターの2進言語では、赤や紫といったラベルは意味を持ちません。では、コンピューターはどのようにして色を識別するのでしょうか?答えは、あらゆる視覚ハードウェアやソフトウェアが、色を数値的に表現するためのモデル である色空間を使用しているということです。
最もよく目にする色空間はRGBです。これは、カラーモニターの仕組みに由来しています。モニターは、赤、緑、青の光を様々な強度で画面に投影します。そのため、RGBという用語が使われています。これにより、あらゆる色相と色調が再現されます。RGBは、すべての色を「チャンネル」と呼ばれる3つの数値で識別します。チャンネルは、赤、緑、青の強度を0(暗)から255(最大強度)までの数値で指定します。
これらのチャンネルを組み合わせて、絵の具を混ぜるのと同じように新しい色を作ることができます(図A)。赤と緑の光を混ぜると黄色、緑と青を混ぜるとシアン、青と赤を混ぜると紫になります。異なる値を組み合わせると、中間の増分色が作成されます(例えば、オレンジは赤に少し緑が混ざった色です)。
図A |
![]() |
上記のような色の組み合わせは、純粋で明るい色相を生み出します。3つのチャンネルすべてに同じ値を使用すると、黒(すべてのチャンネルが0)から白(すべてのチャンネルが255)までの中間色が生成されます。つまり、RGB値が等しくなるにつれて色は中和されます。すべてのチャンネルを一度に増やすと白が追加され、淡い色合いになります。最も強い色を減らすと黒が追加され、暗い色合いになります。両方の値、つまりすべての値を0より大きく255未満に設定すると、グレーが追加され、落ち着いた色調になります。図Bは、いくつかの可能性を示しています。
図B |
![]() |
RGB での作業に慣れてくると、特定の色に必要な値を直感的に理解できるようになります。
その他のカラースペース:
ほとんどのグラフィックツールでは、HSB(色相・彩度・明度)を使用できます。これは、絵の具を混ぜる比喩をより直接的に表現したものです。色相は360度のカラーホイール上の位置で、赤は0、緑は120、青は240です。彩度と明度はどちらもパーセンテージで表され、両方が100%のとき純粋な色相となります。彩度を0に近づけると白が追加され、明度を下げると黒が追加されます。CMYKは、紙上で色を表現するために必要なシアン、マゼンタ、イエロー、ブラックの顔料の量によって色を定義します。CMYKは高品質の印刷物に使用され、ほとんどのモニターでは表示できないほど正確に色を表現できます。
RGBの色深度は、
各チャンネルを0から255の範囲で表します。これは、8ビットのデータから得られる範囲であり、8ビットで1バイトとなるためです。色を表現するために使用されるデータ量を色深度と呼びます。
グラフィックを扱う際には、色深度が2つの点で重要です。1つはモニターの色深度、もう1つは画像を保存するために使用するファイルの色深度です。モニターの色深度は、ディスプレイハードウェアがサポートする容量とソフトウェアドライバーの設定によって異なります。通常、オペレーティングシステムには、ディスプレイの色深度を設定するためのコントロールパネルが用意されています。ファイルの色深度は、グラフィックを保存するために使用するファイル形式によって異なります。
トゥルーカラー
一般的なRGBは8ビットチャンネルを3つ使用するため、合計24ビットの色深度となります。フル24ビットカラーが利用可能な場合、トゥルーカラーと呼ばれます。トゥルーカラーモニターは、すべてのピクセルの色を正確に表示します。モニター設定では、このオプションは「数百万色」と表示されることがよくあります。これは、トゥルーカラーでは16,777,216通りのRGBの組み合わせが使用されるためです。同様に、トゥルーカラー画像ファイルは、すべての色域を正確に記録します。
High Color
True Color では、人間の目が識別できる以上の色調を表現できるため、ほとんどのオペレーティング システムでは 16 ビット High Color (Macintosh では Thousands of Colors) のオプションが提供されています。High Color では、モニターに表示される色は、赤が 32 段階、青が 32 段階、緑が 64 段階のみです。見た目の違いはほとんどわかりませんが、色深度を 1 ピクセルあたり 16 ビットに下げると、ビデオ パフォーマンスが向上します。また、コンピューター システムを High Color で実行しても、画像データには影響しません。Photoshop や Web ブラウザーなど、ほとんどのアプリケーションでは、依然として完全な 24 ビット値が使用されます。データは、モニターに表示されるときにのみ切り捨てられます。そのため、High Color の画像ファイル形式は存在しません。
インデックス カラー
旧式で性能の低いコンピュータ ハードウェアや特定のファイル形式では、1 ピクセルあたり 8 ビットしか処理できません。8 ビットでは 3 つのチャネルに対して多くの情報を保持できないため、図 Cに示すように、8 ビット環境ではインデックス カラーが使用されます。インデックス カラー画像では、システムまたは画像ファイルが最大 256 色のカラー テーブル (パレット) を維持します。各ピクセルの 8 ビット値によって、使用する色が指定されます。これは、コンピュータにおける数字で色を塗ることに相当します。インデックス カラーを使用すると、パレットの色自体が 24 ビットの深さであるため、8 ビットのディスプレイと画像でトゥルー カラーをシミュレートできます。
図C |
![]() |
インデックスカラー画像ファイルには、使用する色のためのパレットが含まれており、8ビットディスプレイには表示可能な色のためのパレットがあります。通常、インデックスカラーで動作するシステムでは、アプリケーションごとに個別のパレットが使用可能です。そのため、アプリケーションの起動、切り替え、または終了によって、画面に表示される色が一時的に変化することがあります。
ディザリングとアンチエイリアシング
グラフィックを作成または表示するアプリケーションは、多くの場合、実行するハードウェアの限界に達します。画像には、モニターが表示できる色数よりも多くの色が含まれていたり、ピクセルではレンダリングできないほど細かいディテールが含まれていたりすることがあります。そこで、ディザリングとアンチエイリアシングが役立ちます。
ディザリング:
256色に制限されたモニターや画像ファイルは、利用可能な色相をピクセルの拡散パターンでディザリングすることで、より多くの色があるように見せかけ、目的の色に近づけることができます。ディザリングは、8ビットモニターで動作するオペレーティングシステムやWebブラウザなどの表示アプリケーションで使用されます。画像エディタは、ディザリングを使用してトゥルーカラー画像をインデックスカラーに変換します。状況によっては見栄えが悪くなる可能性があるため、ほとんどの画像エディタではディザリングがオプションとして用意されています。ディザリングの代替として、パレット上で最も近い色を使用するカラー置換があります。図Dは両方のオプションを示しています。
図D |
![]() |
アンチエイリアシング
色深度に関わらず、すべてのコンピューターとプリンターはピクセルをグリッド状にレンダリングします。そのため、グリッド状でない画像では問題が発生します。ピクセル間の厳密な分割はエイリアスと呼ばれ、一部のアプリケーションではアンチエイリアシングを使用して画像を滑らかにします。図Eの右側の画像がその例です。アンチエイリアシングは、色と色の境界部分を補間することで、水平または垂直ではない滑らかな境界線の印象を与えます。
図E |
![]() |
アンチエイリアス処理された文字は、ピクセル化されたエイリアス処理された文字よりも滑らかで読みやすく、一般的にブロック状の凹凸が少なく、よりプロフェッショナルな印象を与えます。画像エディタでは、ほとんどの操作でアンチエイリアスオプションが提供されています。ただし、アンチエイリアス処理された画像は、補間領域を作成するために多くの色数が必要になる傾向があることにご注意ください。
カラーマッチングとガンマ補正
RGBカラーモデルの問題点の一つは、その時点で使用されているハードウェアを基準に色を計測することです。デザイナーやそのクライアントの間でよくある不満は、あるプラットフォームで作成したグラフィックが別のプラットフォームでは同じように表示されないことです。例えば、PCではきれいに見える画像が、Macintoshでは青白く見えたり、色褪せたりすることがあります。
問題は、すべてのモニターが同じではないということです。これは環境光や明るさの調整以上の深い問題です。RGB値と画面に表示される実際の色の関係は、ほとんど直線的ではありません。例えば、赤チャンネルを200に設定すると、理論上は赤チャンネルを100に設定する場合の2倍の明るさになるはずですが、実際にはそうではありません。また、ガンマと呼ばれる実際の関係はコンピューターごとに異なるため、2台のコンピューターで1つの色が一致したとしても、他のほとんどの色は一致しません。
図 Fの画像は、ガンマ値が異なる 2 つのシステムの効果をシミュレートしています。
図F |
![]() |
カラーマネジメントは多くのコンピュータ周辺機器で問題となっています。デジタルカメラ、スキャナ、プリンタを通して色をそのまま再現するには、内蔵のカラーマッチング機能(MacintoshのColorSyncなど)やサードパーティ製品(Pantone Matching Systemなど)が必要です。しかし、画像をWebに公開すれば、あとはユーザーのモニターだけを気にすれば済みます。そこで役立つのがガンマ補正です。画像に意図したガンマ値を含めることで、個々のユーザーのレンダリングソフトウェアで、モニターのカラーカーブに合わせてガンマ補正を行えます。
残念ながら、一般的な画像形式はガンマ補正をサポートしていません。Webではガンマ補正がほとんど使われていませんが、衣料品、化粧品、塗料などの商品を販売したいオンライン企業にとって、正確な色彩表現は重要です。そして、これがガンマ値を含むPortable Network Graphics(PNG)形式の誕生のきっかけの一つとなりました。ワールド・ワイド・ウェブ・コンソーシアム(W3C)は1996年にPNGの最終仕様を公開しましたが、WebブラウザやグラフィックアプリケーションがPNGをサポートし始めたのはごく最近のことです。
ラスター vs. ベクター
いいえ、これは古代ギリシャの家族の悲劇ではありません。画像ファイルを直接操作する場合、画像データがどのように記録されているかによって、変更できるオプションが決まります。
コンピュータのモニター上では、画像は様々な色のピクセルで表現されます。特定の画像ファイル形式では、画像を表示するためのピクセル単位で記録します。これらはラスター画像であり、ビットマップエディタでピクセルを直接変更することによってのみ編集できます。PhotoshopとPaint Shop Proは、最も人気のあるビットマップエディタです。
ベクター画像ファイルは、画像を幾何学的形状で記述的に記録します。これらの形状はビットマップに変換され、モニターに表示されます。ベクター画像は、構成要素を個別に移動、サイズ変更、回転、削除できるため、変更が容易です。PostScriptは印刷用のベクター形式として広く使用されていますが、Web上では今のところMacromediaのFlashが標準的なベクター形式に最も近いものです。Macromediaは、Flashを業界標準にすることを目指し、1998年4月にFlashファイル形式を公開し、コンテンツ開発者やツール開発者が自由に利用できるようにしました。W3CはXMLベースのScalable Vector Graphics(SVG)形式を開発していますが、ブラウザはまだ広くサポートしていません。
この違いは、例えばクライアントや同僚から画像のテキストの変更を依頼された際に、特に顕著になります。画像はラスター形式の画像ファイルに保存されている可能性が高いため、変更は彼らが考えるほど簡単ではありません。個々のピクセル自体を変更することで、テキストを変更する必要があります。後で修正が必要になる可能性のある画像を作成する場合は、この点に留意してください。最新のグラフィックツールでは、Web用にラスター形式の画像をエクスポートできるだけでなく、後で編集できるように、よりコンポーネント化された独自の形式で保存することもできます。
実際の画像形式とWeb画像形式の違い
コンピュータに保存されているものやインターネット経由で送信されるものはすべて、特定の形式になっています。画像も例外ではなく、現在では多種多様な画像形式が使用されています。画像形式の選択は、将来的に画像を編集する予定があるかどうか、Web経由でダウンロードする際にできるだけサイズを小さくしたいかどうか、どのような画像編集ツールを利用できるかなど、さまざまな要因に基づいて行われます。
画像のコピーを保存したり、さらに編集するために保管したりする場合は、画像の細部を一切失うことなく正確に記録できる形式を選ぶ必要があります。これらは通常、True Image形式と呼ばれます。元の画像をTrue Image形式で保存しておけば、後で画質を損なうことなく再編集できます。
ただし、真の画像形式はファイルサイズが大きくなる傾向があるため、インターネット経由での送信には適していません。Web用画像の場合は、ファイルサイズが可能な限り小さくなる形式を選ぶ必要があります。現在最も一般的なのは、Graphics Interchange Format(GIF)とJoint Photographic Experts Group(JPEG)の2つです。重要なのは、これらの形式はどちらも圧縮のために画像の品質を低下させるため、後で修正する可能性のあるオリジナルのアートワークの保存には使用すべきではないということです(ただし、256色以下の画像はGIFとして安全に保存できます)。ほとんどの画像エディタには、「名前を付けて保存」または「エクスポート」コマンドが用意されており、元の画像は真の画像形式で保存しながら、Webに投稿するためのGIFまたはJPEGバージョンを安全に作成できます。
True Image形式は、
将来の編集に備えて画像を正確に保存します。既存のTrue Image形式は数十種類、場合によっては数百種類存在しており、適切な形式を選ぶには、使用する編集ツールや、異なるツールセットを使用する可能性のある他のユーザーとファイルを共有する必要があるかどうかが重要です。
主要なコンピュータオペレーティングシステムはすべて、独自のネイティブ画像フォーマットを備えています。特定のオペレーティングシステム向けに作成されたアプリケーションは、ほぼ確実にそのフォーマットをサポートするため、その画像を必要とするユーザーがいて、そのユーザーが使用しているプラットフォームが分かっている場合は、安心して使用できます。WindowsとOS/2はBMPフォーマットを使用し、MacintoshはPICTフォーマットを推奨します。GNOMEなどのX WindowベースのUnixデスクトップは、XWDファイルを推奨します。これらのフォーマットはすべて24ビットカラーをサポートしていますが、十分に少ない色数の画像を8ビット、4ビット、さらには1ビットのインデックスカラー画像に圧縮することもできます。
タグ情報ファイル形式(TIFF)は、クロスプラットフォームでの使用を目的としたロスレスの24ビットカラーフォーマットで、ほとんどのシステム上のほとんどの画像エディタで使用できます。唯一の欠点は、TIFFが互換性のない複数のバージョンに進化しているため、異なる画像エディタでは互いのTIFFファイルを読み込めない可能性があることです。ただし、PhotoshopやCorelDrawなどの人気アプリケーションの最新バージョンでは問題なく読み込めるはずです。
今のところ最も有望なロスレス形式は、Portable Network Graphic (PNG) です。PNGは24ビットカラー画像、さらには32ビットカラー画像を正確に圧縮します。32ビットカラー画像は、24ビット画像に8ビットのアルファチャンネル(透明チャンネル)が追加されたものです。さらに、256色以下の画像をインデックス化して圧縮率を高め、ガンマ補正もサポートしています。何より素晴らしいのは、Web形式として設計されていることです。最近のグラフィックアプリケーションのほとんどはPNGの読み込みと作成が可能で、最新のブラウザもPNG形式をサポートしていますが、対応ブラウザの仕様は一定ではありません。
ウェブ画像フォーマット:GIF
CompuServeのGraphics Interchange Format(GIF)は、2つの方法で画像を圧縮します。1つ目は、Lempel-Zivエンコードと呼ばれる方式で、同系色のピクセルの列を1つの単位としてカウントします。2つ目は、インデックスカラーのみを使用する点です。つまり、GIFは256色までしか使用できないため、GIFを使用するには画像の色数を減らす必要がある場合があります。そのため、GIFは写真画像や高彩度画像には適していません。
十分に少ない色の GIF では、より高い圧縮率が実現されます。128 色以下は 7 ビット データで参照され、64 色以下は 6 ビット データで参照され、以下同様にして 1 ビットの 2 色の GIF になります。このため、GIF はシンプルな線画に最適な形式であり、色の追加や削除には制限と利点があることを意味します。GIF には、独自の機能がいくつかあります。GIF ファイルには、アニメーションを作成するために、各イメージの継続時間値を含む複数の画像を含めることができます。また、透明度にも制限があり、イメージのパレットの 1 つの色を透明として指定できます。これはどちらか一方を選択するもので、透明色に近い色のピクセルは部分的に透明にはなりません。図 G は、同じ画像の GIF と JPEG を示しています。
図G |
![]() |
ウェブ画像フォーマット:JPEG
JPEGフォーマットは24ビットカラーをサポートします。各ピクセルの明るさを正確に記録し、人間の目では識別が難しい色相を平均化することで画像を圧縮します。つまり、画像の構成そのものを記録するのではなく、画像の特徴を記録します。閲覧者のウェブブラウザやグラフィックアプリケーションは、この特徴をビットマップにデコードし、元の画像とほぼ同じ外観を実現します。
再構成画像の精度は、適用される圧縮率に依存します。この圧縮率は、JPEG対応のグラフィックツールのほとんどで選択できます。デコードされた色相は、拡散形状のサンプルブロックとしてレンダリングされます。これらのブロックは重なり合う傾向があるため、色間の明確な境界を生成するのは非常に困難で、大量のデータが必要になります。しかし、この手法は、色が徐々に変化し、エッジがはっきりしない写真画像には非常に有効です。例えば、熱帯の鳥は、図Hに示すように、JPEG形式に特に適しています。
図H |
![]() |
欠点としては、JPEGは編集が非常に難しいことで知られています。JPEGを開いて変更すると、JPEGデータ自体ではなく、解釈されたビットマップが変更されることになります。JPEGとして再保存すると、解釈されたビットマップは欠陥も含めてすべてエンコード処理にかけられ、結果として画像がさらに劣化します。必要がない限り、JPEGを再保存しないでください。
もう1つ注意点があります。高画質印刷の場合、JPEG形式は72dpi(ドット/インチ)以外のピクセル解像度もサポートしています。Webでは72dpiを超える解像度は無駄です。紙に印刷する場合のように、高解像度でもメリットはありません。画像をJPEG形式で保存する際は、画像の解像度を必ず確認してください。
画像の拡大縮小方法
画像を拡大または縮小するのは、ほとんどの画像エディタでは比較的簡単な操作です。しかし、いくつかのガイドラインに従うことで、より良い結果が得られます。
ほとんどの場合に使われるラスター画像では、拡大表示はうまくいきません。写真画像なら多少大きくなっても十分に説得力のある見た目になりますが、それ以外の画像はすぐに市松模様のように見えてしまいます。例外は、完全に長方形で構成されたエイリアシング画像で、これは無制限に拡大表示できます。
画像を縮小する場合は、PhotoshopやPaint Shop Proなど、アンチエイリアスに対応した画像編集ソフトを使うことをお勧めします。(Windowsに内蔵されている画像編集ソフト「Microsoft Paint」は拡大縮小も行いますが、エイリアスはそのまま残ります。)アンチエイリアスを使用すると、ピクセル数が少なくても、縮小後の画像は元の画像とほぼ同じように見えます。実際、縮小はギザギザした画像を滑らかにする最も簡単な方法です。
最後に、画像を拡大縮小する前に、画像がトゥルーカラーであることを確認してください。よくある間違いは、インデックスカラーの画像を縮小することです。アンチエイリアス処理に必要な色数が不足するため、結果がひどいものになります。トゥルーカラーに切り替えることでこの問題は解決します。画像エディタのメニューで、RGB、24ビット、または数百万色のいずれかを選択してください。
透明部分を追加する方法
ほとんどの画像エディタには、マスクまたはアルファチャンネルとも呼ばれる透明部分のオプションが用意されています。透明部分を追加すると、Webページに画像を表示する際に、画像の透明な部分を通してページの背景が見えるようになります。
現在のPortable Network Graphics (PNG)形式には、RGBチャンネルに加えて、256段階の透明度を持つ8ビットのアルファチャンネルが含まれています。現在のWeb形式ではこれに匹敵するものはありませんが、GIFには1ビットのアルファチャンネルに相当する機能があり、パレット上の1色を完全に透明にレンダリングできます。
GIF に透明効果を加える場合、ほとんどの画像エディタで提供されている直接的な透明効果やマスク機能は使用しないでください。GIF をエクスポートする際に透明効果が考慮されることはほとんどなく、GIF は「すべてかゼロか」という性質上、あまり役に立ちません。透明にしたい領域がすべて単色であること、そしてその色が画像内のどこにも見えなくても構わないことを確認してください。透明にしたい部分を別の色に変更する必要がある場合もありますが、その際、256 色という制限内に収まるように注意してください。
画像エディタでは、「名前を付けて保存」や「エクスポート」オプション、最適化パネル、あるいは「パレット」や「カラーテーブル」といったコントロールやメニューで、透明にする色を選択できるはずです。必要な色を選択すると、該当する領域が透明になったGIF画像が生成されます。
背景色を選択する
GIF の可視部分にアンチエイリアス処理されたエッジがある場合は、その背景が、表示される Web ページの背景と同じ基本色になっていることを確認してください。元の背景はアンチエイリアス処理された領域に補間されるため、背景が一致していない場合は、図 Iの右側の画像のように、画像の周囲に元の背景色の細い境界線が表示されてしまいます。
図I |
![]() |
一部の非常に古いブラウザやWeb以外のアプリケーションはGIFの透明化をサポートしておらず、これらのアプリケーションでは選択した色で表示されます。下位互換性を重視する場合、または同じGIFファイルを他のアプリケーションで使用する予定がある場合は、透明色を表示した際に適切に表示されることを確認してください。
色数を減らす方法
フルカラー画像をGIFとして保存したり、既存のGIFを小さくしたい場合は、色数を減らす必要があります。GIFを保存できる画像エディタであれば、色数を減らす機能が搭載されています。最適化パネルを探すか、メニューから「インデックスカラー」「色数を減らす」「256色」「8ビット」などを確認してください。
通常、この時点でいくつかの追加オプションが表示されます。1つは、画像のディザリングです。ただし、写真からGIFを作成する必要がある場合を除いて、これは一般的に良いアイデアではありません。ディザリングは画像を複雑にし、ファイルサイズを大きくします。
もう一つの選択肢は、画像のカラーパレットを減らすことです。色数が少ないほど、ファイルサイズは小さくなります。ビット深度(256色、128色、64色、32色など)を変えて試してみましょう(その間は「元に戻す」コマンドを使用)。そして、許容できる画質を保ちながら、最も小さいパレットを見つけてください。図Jは、ビット深度を段階的に減らした結果を示しています。
図J |
![]() |
縮小した画像の見栄えを改善するには、さらにいくつか方法があります。まず、ビット深度を徐々に下げていきます。256色から128色、64色、そして32色へと下げていくと、いきなり32色にするよりも良い結果が得られます。
次に、画像をほぼ希望するレベルまで縮小した後、パレットを編集して残りの調整を行います(画像エディタのパネルまたはメニューで「パレット」または「カラーテーブル」を探してください)。オフホワイトや黒に近い色の複数の色合いなど、区別する必要のない類似色を見つけます。最新のツールでは、選択した色をパレットから削除できます。このオプションがない場合は、類似色を同じ値に変更してから、画像をRGBモードに切り替え、インデックスカラーに戻します。重複したパレットエントリは、1つのエントリに置き換えられます。
Web セーフ カラー
Web グラフィックを扱う際に考慮すべき重要な点の 1 つが、Web セーフ パレットです。これは、インデックス付けされたカラー パレットが異なる複数の GIF 画像を 8 ビット カラー表示の画面に同時に表示するという問題に対する Netscape の巧みな解決策です。ブラウザは、ユーザの設定に基づいてディザリングまたは置き換えを行い、すべての画像に単一のパレットを適用します。単一のパレットをすべての画像で同じように使用できるように、このパレットは各 RGB チャネルで 0、51、102、153、204、および 255 (HTML では 16 進数値の 33、66、99、CC、および FF としてよく使用されます) の 6 つの均等なグラデーションを使用する色で構成されています。結果として得られる 216 色が Web セーフ パレットを構成します。画像を主にまたは完全にこれらの 216 色で作成することにより、画像が 8 ビット画面上でほとんどまたはまったく変更されず、どこに表示されてもほぼ同じに見えるようになります。
ほとんどの画像エディタは、減色機能にWebセーフパレット(Netscapeパレットとも呼ばれます)を搭載しています。このトレンドに先駆けたPhotoshop 3.0では、216色を入力し「均一」を選択することでNetscapeパレットを取得できます。これでパレット全体が取得できるので、RGBモードに切り替えて(今回は「完全一致」パレットを選択)、不要な色を除外します。
スクリーンショットの撮り方
パソコンの画面をキャプチャして画像ファイルに保存したい場合があります。画面全体の色数が非常に少ない場合を除き、ハイカラーまたはトゥルーカラーディスプレイを搭載したパソコンでスクリーンショットを撮るようにしてください。特にWebブラウザのスクリーンショットを撮る場合は、ブラウザが8ビットディスプレイで動作している際に頻繁にディザリングや色の代替を行うため、この点は重要です。どうしても256色で画面をキャプチャする必要がある場合は、少なくともディザリングをオフにしてください。
Windowsでは、2つの方法があります。キーボードのPrint Screen(またはPrtScn)キーを押すと、画面全体がクリップボードにコピーされます。Altキーを押しながらPrint Screenキーを押すと、アクティブウィンドウのみがコピーされます。次に、画像エディタ(Windowsに付属のMicrosoftペイントで十分です。高度な編集を行う予定がない場合は不要です)を開き、新しいファイルを作成して、「編集」メニューから「貼り付け」を選択します。
Macintoshでは、さらに多くの選択肢があります。CommandキーとShiftキーを押しながら3キーを押すと、画面全体のPICTファイルがブートドライブのトップディレクトリに作成されます。CommandキーとShiftキーを押しながら4キーを押すと、カーソルが十字に変わり、クリック&ドラッグで画面上の領域を選択してPICTファイルにキャプチャできます。Caps Lockキーを押しながら同じキーを押すと、カーソルが円に変わり、円が表示されているウィンドウをクリックすると、そのウィンドウのPICTファイルが作成されます。これらのキーの組み合わせにControlキーを追加すると、画面イメージがクリップボードにコピーされます。
GNOMEやKDEなどのX Windowデスクトップでは、コマンド xwd -out filename .xwd を実行すると、ウィンドウをクリックしてXWDイメージを作成できます。-frame オプションを追加すると、ウィンドウマネージャ全体をキャプチャできます。人気のユーティリティ xv もスクリーンキャプチャを実行できます。また、KDEにはユーティリティ ksnapshot が付属しています。
最後に、ウェブサイトなどで使用する前にスクリーンショットを編集する予定がある場合は、必ず画像形式で保存してください。スクリーンショットをGIF形式に縮小したり、JPEG形式にエンコードしたりすることは避けてください。
GIF画像を編集する方法
GIF画像にアウトラインや会社のロゴなどを追加する必要がある場合、希望通りの色を正確に得るのが難しいことがよくあります。画像エディタのカラーピッカーで希望の色調に調整しても、別の色調が提示されることがあります。
この問題は、画像エディタがGIFのカラーパレットに基づいているのに、パレットにない色を使用しようとしているために発生します。解決策は、GIFを開いてトゥルーカラー(RGB)に変更することです。これで、必要な色をすべて使用できるようになります。画像を変更したら、GIFとして再保存できるように、8ビット以下に解像度を下げてください。
新しい色を追加する必要がない場合でも、変更によって色が失われていないか確認してください。特にGIFをトリミングする場合は注意が必要です。パレットから色を削除すると、特にビット深度が下がるとファイルサイズが縮小されるため、画像エディタで色を再計算してみることをお勧めします。一部の画像エディタでは、最初にTrue Colorに切り替える必要がありますが、インデックスカラーに戻すとパレットが小さくなる場合があります。
ある色を別の色に置き換えたいだけなら、これらの問題は回避できます。GIF画像をインデックスカラーモードのまま、パレットを開き(画像エディタのメニューで「パレット」または「カラーテーブル」を探してください)、変更したい色をクリックします。新しい色のRGB値を入力し、パレットを閉じます。以前の色だったすべてのピクセルが新しい色になります。
JPEGを再保存する方法
画像をJPEGとしてエクスポートするのは一度だけにしてください。一度エクスポートすると、元の画像が圧縮された模倣画像を扱うことになるからです。JPEGを編集する正しい手順は、元の画像を修正してから、再度JPEGとしてエクスポートすることです。
しかし、時には選択肢がないこともあります。元のファイルを紛失してしまったり、そもそもファイル自体が手元になかったりするかもしれません。例えば、一部のクリップアートベンダーは、ディスクに多くの画像を詰め込むためにJPEG形式を使用しています。困ったときのために、いくつかのテクニックがあります。中程度から高度に圧縮されたJPEGファイルや、既に再保存された画像の場合、主な問題はJPEGエンコードによって生じる微妙な欠陥、つまりアーティファクトを除去することです。
一つの方法は、画像を少し縮小することです。エディターにアンチエイリアシング機能があれば、多くのアーティファクトは補間されて除去されます。
画像を縮小したくない場合は、フィルターを活用できます。優れた画像エディタのほとんどでは、フィルターはメニューの「フィルター」または「効果」としてリストされています。「ぼかし」や「アンシャープ」フィルターは、特に設定を調整できると便利です。画像全体を軽くぼかすことで、JPEGを再エンコードした際にアーティファクトが目立ちにくくなります。他にも、「ノイズ除去」、「ノイズ低減」、「ダスト&スクラッチ除去」などのフィルターが効果的です。コンピューターは人間よりもはるかに優れた認識力を持つ微細な欠陥を除去することで、これらのフィルターはJPEGアーティファクトを直接除去できます。自分の画像に適したフィルターを見つけるために、いろいろ試してみてください。ただし、「元に戻す」コマンドはいつでも使えるようにしておきましょう。
画像の変更が完了し、JPEG を再度保存する準備ができたら、再度エンコードする必要がないように、必ず画像を実際の形式で保存してください。