HTMLで画像を扱う時は、別途画像ファイルが必要。 具体的にいえば、HTMLのソースに書き込むのは 『ここに○○という画像を貼り付ける』という指定だけで HTMLの中に画像のデータを書き込むわけではないんだ。 このページ内にもいくつか画像が使われているけど これらもHTMLファイルとは別の画像ファイルを貼り付けているんだ。

ではその画像ファイルはどう用意するか。 一番は自分で作るのがいいんだろうけど 絵が苦手って人もいるだろうしね。 いくつか方法をまとめてみたので参考にしてね。

１．自分で作る

WINDOWSに標準で付いている『ペイント』や 市販のグラフィックソフトを使って自分で画像を作る。 市販のソフトで有名なところでは paintShopPro(ペイントショップ・プロ)やPhotoShopElements(フォトショップ・エレメンツ) などが性能も揃っていて値段も手頃。 ネット上で配布されているフリーソフトの中にも 結構使えるものもある。

２．デジカメやスキャナを使う

これも自分で作ることになるけど、 デジカメで撮った写真や紙に描いたイラストなどを スキャナで取り込んで使ってもいい。 画像編集ソフトなどがバンドルされている場合もあるので それを使ってさらに編集することもできるね。

３．素材集を使う

これが一番手っ取り早いかもしれない。 書籍の付録CD-ROMとか素材集ソフトなど市販されているものから ネット上で配布されている素材もある(いわゆる素材屋さんのHP)。 ネットで配布されているものの多くはフリー素材として 無料で利用できるけど、使用条件などには必ず目を通そう。

っとまぁ、このようにいろいろな方法があるわけだけど、 意外とやってしまいがちなのはその辺のHPで使われている画像を 勝手に使ってしまうこと。 ネット上に公開するという事はどんなに来る人が少なかったとしても 本などを出版するのと同様、著作権に気をつけなければいけない。 これは画像に限らず文章などもそうだけど、 気に入ったからといって勝手に使いまわさないようにしようね。 (バナーなど許可が取れている場合は別として)

一口に画像ファイルと言ってもいろいろな種類がある。 WINDOWSで一般的に使われているビットマップ形式を始め 数え上げたらキリがないほどの種類がある。 これはソフトが画像を保存する時に どういう形式で保存するかで決めるので画像の保存形式、 またはフォーマットなどと呼ばれたりする。 こういったファイルを開くにはそれぞれの保存形式に対応したソフトが必要。 逆に言えば、HPで使う画像はブラウザが対応している 保存形式にしてあげなきゃいけないってわけ。 素材集を利用する場合、大抵はすでに使える形式になっているけど 自分で作る場合は、ちゃんと確認してね。

一般的なブラウザが対応している保存形式は gif(ジフ)とかJPEG(ジェイペグ)といった形式。 他に最近のブラウザだとPNG(ピング)ってのもあるけど こちらはそれほど使われていない。 gifとJPEGにはそれぞれ特徴があるので 状況に合わせて使い分けよう。

gifの特徴

拡張子は『.gif』 おそらくはネット上で一番多く使われている形式。 １つのファイルで２５６色までしか扱えないけど アニメーションや透過(背景を透かして見える)などの機能がある。 何よりも他の形式に比べて軽い(ファイル容量が少ない)のが魅力。 ただし、その特許権の問題から gifを扱えるフリーソフトはほとんどなくなってしまっている。 市販のソフト(paintShopProやPhotoShopなど)は gif形式での保存に対応しているよ。 用途としてはイラストやロゴなど割と幅広く使われる。

JPEGの特徴

拡張子は『.jpeg』または拡張子は『.jpg』 こちらはフルカラーが扱えるので 写真などに多く使われる。多少画質は落ちるけど 圧縮することによってファイルの容量を削減することが可能。

画像の保存形式は拡張子だけ変更しても変らないので、 必ずその形式に対応したソフトを使って 保存する時にその形式を選択して保存しよう。