第8回　ホームページ用の画像編集

＜はじめに＞
このホームページ(HP)、AyaMio Siteではたくさんの画像を扱っています。
それは、パパがカメラ好きというのもありますが、画像の掲載がメインなので当たり前ですが・・・。
（最近では、このようなテキストがメインに更新されていますけど・・・）
ここでは、どのようにしてHP用の画像を処理をしているかをご紹介していきます。
これがベストの方法ではないと思いますが、HPを作られる際の参考にしていただければと思います。
なお、画像の編集はPhotoshopやMicrosoft Photo Editorなどが有名です。
ここでは、これらアプリケーションの使い方を説明するものではありませんので、
その点はご了承ください。

（１）デジタル画像に
パソコンで画像を扱うからにはデジタル画像にしなくてはいけません。
もちろん、デジカメで撮った写真は最初からデジタルなので、ここは読み飛ばしてください。

（1-1）印刷物（写真）→デジタル画像
カメラが趣味の私は、特に一眼レフがメインなので、
写真屋でプリントしたいわゆる「写真」をデジタルにする必要があります。
我が家では、スキャナ（CANON D1230）を用いて画像を取り込んでいます。
これは、USBの1200dpiのものです。詳細は以下を参照ください。

（1-1-1）スキャナ
スキャナにも様々な種類があります。
購入するときの参考にして下さい。
（1-1-2）インターフェース（パソコンとの接続）
インターフェースの種類としては、SCSI、USB(1.1, 2.0)、パラレルがあります。
最近ではIEEEのインターフェースもあります。
一昔前までは、これら様々な規格が混沌としておりましたが、
最近ではUSBの2.0という規格で統一された感があります。
前まではSCSIが最も速かったのですが、USB2.0やIEEEという規格が出てきてからは、
すっかり影を潜めてしまいました。
現在このタイプを選択する理由はないように思います。
またパラレルはプリンターポートに挿す手軽さで受けていましたが、
これもUSBやIEEEに対するメリットはなく、このタイプのスキャナはもうないです。
USBは挿すだけという手軽さと、速い転送速度（USB2.0の場合は）のため、今や標準です。
需要が多いため、値段も比較的安く、1万円前後のものが多いです。
パソコンショップに行っても今やほぼすべてといって良いほど、USBになっています。
ただし、気をつけることはUSBポートがパソコンにあることです（当然）。
あと、USBはWindows 98SE以降から正式にサポートされていますので、
古いパソコンを使用されている場合は確認してください。
なお、Windows NTではUSBは使用できません。
USBの1.1と2.0は基本的に転送速度の違いです。
USB2.0の機器を使い、USB2.0のポート（パソコン側）で繋げば最も高速ですが、
パソコン側がUSB1.1のポートしかない場合は、機器のほうはUSB1.1として振舞うので、
普通は問題なく使用可能です。
機器が1.1でパソコン側が2.0でも同様に使用可能です。
ただしどちらも1.1相当の速度しか出ませんが・・・。
（1-1-3）光学解像度
スキャナにはどれだけ細かく画像を取り込めるかという数値があります。
スキャナの売り場には「解像度9600dpi」などと書いてあるかもしれませんが、それを信じてはいけません。
（別に嘘ではないですが・・・）
チェックすべきは「光学解像度」です。
光学解像度は、物理的に取りこめる解像度のことです。
300dpi(dots per inch)であれば1インチで300ドット（点）読めるということです。
それに対し、一般にいう解像度はソフトウェアで処理して解像度を上げています。
つまり、光学解像度600dpiで解像度9600dpiもありということです。
簡易的に読みこむだけであれば、300dpiでも構いません。
しかし、600dpiあると余裕が出てくると思います。
1200dpiは本業の人と思って良いのでは？
（と、書いていたのもつかの間、最近では1200dpiが標準になってきました）
（1-1-4）取り込み
実際に取りこむ際は、必要な解像度よりも高い解像度で取り込みます。
高画質で取り込んでおいて、あとで解像度を落とす方が綺麗になります。
（スキャナの性能か、画像処理ソフトの性能かと言うことでしょうけど）
例えば、私はHP用には600dpiで読みこんでいます。
ネガをスキャンするときは1200dpiです。

（1-2）デジカメ→デジタル画像
デジカメはデジタルカメラというくらいなので、デジタル画像です。
そのままパソコンで読みこめばOK。
ノートパソコンであればPCMCIAスロットを使うのが簡単です。
デスクトップパソコンであればカードリーダーが簡単です。
特に、USBが使える場合はUSBインターフェースのカードリーダーがお勧めです。
なお、カードリーダーではなく、USBとデジカメを直結できるものもあります。
（と言うか、最近のデジカメはUSBでパソコンと直結するものがほとんどですね）

（２）トリミング
トリミングというのは画像の好きな部分だけを抽出することです。
家で写真を撮っていいのが出来たけど、背景が洗濯物でいっぱい・・・なんてことも。
そんなとき、好きな場所だけを切り取ります。
この時、可能であれば、縦横比を固定した方が見栄えが良くなります。
（例えば3：4など）
最終的にHPに掲載するときに、画像によって大きさが違うと見にくい・・・
縦横比を同じにしておけば、すべての画像を同じ大きさに出来るからです。
しか〜し、そうはいかない画像もありますので、それはそれで適当に。
高解像度のデジカメではこれを意識して、撮影時にアップで撮らない工夫も必要です。
（被写体を小さくすることで、好きに背景を入れられるため）
ちなみに、AyaMio Siteでは300×229の比になる様に設定しています。
現在では300×225ですけど・・・（笑）
（理由は後述。操作方法はソフトのマニュアル参照）
例えば子供の写真をトリミングする場合、顔や体を画像いっぱいに取ることもあります。
それはそれで一つの方法ですが、空を少し写しこむ方がバランスが良いことが多いです。
写真はバランスが命ですので、トリミングは重要です。
本来はトリミングしなくても良いように撮影するのが基本ですが・・・（汗）。

（３）イメージ調整
写真を人に見せるのと違い、パソコン上でいかに綺麗に見せるか・・・
人それぞれのPCで違った見え方をしますので（モニターの種類などにより）、
あまりこだわっても仕方がないところがあります。
最近ではsRGBという規格が出来たお陰で、どのＰＣでも大体同じように画像が表示されます。
ま、取りあえずは自分自身のＰＣで綺麗に見えるように画像処理することが必要です。
黒がつぶれっちゃったな〜、白が飛んじゃったな〜、などと思うときはイメージ調整をすると比較的綺麗になります。
本来8ビットのデジタル画像は黒(0)から白(255)までの数字で書かれていますが、
実際にはそうなっていないことが多々あります。
例えば一番暗いところが30くらいで、一番明るいところが220くらいだったり・・・。
そこで、その30を0に、220を255に置き換えてあげる作業がこれにあたります。
普通の場合は、この作業だけで大分綺麗な表示になりますが、
逆光の元で撮影されたものはこれだけでは綺麗な表示にはなりません。
このときはガンマというところをいじって調整していきます。
しかし最近のデジカメはかなり「絵作り」が上手なため、あまり必要がないこともあります。

（４）画像サイズ変更
HPに画像を載せるからには、軽く（容量が小さく）なくてはいけません。
画素数が多く、高画質であるほど、ファイルサイズが大きくなります。
でも、これでは見てもらう人に迷惑です。
私は最終的な画像のピクセル数が300×229になるように設定しています。
これは私の使用しているデジカメが2016×1536（約310万画素）で、
長いほうの幅を切りのいい300にすると短いほうの幅が229になるからです・・・
AyaMio Siteの画像を見て大きいと思えば小さくして、小さいと思えば大きくすれば・・・
（結構適当な決め方でした・・・）
この操作は、画像編集ソフトで行ってください。
HP作成ソフト上では見かけだけしか変わらず、もとの画像の大きさが小さく見えるだけです。
たまに原画をそのまま載せて、見かけの表示サイズだけを小さくしている方がいます。
見かけは小さくても、実際のファイル容量が大きいので、困ります・・・。

（５）保存形式
HPの画像としてはGIFかJPEGを用いるのが一般的です。
（PNGなどもありますが、必ず見れるかは微妙です・・・）
GIFはインデックスカラーといって、256色までしか扱えません。
写真などの画像には不向きです。
ただし、圧縮はされないので、バナーやボタンには最適です。
JPEGはフルカラーを扱うことができ、さらに圧縮が可能です。
（というか、圧縮されてしまう）
圧縮することで、隣り合う画素の色が混色されて、情報が落ちていきます。
例えば、細かい線などがうつっている画像は、線がつぶれていきます。
この圧縮率は保存時に設定することができます。
私はJPEGで圧縮4(40%)を使用しています。
最近ではインターネットも高速になりつつあるので、6（60%）を使用しています。
（10はあまり圧縮されない、1はむっちゃ圧縮される）
圧縮しないとサイズが大きいし、圧縮すると画質が悪いし・・・
その中間を取るのがいいのでしょう。きっと。
（またもや適当・・・）
ただし、デジカメでの保存形式にもよります。
デジカメの保存で「高画質」とあるのはJPEGの圧縮が低いものです。
この画像に画像編集したものは、圧縮を大きくかけても綺麗ですが、
デジカメの保存で「普通」などで保存した場合は、元々大きな圧縮がかかっていますので、
画像編集した後に圧縮率を大きくして保存すると汚くなります。
つまり、高画質で保存したものを編集した場合は4程度で、
元々「普通」画質のものを編集酒他場合は6程度で圧縮すると良いかもしれません。

（６）最終形式
最終的に、JPEGの300×229の画像ができますが、注意すべきはファイルサイズです。
ファイルサイズは大きくても30KB、平均として20KB程度になっているのが望ましいかと。
この程度であれば、HPを見ていただく方にストレスを与えません。
ただ最近ではインターネットも高速になっているので、もう少し大きくても良いかもしれません。
今は、40KBを超えないように、このＨＰでは画像を作成しています。
ファイルサイズは画像のピクセル数と圧縮率によって決まりますので、
ピクセル数を増やしたいなら圧縮率を上げる、などの工夫が必要です。
どうしても大きなファイルサイズを掲載する場合は、サムネイルという小さな画像を貼っておき、
クリックすると大きな画像になるという工夫が必要かと・・・。

＜終わりに＞
ここまで書いてきましたが、やはりセンスに頼るところが多く、
言葉で説明するには難しいことが分かりました・・・（汗）。
デジカメでこんな画像になっちゃったんだけど、綺麗に出来ないかなぁ〜という方は、
画像を送っていただければある程度は見れるものに出来るかもしれません・・・（笑）。

AyaMio Site's top page URL. (Supported by AyaMio)
http://homepage2.nifty.com/ayamio/