画像A ホームページやブログなど、インターネットで利用するための画像の保存には「Web用に保存」が便利。

●「Web用に保存」とは

　　Photoshopでも同様ですが、Photoshop Elementsでも画像保存のコマンドはいくつか用意されています。その中のひとつにインターネット用の画像を保存するコマンドと画面が専用に用意されていて、素の画像形式がどんなものであっても、Photoshop Elementsに呼び出したり、加工した画像をJPEG、GIF、PNG形式で保存するのにとても便利ツールとなっています。
　その画面は、メニューバーから「ファイル」→「Web用に保存」をクリックすると表示します。

　「Web用に保存」は、WebデザイナーやWeb開発者にとって便利なように、大きく分けて3つの大きな利点が特長となっています。

1.保存先(フォルダ)をひとつに固定できる
「Web用に保存」では前回保存先に指定したフォルダが初期(デフォルト)の保存先フォルダとしてセットされます。
撮影した画像や素材集など、一般に画像ファイルはハードディスク内に点在していると思います。様々なフォルダから画像をPhotoshop Elementsに呼び出し、加工して保存するときには決まったフォルダ(インターネット用の画像フォルダなど)に保存したい、というニーズにぴったりです。

画像B いろいろなフォルダから画像を呼び出し、「Web用に保存」で決まったフォルダに保存するのが便利な利用方法です。

2.編集中の画像をそのまま保存するのではなく、別ファイルとして保存する
Photoshop Elements画面に呼び出して編集したファイルは、素のフォルダにPhotoshop形式(.PSD)で保存すると便利です。Photoshop形式ではレイアーや文字入力などを情報がそのままの状態で保存されていますので、後から修正が発生した場合にも、Photoshop形式のファイルを呼び出して編集し、再びインターネット用の画像として所定のフォルダにJPEGやGIFで上書き保存すればよいのです。

3.保存する際にJPEGやGIFの画質調節ができる
JPEGやGIFは、さまざまな画質や形式で保存することができます。「Web用に保存」では「プリセット」欄で保存するファイル形式と画質が選択ができるほか、画像の大きさを変更することができます。

画像C 「Web用に保存」ではプリセットで、6種類の画質のGIFと、3種類のJPEG、2種類のPNGを選択することができます。 また、画像の大きさも変更できます。

画像E 「プリセット」を変更し、表示された画質の違いや容量サイズなどを見比べて選択します。この画像の場合、GIFの32色でも十分に表現できます。128色で保存したときと比べ40%も容量を小さく保存できます。 画像F ダウンロード時間の目安を算出する素となる回線速度を選択することができます。 画像G 更に色数を細かく調整したいときは「カラー」欄の「▼」をクリックして色数を指定します。画面例は4色を指定していますが、これではグラデーションを表示することが困難です。

●最適な色数と容量の関係

　さて、GIFです。本名をグラフィックス・インターチェンジ・フォーマットといいます。画像をGIFで保存する場合、容量を決めるのは画像サイズと色数です。前回も解説しましたが、GIFは8ビット(256色)がカラー表現の最大となっていて、使用するカラーパレットの色数を増やせば容量が大きくなり、色数を減らせば容量が小さくなります。

　「Web用に保存」の「プリセット」欄でGIFの画質の選択ができます。Photoshop Elementsでは、選択した形式と画質では、どのように保存されるか、素画像との比較が画面に表示されるとともに、保存ファイルの容量の目安も表示されます。

　例えば、画面Dの例では「GIFの128 ディザあり」と「GIFの32 ディザなし」を選択した画像を比較してみましょう。画質としてはほとんど違いは分かりませんので、128色は贅沢で32でもほぼ変わらず表現できていると言えます。一方、画像ファイルの容量サイズを見ると、128が12.48kに対して、32では7.379kとなっていて、約60%の容量で表現できる…40%節約できる、ということになります。

　ちなみにディザとは、ディザ法による階調表現の技法のことです。隣接した異なるカラーから、中間カラーを様々な階調で表示させることができます。

　もうひとつ面白い機能としてこの画面で画質調整した状態の画像をInternet Explorerなどウェブブラウザでプレビュー表示して確認する方法があります。画面下の「プレビュー」ボタンのマークをクリックしてみましょう。このときブラウザの背景として表示されるのは「Web用に保存」の「マット」で指定した色になります。

●ダウンロード時間の目安の調整

　ちなみに容量サイズの表示欄にダウンロード時間の目安が表示されていますが、初期値ではアナログ回線の一般モデム(28.8Kbps)を基準にした時間が算出されています。これを最近のインターネット環境に合わせて、もう少し高速に設定変更したい場合は、「ヘルプ」ボタンの左横にある三角マークのボタンをクリックして、一覧から選択して変更することができます。

　どの回線速度が一般的かは、ウェブページにアクセスするユーザ層によって異なりますが、ADSL回線やケーブル回線を基準にして、「256kbps」くらいを選択しても良いのではないでしょうか。

　ところで、この一覧にある「標準 Windowsカラー」と「標準 Macintoshカラー」ってなんでしょうか? これはちょっと奇抜にも感じますが、「一般に、Windowsシステムでは Macintoshシステムよりも画像が暗く表示される」という特長をシミュレートするための設定です。 例えば「標準 Macintoshカラー」を選択すると、ユーザがMacintoshを使っている場合はだいたいこんな風に見える、ということを確認するための選択、というわけです。

●GIFの細かな調整

　ここまではGIFの「プリセット」、すなわちあらかじめ用意された設定から選択してきましたが、もっと細かくGIFの設定をしたい場合はその下にある各種設定変更を操作します。

　例えば、画像Gでは画質が落ちるのを承知で4色を選択しています。4色ではグラデーションを表示するには色不足のため、表示された画像の質はかなり落ちてしまい、選択すべきレベルではありませんが、容量サイズは2.864KBに縮んでいます。クラデーションをやめて、つまりデザインを変更してでも容量を抑えたいということもあるのです。

　「どんなとき?」 と思うかもしれません。
　例えば、広告バナーを制作するときです。GIF画像は広告バナーなどに用いられることがありますが、その場合は掲載先のウェブサイトから画像ファイルの容量制限を厳しく指示される場合がほとんどです。そういうときはこのように画像の容量と色数を比較しながら、小さいサイズできれいに表示する方法やデザインを調整していくわけです。

画像H プリセットから「JPEG 高」を選択、画質が60にセットされ、容量は640KB程度まで縮められます。 画像I 画質を10にセットすると、容量は198KB程度まで縮められますが、画像に破綻が目立ってきます。

●JPEGの品質を高めたいなら「100」

　JPEGの場合も同様に「Web用に保存」で画像の調整を行いながら保存します。
画像Hは画像を編集後に「Web用に保存」画面を表示したところです。プリセットから「JPEG 高」を選択しました。
　注意としてプリセットで「JPEG 高」を選んだにもかかわらず、画質は100のうちの60(JPEG中高画質)で保存する設定になっていることです。できるだけ高画質で保存したい場合は、画質を「100」に設定変更しておきましょう。

　画面に表示されている2つの画像は、元画像が左、画質60で保存した場合のサンプル画像が右となっています。並べられているので画質を比較するのに便利です。ズームを変更して拡大縮小を行ったり、マウスで画像をドラッグして表示する位置を変更することができます。

　さて、ここで容量サイズを確認してみましょう。「JPEG 高」を選択して画質60にセットされた場合、元画像の計算上のファイル容量は18MBであるにも関わらず、JPEGで保存するとわずか640KBに圧縮されることが解ります。実に35%のサイズまで縮むのです。JPEGが便利に利用されている最大の利点ですね。

　続いて、画質60では実際の画質にどのような影響が出るのかをズームを調整して拡大して確認すると良いでしょう。例えば、画像Iは、画質60から10に変更し、拡大した画像です。容量は更に小さくなりましたが、その代償としてブロックノイズが目立って現れてきます。画像Iを拡大するとよく解りますが、髪の毛の線が潰れて破綻していることが解るでしょう。

　このようにJPEGでは設定をしながら品質と容量サイズの妥協点をみつけていくと良いでしょう。
　次回は透過(透明化)GIFやアニメGIFの作り方を解説します。