フォトショップ エレメンツ ビギナーのために
                        Windows編

Web用に保存

ホームページ作成において掲載写真の各種画像編集が必要になります。 当サイトでは、PhotoshopElements初心者を対象として ホームページ作成・運営で必要な各種画像編集を中心とした操作を紹介します。

WEB用に保存 − 概要



『ファイルの保存』とは、オリジナル画像に対してサイズ縮小、補正などの各種画像編集を行い、
その補正結果を元の場所(フォルダーなど)あるいは別の場所に書き戻すことです。

フォトショップエレメンツの保存には、次の2種類があります。

@ 「別名にて保存」 あるいは 「保存」
   JPEG形式では画質を指定し保存します。またPhotoshop形式(*.psd)でも保存でき、あとの修正作業を楽に行えます。

A 「WEB用に保存」    画像サイズの縮小およびWEB用として最適化され保存されます。保存時の画質調整で表示画質、ファイル容量を確認しながら作業を進めることができます。

この 『WEB用に保存』 のページでは、WEB用保存の操作、および画質について説明します。

  <説明項目>
   @ Web用に保存 − 操作方法
   A Web用に保存する時の表示画質と容量について (参考)
   B 「保存、別名による保存」 と 「Web用に保存」 の表示画質とファイル容量について (参考)

■ 「WEB用に保存」のイメージ ■


オリジナル画像 画像サイズ3264×2488

画像サイズ縮小
最適化・保存

最適化後画像ファイルの保存
画像サイズ400×300

※操作方法の説明では、オリジナル画像(画像サイズ3264×2488)をWeb用に保存、
また保存時に画像サイズを400×300に縮小する操作を説明します。

※オリジナル画像をダウンロードすることができます。 ダウンロードし 「操作方法」 に従い操作を試してみてはいかがでしょうか。
この「Web用に保存」 のページでは、画質設定値(後述)を実際に変化させ表示画質、ファイル容量の違いを試すことができます。

なおダウンロードはオリジナル画像をクリックすると画像イメージが表示され、表示画像内を 「右クリック」 するとダウンロードできます。
また画像サイズは、1024×768に縮小してあります。



Web用に保存 − 操作方法


1. 画像を開く

ファイルの開き方は、「 ファイルを開く 」を参照ください。



例では、オリジナル画像 (画像サイズ3264×2448)を開きます。
2. オリジナル画像の表示
オリジナル画像の表示
オリジナル画像の表示
オリジナル画像(画像サイズ3264×2448)が、
表示倍率 25% で表示されています。
なおオリジナル画像サイズが異なれば表示倍率も変わります。

3. 「Web用に保存」の選択
Web用に保存
Web用に保存の選択
メニューバーから『ファイル』 → 『Web用に保存』 を選択します。

上記選択すると『注意』のダイアログが表示される場合があります。

これは画像サイズが大きい場合に「処理速度の低下に注意」のメッセージです。
処理速度の低下に注意
処理速度の低下注意のダイアログ
このダイアログが表示された時、画像表示などの処理時間がかかります。

御自身のパソコン性能(メモリ、CPU性能等)を考慮して続行するか、中断するかを決めましょう。

中断する場合には、予め 画像サイズを縮小(保存の必要なし) しておくことにより 「Web用に保存」 機能を使用できます。
4. 「Web用に保存」ダイアログの表示
『Web用に保存』ダイアログボックス
『Web用に保存』ダイアログボックス
『Web用に保存』ダイアログが表示されます。
このダイアログでWeb用ファイルの最適化設定をします。

■ 元の画像
最適化前の画像が表示されます。
この例ではオリジナル画像が表示倍率100%で表示されます。
また表示画像の左下にファイル容量が表示されます。

■ 最適化後の画像
Web用に最適化された後の画像が表示倍率100%で表示されます。
この画像表示にて画質の変化を確認できます。

■ ファイルの形式、画質の設定
  最適化後のファイル形式(JPEG,GIF等)、画質(JPEGでは、低画質〜最高画質等の設定)を設定します。
  プリセット値設定、個別設定(ファイル形式、画質、画質の詳細)が用意されています。

■ 画像サイズの変更
  画像サイズを縮小する時に設定します。

■ ファイル容量の表示
  最適化後のファイル容量が表示されます。Web用画像、メール添付画像等でファイル容量の制限等がある場合には
  このファイル容量表示を参考に画質を調整することができます。

■ ブラウザの表示
  最適化後の画像をブラウザにより表示確認できます。

■ ズーム
  元の画像、最適化後の画像表示を縮小表示、拡大表示させることができます。

5. 画像サイズの縮小 (画像サイズを縮小する時に設定)
画像サイズの変更
画像サイズの変更
画像サイズを縮小する時に設定します。

@「縦横比を固定」 にチェックを入れます。

A「変更後のファイルサイズ」の 「幅」 あるいは 「高さ」 のいずれかに縮小後のpixel値を指定します。
B「適用」 ボタンをクリックします。 これで「最適化後の画像」欄(画面の真ん中)に縮小後の画像サイズで表示されます。

この例では、画像サイズの幅を400pxを設定し、「適用」 をクリックします。高さ300pxは自動表示されます。
画像サイズの縮小後
縮小後の画像サイズで表示
「元の画像」、「最適化後の画像」ともに画像サイズが縮小されたイメージで表示倍率100%で表示されます。
6. ファイル形式、画質の設定

  ファイル形式、画質の設定を行います。
  設定方法としては、 個別設定の方法とプリセット値使用による方法の2通りがあり、
  最適化後の確認で調整が必要な場合には通常前者の方法(個別設定の方法)で
  画質調整します。

 (1) ファイル形式、画質を各々設定する場合 (個別設定値の使用)
ファイル形式の設定
ファイル形式の設定
ファイル形式を設定します。

JPEG:写真など連続した階調を持つ画像の保存に使用します。

GIF: イラストなど最大256色までの画像保存時に使用します。

例では写真画像のため 「JPEG」を設定します。
画質の設定
画質の設定
ファイル形式により画質設定が異なります。
JPEG形式について説明します。

画質は、「低画質」〜「最高画質」プリセット値あるいは
その右にある 「画質」0〜100(圧縮率?)でも設定します。 この両者は連動しており、最適化後の確認で調整が必要な時にも使用します。

<プりセット値> <画質>
 低画質       10
 中画質       30
 中高画質      60
 高画質       80
 最高画質     100


この画質の設定基準はなく、その画像の用途・容量の制限等により画質を設定する必要があります。
最適化後の表示画質、ファイル容量を参考として設定してください。。

<参考>

■表示画質を良くする時

画質を上位レベルに設定します。
 ・低画質→中画質→中高画質→高画質→最高画質 もしくは
 ・もしくは画質(詳細0〜100)の値を大きくします。

ただしファイル容量が大きくなります。

■ファイル容量を小さくする時

画質を下位レベルに設定します。(上記表示画質を良くするの逆方法)
ただし表示画質が劣化します。

例では 「高画質」 を設定していますが、最適化後の表示画質、ファイル容量から「中高画質」が良いようです。
画質サンプルを後述します。

 (2) ファイル形式、画質を同時に設定する場合 (プリセット値の使用)
ファイル形式、画質の設定
ファイルの形式、画質の設定
プリセットによりファイル形式と画質を合わせて設定します。

「プリセット」右の▼印をクリックするとファイル形式、画質の一覧が表示されます。

<プリセット値> <画質>
JPEG 高    60
JPEG 中    30
JPEG 低    10
7. 最適化後の表示確認
最適化後の表示
最適化後の表示確認
ファイル容量、表示画質を確認します。

ファイル形式、画質が設定されるとその都度設定に従い「最適化後の画像」が表示されます。
また画像の左下には最適化後のファイル容量が表示されます。
表示された画質、容量で良いかをか確認します。

画質、ファイル容量が期待値と違う場合には 項番6にて画質を再設定し調整します。

画質サンプルを後述します。
8. 画像ファイルの保存指示
保存の支持
最適化後のファイル保存指示
最適化後のファイルを保存します。

「OK」 をクリックします。 OKをクリックすると 「最適化後ファイルを別名で保存」ダイアログが表示されます。
9. 保存先の設定、保存
保存先
「最適化後ファイルを別名で保存」ダイアログ
保存先を設定します。

「最適化後ファイル」の保存用フォルダーとファイル名称を設定し、 「保存」 ボタンをクリックします。
これで 「Web用に保存」ダイアログが閉じられて、Web用の画像ファイルが保存されます。

※オリジナル画像ファイルへの上書きは避け,別ファイルとして保存することをお勧めします。
JPEGファイルは、保存する毎に画質劣化が進みます。再度、画像の補正等がある時にはオリジナル画像を使用することをお勧めします。
警告メッセージ
警告メッセージ
保存時に次のメッセージが表示される場合があります。

「ファイル名に使用された2バイト文字は・・・」

このメッセージは、保存用のファイル名、フォルダー名,上位のフォルダー名(パス名のいずれか)に2バイト文字(漢字)が含まれている時に表示されます。メッセージを確認し「OK」をクリックします。

※ファイル名およびフォルダー名が1バイト系文字でも、かなりの確立で上記メッセージが表示されるでしょう。。。。きっと!。
パス名とは、ファイルの存在位置を表す名前の様なもので、ファイル名をフォルダー(ディレクトリ)階層毎の名称で表します。。。表現が難しい!。
ユーザー名(Windows起動時に選択する名前)が2バイト文字(漢字)の時、さらにファイルをマイドキュメントやデスクトップ上に作成した場合です。
マイドキュメントやデスクトップ上のファイルは、通常Cドライブ(ハードディスク)の「ユーザ名」のフォルダー内に作成されます。
ファイル名が、1バイト系文字でも上位のフォルダー(ユーザー名)が2バイト系文字のためメッセージが表示されます。

※ファイルの保存先名を漢字が含まないパス名に変更すると表示されません。
具体的にはCドライブ直下もしくは別ドライブにファイルを作成すれば表示されません。

Web用に保存する時の表示画質と容量について (参考)

ここでは、オリジナル画像(3264×2448 5.74MB)から画像サイズ400×300のWeb用に縮小、保存する時の設定画質値と表示画質およびファイル容量の関係をサンプルで説明します。

なおここでの説明は、オリジナル画像の被写体(カラー情報等)、画像サイズ、画質等により異なった結果になります。
あくまでも参考としてご覧ください。

<Web用保存時の画質設定とファイル容量>

設定画質 設定画質(詳細) ファイル容量 備考(表示画質のコメント)
低画質 10 9.6KB 画質の劣化が目立つ 容量が高画質の5分の1
中画質 30 15.3KB 若干画質の劣化が見られる
中高画質 60 28.9KB 画質問題なし
高画質 80 47.7KB 画質は問題なし 容量が中画質に比べて3倍大きい

Web用に保存する時の 「画質」 設定値をいくつにするかの一般的な妥当値を挙げることはできません。
このサンプル画像の表示画質だけを見れば 「中高画質」になるでしょうけど。
しかし、その画像の用途により画質優先、容量優先、画質容量共に優先、あるいは共に無視等いろいろな選択肢があるでしょう。
この「画質」 設定値は、「最適化後の画像」表示イメージとファイル容量により判断してください。

以下に画像サンプルを示します。

<Web用保存時の画質設定と表示画質>

   ■ 低画質(画質:10)でWeb用に保存した時
低画質
低画質
低画質 (画質:10)
ファイル容量  9.6kb

画質が劣化していますが、容量は小さくなっています。
空にはブロックノイズが、自転車・標識の輪郭にはモスキートノイズが目立っています。


低画質
200%拡大表示


   ■ 中画質(画質:30)でWeb用に保存した時
中画質
中画質
中画質 (画質:30)
ファイル容量 15.3kb

画質が若干劣化しています。
空には若干ブロックノイズが、自転車・標識のにも若干モスキートノイズが見えています。


中画質
200%拡大表示


   ■ 中高画質(画質:60)でWeb用に保存した時
中高画質
中高画質
中高画質 (画質:60)
ファイル容量 28.9kb

画質は問題ないようです。





中高画質
200%拡大表示


   ■ 高画質(画質:80)でWeb用に保存した時
高画質
高画質
高画質 (画質:80)
ファイル容量 47.7kb

画質は問題ないようです。
しかしファイル容量が中画質の3倍です。




高画質
200%拡大表示

※ ブロックノイズ・・・画像がモザイク(ブロック)状に見えるノイズ
※ モスキートノイズ・・・画像のエッジ(輪郭部分)や色の変化が激しい部分に起こるノイズ

 「保存、別名による保存」 と 「Web用に保存」 の表示画質とファイル容量について (参考)

ここでは、オリジナル画像(3264×2448 5.74MB)から画像サイズ350×263に縮小し、
保存する時の方法を 「別名による保存」 と 「Web用に保存」 の二通りで保存した時の
ファイル容量の違いをサンプル画像で説明します。

なおここでの説明は、オリジナル画像の被写体(カラー情報等)、画像サイズ、画質等により異なった結果になります。
また 「別名による保存」 と 「Web用に保存」 の設定画質の基準値が不明なための本来単純比較はできませんが、あえて比較してあります。
あくまでも参考としてご覧ください。

< 「別名による保存」 と 「Web用に保存」 のファイル容量の違い >

別名による保存時の
設定画質
ファイル容量 Web用に保存時の
設定画質
ファイル容量 備考(表示画質のコメント)
低(高圧縮率)
49.3KB 低画質
10
7.5KB 共に画質の劣化が目立つ

53.3KB 中画質
30
11.9KB 若干画質の劣化が目立つ 特にWeb用保存
Web用保存の容量は約5分の1

61.5KB 高画質
80
37.0KB 共に画質問題なし
Web用保存の容量は約2分の1強
最高(低圧縮率)
10
76.8KB 最高画質
100
74.4KB 共に画質問題なし

「別名による保存」 と 「Web用に保存」 の表示画質は、共に同じ傾向がみられます。
しかしファイル容量については、 「Web用に保存」の方が明らかに小さくなっています。
おそらく 「Web用に保存」 では、モニター表示を前提とした最適化が行われているためでしょう。

< 「別名による保存」 と 「Web用に保存」 の表示画質と容量 >

<左の列>
・「別名による保存」

<右の列>
・「Web用に保存」


画質 3 低(高圧縮率)  容量49.3KB

画質 10 低画質  容量 7.5KB

画質 5 中  容量53.3KB

画質 30 中画質  容量 11.9KB

画質 8 高  容量61.5KB

画質 80 高画質  容量 37.0KB

画質 10 最高(低圧縮率) 容量76.8KB

画質 100 最高画質  容量 74.4KB


< まとめ  と  編集後記 2008/02/05 >

画像サイズ縮小、トリミングなどの画像編集は、サイト掲載、メール添付等では大切な作業です。
この大切な画像編集の締めくくりが 「保存」 作業です。

この 「保存」 作業においてミスをすると、例えば 「画質を劣化させすぎた!」 「ファイル容量が大き過ぎる!」 など、
それまでの画像編集作業が無意味になってしまう場合があります。

このページで紹介している 「Web用に保存」 では表示画質、ファイル容量を確認しながら作業することができます。
またWeb用画像として最適化が行われファイル容量の縮小化がされています。

次の様な画像用途の時、画像編集後の保存方法を 「保存、別名により保存」 ではなく 「Web用に保存」 を使用することにより
ファイル容量、表示画質の両面で良い結果を得られるのではと思っています。

■Webサイトへの掲載画像
 特に掲載画像枚数の多い写真系サイト、壁紙配布サイトなど
■メール添付の画像
■画像掲示板(容量制限あり)への投稿画像
■携帯電話用Webサイトへの掲載画像