Photoshop画像保存機能まとめ - AVIF・WebPの書き出し方法、書き出し形式とWeb用に保存の違い

4月23日メンテナンス済み / 株式会社 ICS

Photoshop

みなさんはAdobe Photoshopでどのように画像を書き出していますか？　最新のPhotoshopではさまざまな画像書き出し機能が搭載されていますが、どれを選択するかで手間が異なります。本記事ではPhotoshopのさまざまな画像書き出し機能を紹介し、最適な画像書き出し方法を検証します。

ウェブ用の画像形式としては、JPEGやPNGだけでなく、AVIFエーブイアイエフやWebPウェッピーも選択肢に入ります。新しく画像を書き出すなら、WebPではなく、まずAVIFを選びましょう。AVIFは本記事で扱う形式のなかでも新しく、画質とファイルサイズのバランスに優れています。

この記事はPhotoshop 2026（バージョン27.5.0）で検証しています。

この記事のポイント

新しい画像保存方式（書き出し形式、クイック書き出し）は手間が少ないので、作業効率が良い
ウェブ用の画像形式にはAVIFがおすすめ
アニメーションGIF保存は「Web用に保存」を使う

Photoshopの画像書き出し方法一覧

Photoshopにおいて、画像を書き出す方法は大きく5種類あります。

コピーを保存…

メニューバーより［ファイル］→［コピーを保存…］を使います。一般的なAVIF・WebP・JPEG・PNGなどは［フォーマット］プルダウンから選択できます。

通常の［保存］と［コピーを保存…］の違いについて、［保存］はレイヤーなどの編集情報を保持するPhotoshop形式で保存するときに使います。AVIFやWebPなどの画像形式で保存したい場合は、［コピーを保存…］を選択します。

書き出し形式

メニューバーより［ファイル］→［書き出し］→［書き出し形式］より実行できます。

画質の設定や最適化が行える画像書き出し機能です。画像サイズや画質を確認しながら保存できるため、ウェブ用のJPEG画像やPNG画像を作成するときに便利です。

アートボードやレイヤーごとの画像書き出しにも対応しています。複数のアートボードを作成している場合や、レイヤーごとに素材を書き出したい場合に使いやすい機能です。

クイック書き出し

あらかじめ保存しておいた設定を使って、画像を書き出します。前述の書き出し形式と違って書き出すまでに表示されるダイアログが少ないため、素早く画像を書き出すことができます。

メニューバーより［ファイル］→［書き出し］→［〜としてクイック書き出し］より実行できます。

どのファイル形式で書き出すかの設定はメニューバーより［Photoshop］→［環境設定］→［書き出し］①→［クイック書き出し形式］②より指定します。

毎回同じ形式で画像を書き出す場合は、クイック書き出しが便利です。SNS投稿用の画像など、決まった設定で繰り返し保存したい場面に向いています。

Web用に保存

古くから存在するウェブ用画像の書き出し方法です。メニューバーより［ファイル］→［書き出し］→［Web用に保存］で実行できます。

画質の設定や最適化等の設定を詳細に行うことができます。アニメーションGIFを書き出せることが特徴です。大昔の機能の「スライスの書き出し」もできます。

画像アセットの抽出

レイヤーに更新があるたびに、自動で画像が書き出される機能です。メニューバーの［ファイル］→［自動処理］→［ジェネレータープラグイン］→［画像アセット］を選択することで有効化できます。レイヤー名に.png等の名前を指定することで、自動的に画像が書き出されるため、手間が少ない書き出し方法です。

画質の設定、レスポンシブウェブデザイン向けの画像サイズ指定など、細かな設定も可能。詳しくは記事「Photoshop CCの『画像アセット』」を参照するとよいでしょう。

ウェブ用の画像形式はAVIFを選ぼう

ウェブ用の画像形式は、AVIFがおすすめです。AVIFは主要なブラウザーが対応している新しい画像形式です。JPEGやPNGよりもファイルサイズを小さくしやすく、見た目の品質も保ちやすいことが特徴です。

AVIF画像形式はChrome 85（2020年8月）・Edge 121（2024年1月）、Safari 16.0（2022年9月）、Firefox 93（2021年10月）以上で利用できます。

参考：『Can I use...』

写真、メインビジュアル、アイキャッチ画像、バナー画像など、容量が大きくなりやすい画像ではAVIFの効果を得やすいです。ページに表示する画像の容量を減らせると、表示速度の改善にもつながります。

WebPも全ブラウザーが対応しており、JPEGやPNGより容量を抑えやすい形式です。ただ、画質とファイルサイズのバランスが難しく、期待したほど効率のよい形式ではありません。記事『画像圧縮するベストな方法（2025） #OpenCV - Qiita』で徹底的に検証されていますが「WebPは言うほど良くないということもわかります」と言及されています。

JPEGとPNGも引き続き使います。JPEGは写真の汎用形式として扱いやすく、PNGは透過画像やロゴ、UIパーツの保存に向いています。新規のウェブ制作ではAVIFを第一候補にし、必要に応じてJPEG、PNGを使い分けるのがおすすめです。

画像形式	向いている用途	特徴
AVIF	写真、アイキャッチ画像、メインビジュアル、バナー画像	画質とファイルサイズのバランスに優れた新しい形式
WebP	写真、バナー画像、透過画像	やや古めの軽量な形式
JPEG	写真、グラデーションの多い画像	汎用性が高く、扱えるツールが多い
PNG	ロゴ、アイコン、UIパーツ、透過画像	透過画像を扱いやすい
GIF	簡単なアニメーション	色数の少ないアニメーション画像に向いている

逆にやってはいけないパターンとしては以下が挙げられます。

【NG】写真なのに、PNG形式を採用
- 理由：AVIFやJPEGにすれば容量を大きく削減できます。
【NG】色数の少ないイラストなのに、JPEG形式を採用
- 理由：JPEGは圧縮ノイズが発生するため、PNGを使う方が無劣化の結果が得られます。もしくはAVIFをロスレス保存するほうが適切です。
【NG】背景透過の画像なのに、JPEG形式を採用
- 理由：JPEGは透過を扱えないため。AVIFかWebPを使いましょう。

ウェブサイトに画像を配置する方法

AVIFやWebPを使う場合も、HTMLでは通常のimgタグで指定できます。

<img src="images/main-visual.avif" alt="" width="1200" height="800" />

古いブラウザーまで対象にする案件では、pictureタグで複数の形式を指定する書き方もあります。

<!-- ブラウザのサポート状況で出し分ける、古い時代のコード -->
<picture>
  <source srcset="images/main-visual.avif" type="image/avif" />
  <source srcset="images/main-visual.webp" type="image/webp" />
  <img src="images/main-visual.jpg" alt="" width="1200" height="800" />
</picture>

ただし、現在はAVIFもWebPも主要なブラウザーで表示できるため、新規制作ではAVIFをimgタグで指定するのが適切です。

書き出す手間が少ないのはどれか？

さて、上記で紹介した方法のうち、書き出す手間が少ない方式はどれでしょうか？　最新のPhotoshopの画像書き出しでは、アートボード別やレイヤー別に画像を切り出すことが可能です。

また、「クイック書き出し」や「画像アセット機能」などは書き出しまでのダイアログ表示回数も少なく、素早く画像が得られます。とくに、「画像アセット機能」はレイヤーの更新のたびに画像が自動で書き出されるため、書き出す手間がもっとも少ないと言えるでしょう。

書き出し方法	全体書き出し	レイヤー別書き出し	ダイアログ数	画像更新時の手間
書き出し形式	○	○	2	多い
クイック書き出し	○	○	1	多い
画像アセット機能	○	○	0	無し（自動）
Web用に保存	○	×	2	多い
コピーを保存	○	×	2	多い