Photshopで画像透明化すると画像が粗くなる

質問

HTML＋CSSでHPを作成しています。
PHOTSHOPで画像を作っているのですが、背景を透明化させるとうまく表示されません。
画像が粗くなる感じです。背景を透明化せずに表示させるときれいに表示されます。
どなたか解決方法を教えていただけますか？

回答No.1

noname#214300

背景を透過させるのには、透明色を使います。この透明色というのは特定の色を差すのではなく、この色情報を持ったピクセルは表示しない＝背景が透けるという処理をします。
例えばPhotoshopで透明色を#FFFFFFの色を持ったピクセルに設定した場合、#FFFFFEの色を持つピクセルは元の色がそのまま表示されてしまいます。
この場合、例えば背景色が#00FF00だったらならば、画像が#FFFFFFの部分は#00FF00で表示されますが、#FFFFFEはそのまま#FFFFFEで表示されます。
要は、青い背景に白いザラザラのがやたら汚く表示されますが、これがご質問者様の言われる画像が荒くなるという状態でしょうか？

もしもこの説明の通りならば、以下の方法をご参考下さい。

・Photoshopで作る画像自体の背景色を、HTMLの背景色と同じにする
→一見アンチエリアスが綺麗に掛かったように見えます

・画像のボケ足を完全に抜く
→原因はPhotoshopが勝手に掛けるアンチエリアスですので、アンチエリアスが掛からないように絵を描くか、頑張ってアンチエリアスの部分（ボケ足）を消してしまう。これで背景と合成時、ボケ足部分の汚いのが表示されなくなる

・画像に、透明色が使われないように注意する
→色情報だけで機械的に抜きますので、上記の説明で言うと、透明にならなくて良い部分（例えば何らかしらのハイライト部分）に#FFFFFFが使われている場合、ここも背景として抜かれてしまいますので、画像全体を少し暗くするか、例えば絶対にあり得ない色（#0000FFあたり）を透明色として、抜きたい部分を手動で塗りつぶしていく