Web デザインにおける完璧な画像処理の 5 つの要素

著者：Eve Cole 更新時間：2009-06-20 16:51:39

1. 形式: コンピューターで生成された単純な形の画像 (ロゴやアイコンなど) には PNG 形式が推奨されますが、豊かな色の写真には JPEG 形式が必要です。色が少なく、グラデーションがない場合は、GIF 形式を使用する必要があります。
GIF は、最も一般的に使用される Web 画像形式です。 GIF は最大 256 色を保持し、写真を除くほぼすべての画像で動作します。簡単なアニメーションや透明な画像を生成する機能もあります。
PNG 形式は比較的新しい形式であり、W3C によって推奨されている形式でもあります。 PNG-8 は GIF に匹敵する最大 256 色を含めることができ、PNG-24 は任意の色を高品質で表現できる RGB モードをサポートし、PNG-32 は透明に設定できる PNG-24 に基づくアルファチャネルを追加します。
JPEG は約 1,670 万色を保存でき、写真の保存によく使用されます。しかし、それ以外では、JPEG はほとんど使用されません。画像の色数が 256 未満である場合、または単色の大きな領域が含まれている場合、JPEG のパフォーマンスが低下し、高品質の画像を取得するにはファイルサイズが 2 倍になる可能性があります。
画像形式を選択する場合は、以下で詳しく説明するように、色、透明度、アニメーションなどの使用範囲を総合的に考慮する必要があります。 Photoshop や Fireworks の書き出しウィザードを通じて、さまざまなパラメータを比較できます。選択基準は、許容可能な画質を維持しながら、ファイルサイズをできるだけ小さくすることです。
2. カラー作成画像の印刷には、CMYK モードではなく、RGB モードを使用する必要があります。もう 8 ビットモニターを使用している人はほとんどいないため、ブラウザーのセーフカラーについて心配する必要はありません。色の選択は、ビジュアルアイデンティティ (VI) システムなどの統一標準を参照する必要があります。色の数と効果は画像形式を決定する重要な要素です。たとえば、カラーグラデーションでは多くの場合、GIF として保存すると歪みが発生し、ファイルサイズも大幅に増加します。 PNG-24、PNG-32、または JPEG 形式の使用を検討してください。
3. サイズベクター作成ツールを使用して作成された画像は、多くの場合 PNG 形式での保存に適しており、そのサイズはベクター描画ツールで決定する必要があります。ビットマップに変換すると、簡単に拡大縮小することはできません (特に拡大しないでください)。）。 Fireworks で作成された PNG ファイルにはレイヤーなどの編集可能な情報が含まれており、その中の線、図形、テキストはすべてベクターグラフィックスであることに注意してください。このような画像を Web ページに適用するには、最初に出力操作を実行してファイルサイズを圧縮する必要があります。また、編集可能な情報が失われるため、出力 PNG 画像もビットマップに変換されます。したがって、出力前に画像サイズの調整を完了しておく必要があります。ビットマップは、イメージの輪郭とグラデーションが十分に鮮明になるように拡大縮小されません。
既存のビットマップや写真の場合は、HTML 言語の幅と高さの属性を使用して画像サイズを変更するのではなく、Photoshop などのソフトウェアを使用してサイズを調整してから、Web ページに挿入する必要があります。 HTML 言語を直接使用して画像サイズを制御すると、重大な画像の歪みが発生する可能性があります。
一般に、Web ページに配置される画像は比較的小さいサイズに制御する必要があります。テキストと混合する場合、幅は約 300 ピクセルにする必要があります。単体で表示する場合でも横幅は600px未満にしてください。高さは1画面を超えない程度が適当です。
4. 透明 GIF と PNG は両方とも透明をサポートしますが、方法が異なります。 GIF は、隣接するグラデーションカラーの透明度を考慮せずに、1 つまたは複数の色を完全に透明に設定するだけです。これは、背景色が大幅に変化する (または複数の対照的な色が含まれる) 場合、透明な部分への移行がスムーズにならず、明らかな分割線が生じることを意味します。透過GIFを作成したい場合は、キャンバスの背景色を対象のエフェクトの背景色と同じ（またはそれに近い）色に設定する必要があります。 PNG にはこの問題はなく、半透明に設定することもできます。
ただし、IE6ではデフォルトでは透過PNGを正しく表示できないため、適切な対策が必要です。
5. アニメーション Web ページ上のアニメーションには通常、Flash とアニメーション GIF が含まれます。 Flash は、強力な機能、豊富なエフェクト、高画質、強力な作成ソフトウェアを備えており、ほとんどの場合、Web アニメーションの形式として好まれています。アニメーション GIF の欠点は、使用できる色が 256 色までであることと、複雑な効果を備えたアニメーションを作成するのが難しいことです。しかし、その利点は、ファイルが小さく、プラグなしで古いブラウザでも最新のブラウザでも再生できることです。 -サポート中。