目次一覧
状態:-
閲覧数:1,567
投稿日:2019-07-06
更新日:2019-07-10
PNG画像透明化問題 ／ PNG画像を透明化する方法は(仕様上は)複数存在している／ PNG画像の透過に関する仕様上の基本
PNG画像の透過に関する仕様上の要点 ／ 意図した通り、画像透過表示されないことがある
PNG画像の透過に関する仕様上の要点 ／ 意図した通り、画像透過表示されないことがある
PNG画像透明化問題 ／ PNG画像を透明化する方法は(仕様上は)複数存在している／ PNG画像の透過に関する仕様上の基本
PNG画像透明化問題
「PNG画像仕様」と「各ソフトウェア実装」は必ずしも一致していない(一部異なる)
・PNGには5つのイメージタイプがあるが、各ソフトウェアではこの通り実装されていない
・( PNG8,PNG24といった選択ではなく) 詳細に設定するようになっていたり、画像の内容から適切と思われるフォーマットを自動選択するようになっていたりする
具体例
・PhotoshopではグレースケールPNG画像を保存できない
・Photoshopではインデックスカラーで半透明なPNG-8画像を保存できない。Fireworksでは保存することができる
・続：PNG画像をより美しく、より軽量に最適化するテクニック
PNG画像を透明化する方法は(仕様上は)複数存在している
画像を透明化する際、考慮すべき事柄。選択肢
比較一覧表
| 透明度%指定できる？ | 〇。完全透明、半透明など | ×。色がある or 完全透明。2階調と呼ばれる | - |
|---|---|---|---|
| 複数色透明できる？ | 〇 | ×。1色のみ透明にできる | - |
PNG画像の透過に関する仕様上の基本
alphaチャンネルがある場合
・透明度%指定できる
・何色でも(半)透明にできる
・Grayscale with alpha ／ グレースケール（透過アリ）
・Truecolor with alpha ／ Trueカラー（透過アリ）
・Truecolor with alpha ／ Trueカラー（透過アリ）
PNG画像の透過に関する仕様上の要点 ／ 意図した通り、画像透過表示されないことがある
PNG画像の透過に関する仕様上の要点
alphaチャンネルがない場合
「PNG image type」によって異なる
・Grayscale ／ グレースケール
・Truecolor ／ Trueカラー
・Indexed-color ／ インデックスカラー
・Truecolor ／ Trueカラー
・Indexed-color ／ インデックスカラー
（Alphaチャネル無し)Grayscale
ある1色(Gray値)を透明色(alpha=0)として指定できる
（Alphaチャネル無し)Truecolour（RGB)
ある1色(RGB値)を透明色(alpha=0)として指定できる
（Alphaチャネル無し)IndexedColour（パレット方式）
・複数のパレットインデックスを指定できる
・パレットインデックス値そのものがalpha値として扱われるため、例えばパレットインデックス=128を指定すると透明度50%として扱うことができる
・PNG形式データは内部的に"チャンク(chunk)"と呼ばれる構造化されたブロックの集合として表現されます。tRNSチャンクもその一種で、透明度(Transparency)を表すデータブロックです
意図した通り、画像透過表示されないことがある
理由
・画像の透明部分の表示は「Viewer」「ソフトウェア」「ブラウザ」に依存しているため
・背景透明画像を作成したいのですが、GIF、PNG8、PNG24、PNG32の違いが
・既存画像(gif または png)の背景が透明か確認できるオンラインサービス
・既存画像(gif または png)の背景が透明か確認できる
・ImageMagick で PNG の形式を変換