Amazonで商品を見るセール会場へ

PhotoshopでWebPを保存する方法|透明・画質と保存後の確認

PhotoshopでWebPを保存するときは、[ファイル]→[コピーを保存]からWebPを選びます。

ネイティブ対応はバージョン23.2からで、対象はRGB・8bit文書です。

元のPSDを残し、保存したWebPを開き直して透明・色・寸法を確認します。

目次

透明のある練習用画像を開く

練習ZIPのpractice-transparent.pngを開きます。

256×128pxで、中央に色があり、周囲に透明と半透明の部分がある架空の画像です。

Pythonで作成した入力データであり、Photoshopの書き出し結果ではありません。

実際の制作物で練習するときは、元PSDを保存してから文書を複製します。

[イメージ]→[モード]でRGBカラー・8bit/チャンネルになっているか確認します。

モードや深度の変換が必要な場合は、複製に対して行ってください。

元文書へ変換を加えたまま上書き保存しないようにします。

スポンサーリンク

可逆と非可逆を別ファイルで保存する

[ファイル]→[コピーを保存]でWebPを選び、practice-lossless.webpとして保存します。

Photoshop 27.11.0では、[コピーを保存]を選ぶと「複製を保存」という名前の画面が開きました。

保存すると開く[WebP オプション]の画像圧縮で、[劣化なし]を選びます。

[劣化なし]が可逆の圧縮です。

WebP オプションの画像圧縮で劣化なしを選んだPhotoshopの画面
2026-10-16撮影。Adobe Photoshop 27.11.0 (20260929.r.26 8c16e56)、Windows 11 Pro (10.0.26200)。[ファイル]→[コピーを保存]でWebPを選んだ後に開く、[WebP オプション]の実機画面。画像圧縮で[劣化なし](可逆)を選んだ状態。XMP、EXIF、Photoshopエクストラを含めるチェックはどれもオフ。

次に同じ入力からpractice-lossy.webpを別名で保存し、非可逆の[劣化]を選んで画質を設定します。

試したときは、画質の欄への入力が元の値に付け足されたため、Ctrl + Aキーで欄の値を全部選んでから80を入れ直しました。

WebP オプションで劣化を選び、画質を80にしたPhotoshopの画面
2026-10-16撮影。Adobe Photoshop 27.11.0 (20260929.r.26 8c16e56)、Windows 11 Pro (10.0.26200)。比較用に[劣化](非可逆)を選び、画質を80にした[WebP オプション]の実機画面。右の欄には「高」と表示された。

練習では同じ出力名を使わず、両方を残して比較してください。

可逆は画質を落とさず圧縮する用途、非可逆は見た目とファイルサイズを比較しながら調整する用途です。

非可逆の画質を上げると、通常は出力サイズも増えます。

PNGやJPEGより必ず小さくなるわけではないため、画像ごとに実ファイルのサイズを確認します。

XMP、EXIF、Photoshopエクストラの保存項目も確認します。

画面では「XMP メタデータを含める」「EXIF メタデータを含める」「Photoshop エクストラを含める」の3つのチェックボックスで、試したときはどれもオフにしました。

実写真を公開する場合は位置情報や連絡先などの内容を確認し、不要な項目を含めない設定にします。

架空の練習画像には撮影者・位置情報は入れていません。

保存したWebPを開き直して比べる

確認する項目練習で確かめる結果
寸法両方が256×128px。想定外の拡大・縮小がない
透明外周に背景色が焼き込まれていない。半透明の境界も見る
文字や輪郭細線、色の境界、にじみを同じ倍率で比較する
ファイルサイズ実際のバイト数を比較する。画質だけで決めない

透明の見え方は白い背景だけでなく暗い背景でも確認します。

WebPをブラウザーで開いて表示を確認した後、掲載先でも同じサイズで表示してください。

Photoshopの画面上で元文書を見ただけでは、保存後の結果を確認したことになりません。

保存して開き直した結果(2026年10月16日)

Windows 11 Pro(10.0.26200)のAdobe Photoshop 27.11.0(日本語表示)で、透明のある画像をWebPで2通りに保存し、開き直して比べました。

入力は練習ZIPの画像ではなく、同じ256×128pxで、透明と半透明の部分がある自作のPNGです。

この画像はスクリプトで作り、Photoshopで開く操作もスクリプトで行いました。

Photoshopでは、RGBカラー、8bit/チャンネルの文書として開かれました。

保存は画面で行い、[ファイル]→[コピーを保存]でWebPを選んで、[劣化なし]と、[劣化]の画質80の2つを別名で保存しました。

保存した2つのWebPは、スクリプトでPhotoshopに開き直し、画面で透明の部分と寸法を確かめました。

[開く]の画面からファイルを選ぶ操作は、確認に含めていません。

保存した劣化なしのWebPをPhotoshopで開き直し、透明の部分が市松模様で表示された画面
2026-10-16撮影。Adobe Photoshop 27.11.0 (20260929.r.26 8c16e56)、Windows 11 Pro (10.0.26200)。自作の256×128ピクセルの画像を[劣化なし]で保存し、開き直した実機画面。透明の部分は市松模様で表示され、寸法は256×128ピクセル。開き直す操作はスクリプトで行った。[劣化]の画質80のWebPも見た目では差が分からなかったため、画像は1枚だけ載せる(ファイルのタブとパネル名の行を切り取り。別の検証用ファイルのタブが出ていたため)。

保存したファイルを画像処理のプログラムで読み込み、入力と比べた結果は次のとおりです。

ファイルサイズ寸法透明の値色の差(平均/最大)
入力のPNG980バイト256×128px基準基準
劣化なし518バイト256×128px入力と全画素一致0/0
劣化・画質801,390バイト256×128px入力と全画素一致2.54/88

色の差は、完全に透明ではない画素のRGBの値を、0〜255の段階で入力と比べたものです。

完全に透明な画素は19,888、半透明の画素は6,472で、どちらのWebPも入力と同じでした。

画質80では、細い線の一部で色の差が大きくなりました。

この画像では、劣化なしのほうが、画質80の劣化より小さくなりました。

写真など別の画像でも同じ大小になるとは限らないため、ファイルごとにサイズを確かめてください。

暗い背景での見え方、ブラウザーや掲載先での表示、16bitなどほかのモード、メタデータを含めた保存は確かめていません。

WebPが選べないときの切り分け

最初に[書き出し形式]や[クイック書き出し]ではなく[コピーを保存]を開いているか確認します。

その画面でも候補がない場合は、RGB・8bitとバージョン23.2以降の条件を確認してください。

保存できない場合は、別の自分の作業フォルダーと新しいファイル名でも試し、形式の問題と保存先の問題を分けます。

23.1以前ではWebPShopなど追加の対応が必要です。

導入前に利用中の版と環境を確認してください。

AVIFやJPEG XLはWebPとは別形式で、WebP対応からそれらの保存対応まで判断しません。

戻す場合は保存済みの元PSDまたは入力PNGを開き、変換前の文書からやり直します。

確認範囲と公式資料

対応条件と保存経路は、2026年10月3日にAdobeのWebP公式資料で確認しました。

2026年10月16日に、Photoshop 27.11.0で、WebPへの保存と、保存したファイルの寸法・透明・色の差・サイズを確かめ、結果を「保存して開き直した結果」に載せました。

16bitなどほかのモード、23.2より前の版、メタデータを含めた保存、暗い背景やブラウザー、掲載先での表示は確かめていません。

スポンサーリンク

よくある質問:PhotoshopでWebPを保存する

PhotoshopでWebPを保存するには、どうしますか?

[ファイル]→[コピーを保存]からWebPを選びます。ネイティブ対応はバージョン23.2からで、対象はRGB・8bit文書です。元のPSDを残し、保存したWebPを開き直して、透明・色・寸法を確認します。

Photoshop 27.11.0では、[コピーを保存]を選ぶと「複製を保存」という画面が開き、形式の一覧からWebPを選べました。

保存前に、画像のモードを確認する必要はありますか?

あります。[イメージ]→[モード]で、RGBカラー・8bit/チャンネルになっているか確認します。モードや深度の変換が必要な場合は、複製に対して行い、元文書へ変換を加えたまま上書き保存しないようにします。実際の制作物で練習するときは、元PSDを保存してから文書を複製します。

「可逆」と「非可逆」は、どう使い分けますか?

可逆は画質を落とさず圧縮する用途、非可逆は見た目とファイルサイズを比較しながら調整する用途です。記事では、同じ入力からpractice-lossless.webp(可逆)とpractice-lossy.webp(非可逆で画質を設定)を別名で保存し、両方を残して比較します。非可逆の画質を上げると、通常は出力サイズも増えます。

Photoshop 27.11.0の[WebP オプション]では、可逆は[劣化なし]、非可逆は[劣化]と表示されました。

WebPにすれば、PNGやJPEGより必ず小さくなりますか?

必ずしもそうではありません。PNGやJPEGより必ず小さくなるわけではないため、画像ごとに実ファイルのサイズ(バイト数)を確認します。画質だけで決めないようにします。

2026年10月16日に試した自作の画像では、入力のPNG(980バイト)より、[劣化]の画質80のWebP(1,390バイト)のほうが大きくなりました。

保存したWebPは、どう確認すればよいですか?

開き直して比べます。寸法が両方とも想定どおり(記事の練習画像では256×128px)で、想定外の拡大縮小がないか、透明の周囲に白などが焼き込まれていないか、半透明の境界、文字や輪郭・細線・色の境界・にじみを同じ倍率で比較します。透明の見え方は、白い背景だけでなく暗い背景でも確認します。WebPをブラウザーで開いて表示を確認した後、掲載先でも同じサイズで表示してください。Photoshopの画面上で元文書を見ただけでは、保存後の結果を確認したことになりません。

XMPやEXIFなどの情報は、どうすればよいですか?

XMP、EXIF、Photoshopエクストラの保存項目も確認します。実写真を公開する場合は、位置情報や連絡先などの内容を確認し、不要な項目を含めない設定にします。記事の架空の練習画像には、撮影者・位置情報は入れていません。

WebPが選べないときは、どうすればよいですか?

最初に、[書き出し形式]や[クイック書き出し]ではなく、[コピーを保存]を開いているか確認します。その画面でも候補がない場合は、RGB・8bitとバージョン23.2以降の条件を確認してください。保存できない場合は、別の自分の作業フォルダーと新しいファイル名でも試し、形式の問題と保存先の問題を分けます。23.1以前では、WebPShopなど追加の対応が必要です。導入前に、利用中の版と環境を確認してください。AVIFやJPEG XLはWebPとは別形式で、WebP対応からそれらの保存対応まで判断はできません。

記事は、実際のPhotoshopで確認されていますか? 最新はどこで確認しますか?

対応条件と保存経路は、2026年10月3日にAdobeのWebP公式資料で確認しています。

2026年10月16日に、Photoshop 27.11.0で、[劣化なし]と[劣化]の画質80で保存し、開き直して寸法・透明・色の差・サイズを確かめました。

16bitなどほかのモード、メタデータを含めた保存、暗い背景やブラウザー、掲載先での表示は確かめていません。

記事の練習画像は、Pythonで作成した入力データであり、Photoshopの書き出し結果ではありません。

戻す場合は、保存済みの元PSDまたは入力PNGを開き、変換前の文書からやり直します。

最新はAdobe公式のWebPの案内で確認してください。

次に学ぶ・作業環境を選ぶ

学習を続けたい方や、作業環境を整えたい方は、目的に合うガイドをご覧ください。

Photoshopのおすすめ書籍

動作要件とPCの確認項目

周辺機器の優先度

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次