JA EN

透過画像の作り方と活用法 - PNG, WebP, SVG での透明背景の実現

· 約 9 分で読めます

透過画像の基本概念とアルファチャンネル

透過画像とは、背景が透明な画像のことです。通常の画像は各ピクセルが RGB (赤・緑・青) の 3 チャンネルで構成されますが、透過画像にはこれに加えてアルファチャンネル (A) が存在します。アルファチャンネルは各ピクセルの透明度を 0 (完全に透明) から 255 (完全に不透明) の 256 段階で表現します。

アルファチャンネルの重要な特性は「半透明」を表現できる点です。アルファ値が 128 (50%) のピクセルは、背景色と画像の色が半分ずつブレンドされて表示されます。これにより、被写体のエッジが背景に自然に溶け込む滑らかな切り抜きが実現できます。アルファ値が 0 か 255 のみ (完全透明か完全不透明) の場合は「1 ビットアルファ」と呼ばれ、エッジがギザギザ (ジャギー) になります。

Web ブラウザでの透過画像の表示は、CSS の background プロパティと組み合わせることで真価を発揮します。透過画像を任意の背景色やグラデーション、パターンの上に重ねることで、1 つの画像素材を様々なデザインコンテキストで再利用できます。ダークモードとライトモードの切り替えにおいても、透過画像であれば背景色の変更に自動的に適応します。

ファイルサイズの観点では、アルファチャンネルの追加は画像データ量を約 33% 増加させます (RGB 3 チャンネル → RGBA 4 チャンネル)。ただし、透明領域が多い画像では圧縮効率が高くなるため、実際のファイルサイズ増加は画像の内容に依存します。

PNG での透過画像作成

PNG (Portable Network Graphics) は透過画像の最も一般的なフォーマットです。8 ビットのアルファチャンネルをサポートし、256 段階の半透明表現が可能です。ロスレス圧縮のため画質劣化がなく、テキストやロゴなどシャープなエッジを持つ画像に最適です。

PNG の透過タイプ:

Photoshop での作成手順:

Figma での作成手順:

pngquant を使用すると、PNG-32 を PNG-8 + アルファに変換してファイルサイズを大幅に削減できます。視覚的な品質低下はほとんどの場合で知覚できないレベルです。

WebP と AVIF での透過画像

WebP は PNG と同様にアルファチャンネルをサポートしますが、はるかに高い圧縮効率を実現します。透過画像において、WebP は PNG の 26% 程度のファイルサイズで同等の品質を維持できるとされています (Google の公式ベンチマーク)。Web 用の透過画像では、PNG から WebP への移行が最も効果的なファイルサイズ削減策です。

WebP の透過モード:

AVIF も透過をサポートしており、WebP よりさらに高い圧縮効率を持ちます。ただし、AVIF のアルファチャンネルは非可逆圧縮されるため、エッジの品質が WebP のロスレスアルファより若干劣る場合があります。ロゴやテキストなどシャープなエッジが重要な画像では、WebP ロスレスの方が適切です。

実装上の注意点として、WebP の透過画像を <picture> 要素でフォールバック配信する場合、PNG をフォールバックとして用意する必要があります:

CSS の background-image で透過 WebP を使用する場合は、@supports ルールまたは JavaScript による対応検出が必要です。

SVG による透過とベクター画像の活用

SVG (Scalable Vector Graphics) はベクター形式の画像フォーマットであり、本質的に透過をサポートしています。SVG の背景はデフォルトで透明であり、アルファチャンネルの概念すら不要です。ロゴ、アイコン、シンプルなイラストなど、ベクターで表現可能な画像には SVG が最適な選択肢です。

SVG の透過に関する特性:

SVG の最大の利点は解像度非依存であることです。Retina ディスプレイや 4K モニターでも、SVG は常にシャープに表示されます。PNG の透過画像では 2x、3x のバリエーションを用意する必要がありますが、SVG なら 1 ファイルですべての解像度に対応できます。

ファイルサイズの面でも、シンプルな図形やアイコンでは SVG が圧倒的に小さくなります。例えば、64×64 ピクセルのアイコンは PNG で 2〜5KB ですが、同等の SVG は 500B〜1KB 程度です。さらに gzip 圧縮 (サーバー側で自動適用) により 60〜80% 縮小されるため、実効的な転送サイズは極めて小さくなります。

ただし、写真のような複雑な画像を SVG で表現することは現実的ではありません。SVG はパスとシェイプで構成されるため、写真をトレースすると膨大なパスデータが生成され、ファイルサイズが PNG を大幅に超えます。SVG は「幾何学的に表現可能な画像」に限定して使用すべきです。

背景除去の実践テクニック

既存の写真から背景を除去して透過画像を作成する作業は、画像編集で最も頻繁に行われる操作の一つです。AI 技術の進歩により、かつては熟練のデザイナーが数十分かけていた作業が、数秒で完了するようになりました。

AI ベースの背景除去ツール:

手動での精密な切り抜き:

背景除去後の仕上げとして、エッジの「マット処理」が重要です。切り抜いた被写体のエッジに元の背景色が残る (フリンジ) 場合、「マットの除去」(Photoshop) や「エッジを調整」機能で不要な色を除去します。特に暗い背景から切り抜いた場合、エッジに暗い縁取りが残りやすいため注意が必要です。

画像編集の入門書は Amazon でも探せます

透過画像の Web デザインでの活用パターン

透過画像は Web デザインにおいて多様な活用パターンがあります。適切に活用することで、デザインの柔軟性と再利用性が大幅に向上します。

主要な活用パターン:

CSS との組み合わせテクニック:

パフォーマンスの観点では、透過画像は不透明画像よりもレンダリングコストが高くなります。ブラウザは透過ピクセルごとにアルファブレンディング計算を行うため、大きな透過画像を多数重ねるとスクロール性能に影響する可能性があります。will-change: transform や contain: paint を活用して、レンダリングの最適化を図りましょう。

関連記事

背景透過の技術解説 - セグメンテーションとマット処理の仕組み

画像の背景透過 (背景除去) に使われる技術を解説。セマンティックセグメンテーション、トリマップベースのマット処理、エッジ検出の仕組みと精度の違いを比較します。

画像フォーマット比較表 - JPEG/PNG/WebP/AVIF/GIF/BMP の特徴と使い分け

主要な画像フォーマット 6 種類の技術的特徴を比較。圧縮方式、対応色深度、透過、アニメーション、ブラウザ対応状況を一覧表で整理し、用途別の最適な選択を解説します。

Web 用画像のファイルサイズ最適化戦略 - 品質を保ちながら軽量化する技術

Web パフォーマンスを最大化するための画像ファイルサイズ最適化手法を、フォーマット選択からメタデータ除去まで体系的に解説します。

画像圧縮の仕組みを徹底解説 - JPEG ・ PNG ・ WebP の違い

JPEG、PNG、WebP の圧縮アルゴリズムの違いを技術的に解説。非可逆圧縮と可逆圧縮の原理、各フォーマットの得意分野、実務での使い分けを具体的なデータとともに紹介します。

favicon の作り方完全ガイド - ICO, SVG, PNG の使い分け

favicon の仕組みから、ICO, SVG, PNG 各フォーマットの特徴、ダークモード対応、各ブラウザの対応状況まで実践的に解説します。

WebP のメリットと対応状況 - 次世代画像フォーマットの実力

Google が開発した WebP フォーマットのメリット、デメリット、ブラウザ対応状況を解説。JPEG や PNG からの移行判断に必要な情報をまとめます。

関連用語