透明ピクセルとマットの使用

透明ピクセルを使用すると、Web 用に長方形以外の画像を作成できます。GIF および PNG 形式でサポートされる透明な背景を使用すると、画像の透明ピクセルが保持され、画像の透明部分から Web ページの背景が透けて見えるようになります（JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます）。

GIF、PNG、JPEG 形式でサポートされる背景マット処理では、Web ページの背景と一致するマットカラーで透明ピクセルを塗りつぶしたりブレンドすることで、透明部分の色をシミュレートします。背景マット処理は、Web ページの背景が単色で、その背景色がわかっているときに効果的です。

最適化した画像で透明な背景や背景マット処理を作成するには、まず透明部分を含む画像を用意する必要があります。透明部分は、新しいレイヤーを作成するときや、背景消しゴムやマジック消しゴムを使用するときに作成できます。

GIF または PNG‑8 ファイルの作業では、透明部分にくっきりとした輪郭（ハードエッジ）を作成することができます。元の画像で透明度が 50 ％を超えるすべてのピクセルは最適化した画像では完全な透明ピクセルになり、元の画像で不透明度が 50 ％を超えるすべてのピクセルは最適化した画像では完全な不透明ピクセルになります。Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

GIF または PNG 画像での透明な背景の保持

GIF および PNG‑8 形式は、1 段階のみの透明ピクセル（完全に透明なピクセルまたは完全に不透明なピクセル）をサポートしますが、半透明なピクセルはサポートしません（これに対して、PNG‑24 形式は複数の段階を持つ透明ピクセルをサポートします。つまり、不透明から完全な透明まで、最大 256 段階の透明ピクセルを画像内で使用できます）。

マット処理した GIF 画像や PNG 画像の作成

画像を表示する Web ページの背景色がわかっているときは、マット機能を使用して、透明ピクセルを Web ページの背景と一致するマットカラーで塗りつぶしたり、ブレンドすることができます。

GIF 形式や PNG-8 形式のファイルでのハードエッジ透明部分の作成

Web ページの背景色がわからない場合、または Web ページの背景にテクスチャやパターンが含まれている場合は、透明部分にハードエッジを適用します。ただし、ハードエッジを適用すると、画像の縁がギザギザに表示されることがあります。

マット処理した JPEG 画像の作成

JPEG 形式は透明部分をサポートしませんが、マットカラーを指定して、元の画像の透明部分の色をシミュレートすることができます。完全に透明なピクセルはマットカラーで塗りつぶされ、半透明なピクセルはマットカラーとブレンドされます。JPEG をマットカラーと一致する背景の Web ページに配置すると、画像が背景とブレンドされたように表示されます。

「なし」を選択すると、白がマットカラーとして使用されます。