Webページに写真、図をのせるときの注意

 パソコンのモニタの解像度は 72dpi  (Macintosh)〜96dpi (Windows)しかありません。

  dpi とは dot per inch つまり72dpi とは72点/2.5cm  という意味です。以下のカメラとか画像の解像度では pixel という単位を使いますがこれは dot と同じです。

  ちなみにプリンタは最低300dpi で、これくらい細かく点を紙に印刷しないとフォントなどがぎざぎさに見えて汚くなります。最近のはどんなのでも 600 dpi 以上でしょう。

 パソコンの画面は古い化石のCRTモニタで横が860 pixels ノートのほとんどが1024 pixcels、大画面で1500pixcels くらいでしょうか。

 どうです?あなたは現在どのくらいの大きさのモニタで見ていて、このブラウザは画面の何%の横幅を占めています?

 15〜17インチモニタで 解像度は 1024x768〜1280x1024pixels位が一番多いのではないでしょうか?

 大画面のユーザは画面にいくつものウインドウを提示したいので、ブラウザ自体の画面の横幅は1000pixels 位でしょう。

 ブラウザの画面に、ユーザの好みで横に「お気に入り」 とかを並べている場合もありますので、実質的なブラウザのページの横幅は1000pixels を超えることはないでしょう。

 つまりこれ以上大きな画像を貼り付けてもはみでちゃうことになります。

 一方、最近のデジカメは横幅が4000pixelを超えている画像を撮影するモードを高解像度として売りの一つにしています。

 このような大きなデジカメの写真をそのまま、ページに貼り付けると、はみ出しちゃうのは容易に想像できますね。

 そこで、Webページを作るソフトでは、はみ出ないように縮小する機能がついています。しかしです。この縮小する機能は画像ファイルそのものを縮小するのではなく、表示の際、すべてのpixel を表示するのではなく、たとえば1つおき(1/2の大きさになる)とか4pixelにつき1pixel (大きさは1/4になる)だけを表示するのです。

 ファイルが大きいとどういうことになるかわかりますね。ダウンロードするのに時間がかかります。つまり表示されるのが遅いのでユーザはいらいらします。

 でも表示されたときの、画像の表示は pixel を飛び飛びに表示していて、使わないpixel の情報は意味がないことになります。

 だったらさいしょっから飛び飛びの画像を作ってしまえば、ファイルの大きさが小さくて済みます。表示結果に差がないはずです。

 試してみましょう。

 4368 x 2912 pixel, 3.12MB の写真 ページ作成ソフトで、はみ出でないように縮小してあります。

 1098 x 728 pixel, 71.6KB の写真 ページ作成ソフトで、はみ出でないように縮小してあります。

  546 x 368 pixel    26.2KB の写真 

 1098 x 728 pixel, 71.6KB の写真 こっちはどうでしょ?縮小していません。

どうです?全く変わりがないでしょ?4368 x 2912 pixelの写真はなかなか画像が表示されなかったでしょ?縮小しないと画面からはみでちゃうでしょ?

 どうやったらいいでしょ。オリジナルの画像を加工するのです。たとえばPhotoshopで画像解像度を小さくすればいいのです。ページ作成ソフトにもそのような機能があるかもしれません。ページ作成ソフトでマウスで写真の角をつかんで、縮小拡大をしたらいけないのです。

 他の人がダウンロードして、写真屋でプリントしてもらうような用途のときは別です。そのようなときは画面に表示せず、ダウンロードだけできるようにファイルを別途用意しておきましよう。

 では印刷するときはどうしたらいいでしょう?

 先に述べたように、プリンタはモニタより解像度が4倍位高いのです。ですから、4368 x 2912 pixelの写真を600dpi のプリンタで、その解像度いっぱいにつかうと (4368/600) x 2.5 = 18.2 cm の大きさ(幅)に印刷できます。 546 x 368 pixel の写真を同じ大きさに印刷するとどうなるでしょう?2.5 x 546/18.2 = 75 dpi の写真になってしまいます。つまりぎざぎざの写真になってしまいます。つまり546 x 368 pixel の写真は2.3 cm の幅の印刷出力ならきれいに見えることになります。

 お分かりですか?デジカメで撮影した写真は、表示する装置によって使い分ける必要があるわけです。

 

 次は図や写真の圧縮の問題です。デジカメでは写真はjpg という形式で保存されています。このjpg というのは圧縮方法です。ほかにも gif という方式があります。比べてみましょう。

gif 圧縮です jpg 圧縮です
 拡大した gif です 拡大した jpg です

 わかりますか?jpg はフルカラーですが、自分自身の点と隣、さらにその隣などの色情報を加味して圧縮します。 ですから白地に濃い色のいくっきりした線があるとjpg は白地にその色情報を加味して圧縮するので、真っ白にならずなにかもやもやしたものが出てきちゃいます。この例では jpg ではピンクの線が黒く縁取りされちゃってます。

 gif は、そのような操作をしていませんのでくっきりしていますが、256色しかありません。

 グラフや模式図でコントラストのはっきりした図は gif で圧縮しましょう。photoshop、illustrator は両方の圧縮方法を備えています。グラフや模式図はillustrator で描きますね。一方、デジカメ写真はphtopshop で取り扱いますね。ですからページに掲載する場合、illustrator で作った図は gif 形式で photpshop  で作った絵は jpg 形式で圧縮すると覚えておきましょう。