WebPは、JPEGやPNGに比べて画像ファイルの容量を小さくしやすく、Webサイトの表示速度の改善にも役立つ画像フォーマットです。
以前は対応していないブラウザもありましたが、現在ではGoogle Chrome、Microsoft Edge、Firefox、Safariなどの主要ブラウザがWebPに対応しており、2026年6月時点では世界のブラウザ利用の約96％がWebPをサポートしています。
そのため、Webサイトに掲載する画像をWebP形式で用意することも、現在では一般的な選択肢のひとつになっています。
この記事では、Adobe Photoshop（アドビ・フォトショップ）とAdobe Illustrator（アドビ・イラストレーター）を使って、Webサイトで使用する画像をWebP形式で書き出す方法を紹介します。
フォトショップでのWebP保存
フォトショップではWebPファイル形式で書き出すことはできませんがWebP形式での保存をすることでWebPファイルを作成することができます。
上部メニュー ファイル ＞コピーを保存
「ファイルの種類」をWebPにします。
WebPオプションウィンドウが開くので
画像圧縮
- 劣化なし
- 劣化…画質を0～100（低圧縮率）の範囲で指定できます。
メタデータを含めるかなども設定できます。
※画像のサイズなどを指定して設定することはできないので、書き出したいサイズに修正してから書き出すことになります。
イラストレーターでのWebP書き出し
上部メニュー ファイル ＞書き出し
- スクリーン用に書き出し
- 書き出し形式
以上の二つのメニューでWebP書き出しが出来ます。
❶スクリーン用に書き出し
スクリーン用に書き出しのウィンドウが開きます。サイズなども指定でき細かく設定できます。
名前変更
書き出し用ウィンドウの左側のアートボードタブに
アートボードなど仮の名前が入っているのでそこをダブルクリックすると名前を変更できます。
書き出し先
書き出し先フォルダの指定ができます。
サブフォルダーを作成するかしないかを選べます。
フォーマット
- 拡大・縮小…サイズを何倍にするか、または幅や高さでサイズを指定できます。
- サフィックス…ファイル名につけるサフィックスを決められます（空欄にもできます）
- 形式…ファイル形式でWebPを指定できます。
フォーマットの右の歯車アイコンから画質なども設定できます。
画像圧縮
- 可逆圧縮
- 非可逆圧縮…画質を0～100の範囲で指定できます。
オプション
- アンチエイリアス…アートに最適/文字に最適/なし
- 背景色…透明/ホワイト/ブラック…など
メタデータを含めるかなども設定できます。
書き出し
アートボードを書き出し で書き出すことができます。
❷書き出し形式
「ファイルの種類」をWebPにします。
WebPオプションウィンドウが出るので
画像圧縮
- 可逆圧縮
- 非可逆圧縮…画質を0～100の範囲で指定できます。
オプション
- 解像度
- アンチエイリアス
- 背景色
メタデータを含めるかなども設定できます。
