フォトショップで背景を切り抜いた画像をCSSで使いたい

いつもお世話になっております。
表題の件質問させてください。

フォトショップで、「被写体のみ選択」で、写真の背景を切り抜きました。
そのまま画像をjpgで保存し、htmlで添付すると、背景が白い四角い画像になってしまいます。
この画像を背景を切り抜いた状態で使用することはできるのでしょうか？

それができないと、
テキストと背景のない写真が重なっているデザインなので、全体を画像として貼ることになりますか？
（テキストごと画像として貼る？）
その場合はグーグルの評価などはどうなのでしょうか。

質問が多くて申し訳ございませんがよろしくお願いいたします。

No.2 ベストアンサー 回答者： wanderer1 回答日時： 2020/07/21 14:05

Photoshopで「被写体のみ選択」を選ぶ前に、まず、「レイヤー」のウインドウを確認してください。

「レイヤー」に表示されている文字が「背景」だとしたら、「背景」と書かれたところをダブルクリックします。

そうすると「レイヤー0」という表示のダイアログが出ます。
OKをクリックします。

続いて「被写体のみ選択」をしたら、

メニューバー ＞ 選択範囲 ＞ 選択範囲を反転

で選択範囲を反転したら削除。
欲しい部分以外が消えて、グレーのチェック柄になると思います。

メニューバー ＞ ファイル ＞ 書き出し ＞ Web用に保存

で書き出しウインドウが現れます。

右上のところにある表示がPNG-24に、その下の「透明部分」にチェックを入れて「保存...」ボタンを押して書き出します。

htmlには.jpegではなく.pngで書き出された画像を添付してください。

もうちょっと手っ取り早い方法もありますが、Photoshopのバージョンがわかりませんので、オーソドックスな方法をご紹介しました。
これができればいろいろ方法が探せると思います。

この回答へのお礼

できました！jpgではなくpngで保存するのですね！
本当に助かりました！！ありがとうございます！！

お礼日時：2020/07/21 14:46

No.1 回答者： t_fumiaki 回答日時： 2020/07/21 13:39

>>そのまま画像をjpgで保存し

そのままじゃ駄目です。保存する時に背景色を透明にして保存する指定がある筈です。

>>全体を画像として貼ることになりますか？
そうです、背景白の画像ですから。

この回答へのお礼

回答いただきありがとうございました！

お礼日時：2020/07/21 14:47