画像ファイルの種類と使い方

ホームページを閲覧していると、画像の表示にとても時間がかかるものがあります。また、グラフやイラストが汚いものもあります。画像の使い方が悪いと不快な思いをすることがあります。画像ファイルの種類と使い方を考えてみました。

このページは私が推奨するやり方であって、他人に強制するものではありません。どんな画像を使ってもかまわない事は言うまでもありません。

画像ファイルの種類

インターネット上で利用される圧縮された 画像楽天 の拡張子は、GIF、PNG、JPG(またはJPEG)の3種類が主なものです。PNG形式はGIF形式によく似た形式です。

また画像ファイルには、BMP(ビットマップ)形式という圧縮していないファイルもあります。

画像ファイルの特徴

次に画像ファイルの種類と特徴を示します。圧縮アルゴリズムの特許(米国のUnisys社)問題で、ライセンスのある ソフトウェア以外で作成したGIFファイルを公開することができなかったのですが、2004年6月に特許は切れました。

画像ファイルの種類と特徴を理解して上手に使いましょう

画像ファイルの種類と特徴がわかれば、これをうまく使い分けることができます。私は回路図や計算式やグラフや地図やイラストはGIF形式にしています。何度編集しても全く画像は劣化しません。ファイルの大きさも小さくできます。Windowsに無料で付いているペイントで簡単に作れるのも良いと思います。

写真はJPG(JPEG)形式にすることが多いのですが、写真に文字を何度も入れ直す場合はPNGかGIF形式にすることもあります。JPG形式の写真は何度も編集しないようにします。もし編集する場合は常に元画像からコピーして編集するようにします。

画像ファイルの大きさ(画素数)とファイルサイズ

インターネットで一般に使用される画像は適度な大きさ(縦、横のピクセル数)と適度なファイルサイズにする必要があります。縦、横のピクセル数があまり小さいと画面で見にくくなります。大きすぎると画面からはみ出してスクロールが必要です。

また、ファイルサイズが大きすぎるとダイアルアップ等のブロードバンドでないユーザーには、表示に時間がかかります。

一般的には写真の縦、横のピクセル数は200〜400にすれば、まず問題は無いでしょう。これはファイルの画素数であって、表示する縦、横のピクセル数(画素数)ではありません。ファイルのディスク上でのサイズは20キロバイト以下が理想ですが、50キロバイト以下にしましょう。

私は写真では約240X320ピクセルに統一しています。「縮小専用」というソフトで縮小しています。ファイルサイズは30〜40キロバイトが多いと思います。

画像ファイルのwidthとheight属性は指定しない

imgファイルのwidthとheight属性の指定問題は賛否両論あるようです。私も今まではNetscape Navigator 4のような古いブラウザへの配慮で指定するのが必須だと思っていました。しかし、私は指定しないことに変更しました。元々XHTML1.0やHTML4.01ではimgファイルのwidthとheight属性の指定は任意です。つまり、指定してもしなくても良いのです。

widthとheightを指定しないメリット

widthとheight属性を指定しないので、記述の必要がないので手間が省けます。また、ファイルの大きさも少しですが小さくなります。

もっと大きなメリットは画像を別のものと差し替え時た時にHTMLファイルの修正が不要となることです。画像の編集でトリミング等をして画像のピクセル数が少しでも変わった場合、画像ファイルの差し替えだけでなくHTMLファイルの方も修正しないといけません。そうしないと画像が変形します。

ホームページビルダーでは、widthとheight属性が自動的に入力されてしまいますが、最近使い出したExpression Web3では、widthとheight属性は、自動的には入力されません。将来的にはこれが標準になるんだろうと思っています。

widthとheightを指定しないデメリット?

img要素にwidthとheightを指定しておくと画像を読み込む前に表示領域を確保します。指定しなかった場合は画像を読み込む時に表示領域を確保するので表示が遅いといわれていました。しかし、指定しない方が表示が速かったという情報もありますので何とも言えないようです。