MENU
  • 動画編集・映像制作
    • 動画編集の始め方
    • 動画編集スクール
    • 動画編集ソフト
    • Adobe Premiere Pro
  • 写真の撮り方
    • デジタルカメラ
    • 一眼レフの使い方
    • ストロボの使い方
    • 料理写真の撮り方
  • 画像編集
    • Luminar
    • Photoshop
    • Aurora HDR
    • 現像・画像編集ソフト
  • Adobe
  • 雑記
    • マネー
写真の撮り方や画像編集を解説
長谷川敬介 -カメラマン-
  • 動画編集・映像制作
    • 動画編集の始め方
    • 動画編集スクール
    • 動画編集ソフト
    • Adobe Premiere Pro
  • 写真の撮り方
    • デジタルカメラ
    • 一眼レフの使い方
    • ストロボの使い方
    • 料理写真の撮り方
  • 画像編集
    • Luminar
    • Photoshop
    • Aurora HDR
    • 現像・画像編集ソフト
  • Adobe
  • 雑記
    • マネー
ゼロからわかる【カメラ講座】全32話
  1. ホーム
  2. 画像編集
  3. Photoshop
  4. Photoshop CC2019「Web用に保存」「書き出し形式」の違いと比較

Photoshop CC2019「Web用に保存」「書き出し形式」の違いと比較

2022 5/08
Photoshop
2019年1月7日 2022年5月8日
長谷川敬介
Photoshop CC2019「WEB用に保存」「書き出し形式」の違いと比較

こんにちは!カメラマンの長谷川 (@ksk_photo_man)です!

学生時代からPhotoshopを触っていて、15年使い続けています。

Photoshopには、多くの保存方法があります。

この記事では、

カメさん

Photoshopで写真をWeb用に保存したいんだけど・・

カメさん

「Web用に保存」と「書き出し形式」ってどう違うの?!

っと悩んでいるあなたに、「Web用に保存」と「書き出し形式」の違いを比較しながらお伝えします!

Adobeフォトプラン

\ 7日間無料で楽しめる /

無料で体験する

【無料で始める】から7日間の無料体験

いつでも解約ができます

タップできる目次
長谷川 敬介

1984年生まれ。長野県出身。プロ歴5年・写真歴12年のカメラマン(料理撮影がメイン)。合同会社ケーエスの代表。

» プロフィール詳細

Photoshopの「Web用に保存」と「書き出し形式」とは

Photoshop CC2019「WEB用に保存」と「書き出し形式」とは

Photoshopで写真をWeb用に保存方法は、3つあります。

  1. Web用に保存
  2. 書き出し形式
  3. クイック書き出し

「Web用に保存」は昔からある保存方法なので、Photoshop歴が長い方にとっては馴染みのある保存方法です。

アドビの公式ブログによると、この「Web用に保存」は、WEB向けの画像作成に特化した「Adobe ImageReady(アドビ イメージレディ)」から引き継いだ機能とのこと。(現在は販売終了)

ただこの機能で使っていたコードは古いものとなってしまったそうな。

1999年に販売したPhotoshop 5.5に「Web用に保存」が搭載されましたが、これはImageReady(現在は販売終了)から移植された機能です。高画素の写真をWeb掲載するために最適化したり、アニメーションGIFを作成したり。ただ、新しい機能を開発するにあたって、このコードは古いものとなってしまいました。

引用:Adobe公式ブログ

一方「書き出し形式」は、Photoshop2015から実装された書き出し方法です。

「書き出し形式」の特徴は、「SVG」でも保存できることです。

また、「Webに保存」を使った場合よりも、ファイルサイズが半分になる・・・こともありそうです。

JPEG圧縮技術自体も向上し、JPEGの最高画質を選択した時、従来の「Web用に保存」と比較して、最終画像が半分のファイルサイズになる場合もあります。(これは写真によって結果が異なることは事前に了承ください)

引用:Adobe公式ブログ

保存方法

【Web用に保存】

  1. ファイル>書き出し>WEB用に保存

【書き出し】

  1. ファイル > 書き出し > 書き出し形式
  2. レイヤーパネルで書き出したいレイヤー上で「右クリック」 > 書き出し形式

ファイルサイズについては、実際に試してみた結果を本記事後半でお伝えします。

長谷川敬介

「クイック書き出し」は、別記事でお伝えしています。

目次に戻る

「Web用に保存」と「書き出し形式」の違い

●「Web用に保存」と「書き出し形式」のウィンドウパネル

Photoshop CC2019「WEB用に保存」と「書き出し形式」の違い
Web用に保存
Photoshop CC2019「WEB用に保存」と「書き出し形式」の違い
書き出し形式

「プレビューの拡大・縮小/ファイル設定/画像サイズ変更/メタデータ/色空間情報」は、どちらにも共通する機能です。

選べるファイル形式は、「Web用保存」が

  1. PNG
  2. JPEG
  3. GIF

に対して、「書き出し形式」は、

  1. PNG
  2. JPEG
  3. GIF
  4. SVG

です。

SVGで保存したい場合は、「書き出し形式」を使いましょう!

ではもう少し詳しく、「Web用に保存」と「書き出し形式」の違いを見ていきましょう。

「Web用に保存」は、一目で写真の比較ができる

「WEB用に保存」は、一目で写真の比較ができる

「Web用に保存」画面の上部で、「2アップ」「4アップ」などタブを選択できます。

「2アップ」だと、元画像と変更後画像の2枚を一目で比較できます。

「WEB用に保存」は、一目で写真の比較ができる
長谷川敬介

画質の変化がわかるので便利です。

「書き出し形式」では一度に複数の写真が保存できる

「書き出し形式」では一度に複数の写真が保存できる

「書き出し形式」パネル内の左上に「すべての拡大・縮小」の項目があります。

ここでは、大きさ違いのファイルを一度に保存することができます。

例えば、「1x」「0.75x」「0.5X」の3つを作っておいて保存すると、

「書き出し形式」では一度に複数の写真が保存できる

一度に大きさ違いの3つのファイルを作成することができます。

今回は、

  • 変更なし:1200×800pixel
  • @0,5x :600×400pixel
  • @0,75 :900×600pixel

の3つのファイルが作成されました!

「書き出し形式」では一度に複数の写真が保存できる

また接尾辞に文字を入力すると、元のファイル名の後ろに文字を加えて保存することができて便利です。

「書き出し形式」では一度に複数の写真が保存できる
「書き出し形式」では一度に複数の写真が保存できる
目次に戻る

「Web用に保存」と「書き出し形式」のファイルサイズを比較

次は、ファイルサイズの比較をして見ます。

公式ブログをみると、ファイルサイズは「書き出し形式」の方が小さくなると書いてあります。

実際はどうなるのでしょうか?

比較してみました。

設定
  • ファイル形式:JPEG
  • 圧縮率:80
長谷川敬介

ここでは、「WEB用に保存」を「旧」、「書き出し形式」を「新」と表記します!

「WEB用に保存」と「書き出し形式」のファイル容量を比較
「WEB用に保存」と「書き出し形式」のファイル容量を比較
「WEB用に保存」と「書き出し形式」のファイル容量を比較
「WEB用に保存」と「書き出し形式」のファイル容量を比較
「WEB用に保存」と「書き出し形式」のファイル容量を比較
「WEB用に保存」と「書き出し形式」のファイル容量を比較
元画像WEB用に保存書き出し形式
青空603 KB208 KB211 KB
レンズ606 KB238 KB242 KB
星空1.2MB526 KB520 KB
長谷川敬介

「書き出し形式」の方が若干重い・・・

長谷川敬介

「書き出し形式」の方が軽い時もあるんだよね・・・きっと!

目次に戻る

まとめ

以上、「WEB用に保存」と「書き出し形式」の違いを比較しながらお伝えしました。

この結果をファイルサイズだけ見ると、「WEB用に保存」と「書き出し形式」どちらでもいい気がしてきますが・・

「書き出し形式」の方が新しいのでいいんですよ!きっと!

Adobeフォトプラン

\ 7日間無料で楽しめる /

無料で体験する

【無料で始める】から7日間の無料体験

いつでも解約ができます

Photoshop
よかったらシェアしてね!
  • URLをコピーしました!
  • 画像ファイル形式の違い!Photoshopを使うなら覚えておこう
  • Photoshop2019アートボードを使ってみよう!

関連記事

  • Photoshop 2022の新機能!「風景ミキサー」の使い方
    2022年5月8日
  • 【Photoshop・Luminar 4】曇り空を青空にするレタッチ方法
    【Photoshop・Luminar 4】曇り空を青空にするレタッチ方法
    2022年5月8日
  • Photoshop-Elements使い方
    【演習つき】Photoshop Elements(フォトショップ エレメンツ)の使い方
    2022年5月10日
  • 【Photoshop】写真をセピア調にする3つのやり方
    【Photoshop】写真をセピア調にする3つのやり方
    2022年5月8日
  • 【Photoshop】シェイプツールの使い方
    【Photoshop】シェイプツールの使い方
    2022年5月8日
  • 【Photoshop】クリッピングマスクの使い方
    【Photoshop】クリッピングマスクの使い方
    2022年5月8日
  • Photoshopでグリッドを表示・設定変更の方法
    【Photoshop】グリッドを表示・設定変更の方法
    2022年5月8日
  • Photoshopのラスタライズってなに?
    Photoshopのラスタライズってなに?
    2022年5月8日

コメント

コメントする コメントをキャンセル

長谷川 敬介
カメラマン
プロ歴5年・写真歴12年のカメラマン。

合同会社ケーエス代表

広告写真スタジオを経て独立。2022年2月に合同会社ケーエスを設立。
プロフィール
当サイトの引用について

当サイトはリンクフリーです。記事本文・画像を引用した場合、リンクを貼っていただければ問題ございません。また、当サイトを引用した記事はTwitterで拡散することも可能です。ご希望の方は、TwitterのDMまでご連絡ください

この記事の目次
人気記事
  • 写真編集ソフトおすすめランキング
  • Adobe CCを安く買う方法!アカデミック版が格安
  • カメラのサブスク(月額・定額制)を比較
  • 動画編集・動画制作おすすめオンラインスクール【社会人向け】
オススメ画像編集ソフト
  • Luminar AI(ルミナー エーアイ)
  • Lightroom(ライトルーム)
  • Photoshop(フォトショップ)
  • PhotoDirector(フォトディレクター)
  • SILKYPIX Developer Studio Pro10
  • Zoner Photo Studio X
運営メディア
  • ウチジム
  • ミールデリ
  • 合同会社ケーエス
  • 運営者情報
  • サイトマップ
  • プライバシーポリシー
  • サイトポリシー
  • 特定商取引法に基づく表記
  • お問い合せ

© 2021 長谷川敬介

タップできる目次