ホーム > 画像について

■画像

　HTMLでは、画像を用いてホームページを飾ることができます。現在HTMLで表示できるファイルは大きく分けて、4つあります。BMP/GIF/JPEG/PNGです。以下に示します。

■BMP形式の説明

　BMP（Bitmap）は、壁紙等でも使われています。BMPは全てのピクセルに対して独立して色を保存しているため、ファイル容量が大きくなるのが難点です。ホームページではそのまま使用せずにGIF,JPEG,PNG形式に変換してから使うのが一般的な使用方法です。
　拡張子は「.bmp」です。

■GIF形式の説明

　GIF（Graphics Interchange Format）は、GIF89aより、アニメーションGIF・透過GIF・256色をサポートしています。現在幅広く使われている画像フォーマットですね。ただし、GIFは現在Unisys社のフォーマット内部（LZW圧縮伸張アルゴリズム）の特許を取得しているため、現在特許問題で大問題になっています。ただし、GIFそのものに特許があるわけではありません。あくまで圧縮アルゴリズムの特許についてです。(※ライセンス期限切れのため問題が無くなりました。詳しくは、第7部:Unisys社のGIF圧縮技術ライセンス期限切れ参照)。
　拡張子は「.gif」です。

■JPEG形式の説明

　JPEG（Joint Photographic Experts Group）は、JPEGは静止画像を圧縮保存するための世界共通の規格です。写真等のフルカラーのものを高品質に圧縮する技術に優れており、写真等を画像化するのであれば、JPEGを使うと良いでしょう。1677万色（24ビット）を表現することが出来ます。
　拡張子は「.jpeg」or「.jpg」です。

■PNG形式の説明

　PNG（Portable Network Graphics）は、静止画像です。WWW の標準化を行なう団体 W3Cで考えだされたGIF に代わる画像フォーマットです。PNG 開発の最初の動機は GIF の置き換えでしたが、開発者に最小のコストで、さらに GIF には無い幾つかの新しい "使える" 特徴を提供するように設計されました。特許問題で揺れているGIFにかわりPNG は標準となるでしょう。

　ただし、PNG形式の画像形式は、サポートしていないブラウザも存在しますので、注意が必要です。Internet Explorer4から実装しています。Netscape Navigator4から実装していますが、少々バグがあります。まだまだGIFの時代が続くのではないでしょうか？
　Internet Explorer3・Netscape Navigator3より以前のブラウザに対応しないというのならば、気にしないでPNG形式に移行すると良いでしょう。
　拡張子は「.png」です。

■画像を表示する際に考慮することについての説明

ALT属性を指定する。
画像ファイルが大きい際に読込途中でも画像ファイルの場所にカーソルをもっていくとコメントが表示されます。また画像読込をOFFにしている人もいるので、ALT属性を<IMG>で指定することで画像が表示されない人でもコメントによって判断することが出来ます。見る側に優しいページを作るのならば属性を指定することが良いでしょう。
WIDTH属性・HEIGHT属性を指定する。
<IMG>で画像ファイルを使用する場合には、HEIGHT/WIDTHを指定することが望ましいです。なぜならブラウザ側で読み込む画像についていちいち画像サイズの確認動作等が発生するために表示速度が遅くなります。見る側に優しいページを作るのならばWIDTH属性・HEIGHT属性を指定することが良いでしょう。
画像ファイルの大きいものはなるべくやめましょう。
画像ファイルの大きいファイルを置いてあるページを見た場合に表示が当然遅くなります。近年通信環境が良くなったといえ、ユーザの様々な環境の方を考えてあまり大きいサイズのファイルを置くのは止めたほうがいいでしょう。

■ソース

ただし、画像について様々なことを考慮するならば、以下のようにしましょう。

[ホーム] [↑ページ最上部へ戻る]

Webマスター、HP作成のプロとして活躍したい方は見てください。
ホームページの開設数が増加し、Web業界や一般企業でWebマスターが急激に求められています。Webマスターの絶対数の不足している今が、技能習得の絶好のチャンスです。