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として保存します。

オプションは[可逆]を選びます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

確認範囲と公式資料

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

Photoshop実機での保存と再読込、透明・画質の比較は未検証です。

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

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

Photoshopのおすすめ書籍

動作要件とPCの確認項目

周辺機器の優先度

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