透明度を使用すると、画像がどんな背景にもシームレスに溶け込みます。暗いウェブサイトのヘッダー、明るい商品ページ、または印刷されたチラシの上でも同様です。透明度がなければ、すべての画像は背景に何があっても衝突する固体の色の四角形を持ちます。ロゴ、アイコン、商品のカットアウト、透かし、オーバーレイはすべて自然に見えるために透明度に依存しています。

すべての画像形式が透明度をサポートしているわけではなく、サポートしているものも異なる方法で処理します。正しい形式を選択し、透明度が実際にどのように機能するかを理解することで、白いハロー、ギザギザのエッジ、予期しないファイルサイズの増大を避けることができます。

アルファチャンネルとは？

標準的なカラー画像は、ピクセルごとに3つの値を保存します：赤（R）、緑（G）、青（B）。これらの3つのチャンネルが組み合わさって、あらゆる視覚的な色を作り出します。透明度のある画像は4番目のチャンネルであるアルファ（A）を追加し、RGBAになります。

アルファ値は各ピクセルの不透明度を制御します。0（完全に透明 — ピクセルは見えない）から 255（完全に不透明 — ピクセルは後ろのすべてをブロックする）の範囲があります。中間の値は部分的な透明度を生み出します。アルファ128のピクセルはほぼ半透明で、後ろにあるものの約半分が見えます。

部分的な透明度により、滑らかなアンチエイリアスされたエッジが可能になります。ロゴやアイコンのエッジピクセルが完全に色付きの状態から完全に見えない状態に徐々に移行し、どんな背景色ともきれいにブレンドします。部分的なアルファがなければ、エッジは鋭くギザギザに見えます。

透明度をサポートする形式

PNG — 汎用的な選択肢

PNGは完全な8ビットアルファチャンネルをサポートし、各ピクセルに256段階の不透明度レベルを提供します。ロスレスなので、保存後もエッジが完璧にシャープなままです。ほぼすべてのブラウザ、オペレーティングシステム、デザインツール、コンテンツ管理システムがPNGの透明度を正しく処理します。 PNGは確実な互換性と完璧な品質が必要な場合に最も安全な形式です。

トレードオフはファイルサイズです。PNGはロスレス圧縮を使用するため、ファイルが同等のJPEGや WebPよりもかなり大きくなる可能性があります — 特に写真や複雑なシーンの場合はそうです。

WebP — より小さく、同等に有能

WebPはロスレスと不可逆圧縮モードの両方で完全なアルファチャンネルをサポートします。透明なWebPファイルは、通常、同等の透明PNGより約3倍小さくなります。すべての現代のブラウザが WebPをサポートしており、今日のウェブで透明画像のための好ましい形式となっています。

ウェブ使用でWebPよりPNGを好む唯一の理由はレガシーサポートです — 古いブラウザや一部のデスクトップアプリケーションはまだWebPファイルを開けません。

AVIF — 最高の圧縮

AVIFは完全なアルファ透明度をサポートし、WebPよりもさらに優れた圧縮を実現します。ブラウザのサポートは急速に成長し、現在は主流になっています。AVIFは最小のファイルサイズが必要な場合に理想的ですが、PNGやWebPよりもエンコードが遅いです。

GIF — 限定的な1ビット透明度のみ

GIFは透明度をサポートしますが、二値的な方式でのみです — 各ピクセルは完全に透明か完全に不透明かのどちらかで、中間はありません。これを1ビット透明度と呼びます。

結果はギザギザのエイリアスされたエッジです。エッジピクセルが部分的に透明になれないため、前景色または完全な透明度のどちらかを選ばなければなりません。結果は滑らかなグラデーションではなく、硬い階段状のエッジです。GIFの透明度は直線エッジを持つ単純な幾何学的形状には許容範囲内で機能しますが、曲線の文字を持つロゴ、滑らかな影を持つアイコン、または写真コンテンツには見栄えが悪いです。

SVG — 無限のスケーリング、完全な透明度制御

SVGはピクセルデータを保存するのではなく、数学的に形状を説明するベクター形式です。SVGの透明度はCSSスタイルの不透明度とfill属性で表現され、画像が解像度に依存しないため、品質を損なうことなく任意のサイズに拡大縮小できます。SVGは16×16と1600×1600ピクセルの両方でシャープに見える必要があるロゴ、アイコン、イラストレーションに理想的です。

HEIC — アルファをサポート

iPhoneで使用されるHEICは完全なアルファ透明度をサポートしますが、Appleのエコシステム外でのソフトウェアサポートは限定的です。

JPEG / JPG — 透明度なし

JPEGはアルファチャンネルをまったくサポートしていません。透明な画像をJPEGとして保存すると、透明な領域は単色で塗りつぶされます — 通常は白か黒。JPEGファイルで透明度を保持する方法はありません。

GIF透明度の制限の詳細

GIFはパレット内の1つの色しか「透明」とマークできないため、ハードなピクセルエッジが生じます。アンチエイリアシング — 前景色と背景色の間でエッジピクセルをブレンドして曲線や斜めのエッジを滑らかにする技術 — が正しく機能しません。アンチエイリアシングが白い背景用に適用されていた場合、これらの薄い灰色のエッジピクセルは暗い背景の上に白いハローとして表示されます。これは「ハロー効果」または「マットカラーの滲み」と呼ばれることがあります。

ウェブアニメーションの場合、GIFは適切なアルファ透明度をサポートするWebPアニメーション画像やビデオ形式によって大部分が置き換えられました。

透明度が必要な場合

画像が表示される背景が異なるか不明な場合は、透明な画像を使用してください。一般的なケースには次のものが含まれます：

ロゴ — 会社のロゴは白いページ、暗いナビゲーションバー、色付きボタン、または印刷された文書に配置されても正しく見える必要があります
ECサイトの商品画像 — 透明な背景を持つカットアウト商品写真は、任意のページカラーやパターンに配置できます
アプリとUIアイコン — アイコンはOSやテーマが適用する任意の表面色にきれいに乗る必要があります
透かしとオーバーレイ — 半透明のオーバーレイにより、透かしを伝えながらコンテンツが見えます
ステッカーと装飾要素 — 他のコンテンツの上にレイヤリングするためのあらゆるグラフィック

透明度が不要な場合

透明度はオーバーヘッドを追加します。PNGおよびWebPの透明ファイルは、同じ視覚的コンテンツの JPEG同等物よりも大きくなります。画像が常に既知の固定背景に表示される場合は、フラット化して — 背景色を画像に焼き込み、JPEGとして保存してください。

不透明形式を使用してください：

写真と写真コンテンツ
全ページのヒーロー画像または背景
一貫した背景を持つサムネイルとプレビュー画像
背景が絶対に変わらない画像

写真を透明PNGとして保存することは、利益なしにファイルサイズを膨らませる一般的な間違いです。代わりにJPEGまたは不可逆WebPを使用してください。

背景を削除して透明度を作成する方法

削除したい単色背景を持つ写真や画像がある場合、複雑なソフトウェアは必要ありません。 Picovertの背景除去ツールはAIを使用して被写体を自動的に検出し背景を削除し、どこでも使用できる透明PNGを生成します。

透明画像のためのPNG vs WebP

ウェブ使用の場合、WebPはほぼすべてのケースでより良い選択です。透明WebPは同等の透明PNGより約3倍小さく、ページの読み込みが速くなり帯域幅の消費が少なくなります。すべての現代のブラウザはアルファ付きWebPをサポートしています。

PNGは作業またはアーカイブ形式としてより良い選択のままです。デザインツール、フォトエディター、コンテンツ管理システムはPNGを普遍的に処理します。マスターファイルをPNGとして保持し、配信のためにWebPに変換してください。PNGは最大互換性が必要な場合 — 例えばメール添付ファイル、プレゼンテーション、またはWebPサポート以前のソフトウェア — にも依然として優先する価値があります。

透明度を保持しながら形式を変換する

形式間の変換時、ターゲット形式が透明度をサポートしていない場合、アルファチャンネルを誤って失いやすいです。Picovertの画像変換ツールは PNG、WebP、AVIFの変換時にアルファチャンネルを保持するので、透明な背景は透明なままです。

透明画像をJPEGに変換するのは避けてください — コンバーターが警告を表示しますが、進めた場合、透明な領域は白で塗りつぶされます。公開前に必ず出力を確認してください。

透明画像が準備できたら、アルファチャンネルに影響を与えずにファイルサイズをさらに削減できます。 Picovertの画像圧縮ツールは透明度を保持しながらPNGおよび WebPファイルを圧縮し、品質やエッジの精度を損なうことなく小さなファイルを得ることができます。