画像をリサイズする必要も

ホームページには、文字だけでなく写真などの画像を使うと表現力が大きく増します。ところが画像を扱うとなると、ホームページ作成用のHTMLエディタ(タグ入力でページを作るソフト)、Webオーサリングツール、CMS等ではできないことが生まれてきます。

デジカメなどで撮影した写真は、案外大きいものです。これをそのままホームページに載せると、大きすぎる場合が少なくありません。もちろんWebオーサリングツールを使っていれば、マウスで簡単に縮小することはできます。しかしそれは見た目が小さくなっているだけで、写真の持つデータ量は前のままなのです。つまり、見た目には小さな写真でも、実は大きなデータ量を持っているので、そのページを見る人は、写真が表示されるまでの時間を待たなければならなくなります。写真のデータ量が少なければホームページ上にすぐに現れますが、データ量の多い写真だと、表示に時間がかかってしまいます。そんなことが起きないように、あらかじめ写真を適切な大きさにリサイズしておく必要があるのです。

写真のリサイズを行うには、画像専用のソフトが必要になります。有名なソフトとしては、Adobe社のPhotoshop(フォトショップ)がありますが、これはプロ用ですし、高価です。Photoshopの廉価版として、Photoshop Elements(フォトショップ・エレメンツ)があります。印刷業務で使うのなら、本格的なPhotoshopが必要ですが、ホームページ制作のためなら、Photoshop Elementsで十分です。またフリー(無料)の画像ソフトもありますので、探してみるのもいいでしょう。

掲載できる画像のファイル形式は3種類

ホームページで使うことのできる画像には、決まった形式があります。

コンピューターで使うことのできる画像のファイル形式はたくさんあります。Windowsで一般的なBMPとか、以前のMacで一般的だったPICTをはじめ、TIFF、SVG、JPEG、EPS、PDF、PSD、PNG、Targaとさまざまです(まだまだあります)。しかしホームページで使うことのできる画像のファイル形式は、原則三つだけ(※1)。GIF(ジフ)、JPEG(ジェーペグ)、そしてPNG(ピング)です。それぞれ特性がありますが、上に書いたPhotoshop Elementsなどの画像ソフトを使えば、簡単にこれらの形式にすることができます。

※1=これら三つに加えて、SVGも使うことができます。SVGの画像は拡大しても荒れないため使い勝手が良いのですが、画像内容によってはデータ量が大きくなりますし、少し古いブラウザだと表示が難しくなるため、注意が必要です。

ちなみに、GIFは、イラストや文字を画像にする場合などによく使われます。画像を256色に変換することでデータ量を減らします。128色、64色と色数を減らしていくと、さらにデータ量を少なくできます。しかし色数が少ないと表現力が落ちます。よって、色をたくさん使っていないイラストなどに最適だというわけです。また画像の白い部分を透明にすることができますから、背景に色のついたページの上に、画像内の人や物を境界に沿って切り抜いた形で掲載することができます。

JPEGは、写真でよく使われる形式です。フルカラーで表現することができます。画像を圧縮するので、高圧縮をかけるとデータ量が少なくなる反面、画像が荒れてきます。きれいな画像ほどデータ量が多くなりますが、写真類だと圧縮しても粗さが目立たない場合が多いのでよく使われます。ただしGIFのような切り抜きはできません。

PNGは、GIFとJPEGの良い面を併せ持っています。古くはこの形式に対応していないブラウザがあったので、ホームページ制作者が使用を控えていました。今はほとんどのブラウザで大丈夫だと思われ、よく使われています。

 

  高品質 低品質
JPEG
(ジェーペグ)
JPEG高画質(低圧縮) JPEG低画質(高圧縮)
gif
(ジフ)
GIF高画質(多数色) GIF低画質(少数色)
PNG
(ピング)
PNG高画質(多数色) PNG低画質(少数色)