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

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

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

画像ファイルの種類

インターネット上で利用される圧縮された 画像楽天 の拡張子は、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属性の指定は任意です。つまり、指定してもしなくても良いのです。

しかし、下記の理由により、今後はimgファイルのwidthとheight属性の指定を必ずした方が良いでしょう。

Core Web VitalsのCLS（Cumulative Layout Shift）

最近、グーグルがCore Web Vitals(ウェブに関する主な指標)を発表しました。そして、これを検索順位(検索ランキング)にも影響させるとの事です。

これは、LCP（Largest Contentful Paint）、FID（First Input Delay）、CLS（Cumulative Layout Shift）の3つの指標で構成されています。

この中の、CLSはページの読み込みの時に発生するレイアウトのずれのことです。これを防止するには、imgファイルのwidthとheight属性を指定しておいて、あらかじめ画像の表示領域を確保することが重要です。

これをしないと、例えば、画像ファイルが大きいとか、インターネットの速度が遅い場合、画像が遅れて表示されて、その時画面の表示が移動して、広告をクリックしたつもりはないのに、広告をクリックしてしまったりすることがあります。

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

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

もっと大きなメリットは画像のファイル名が同じで、画像の内容だけを別の大きさが違うものと差し替え時にHTMLファイルの修正が不要となることです。

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

ホームページビルダーでは、widthとheight属性が自動的に入力されてしまいますが、今使っているExpression Web4では、widthとheight属性は、自動的には入力されません。将来的にはこれが標準になるのかも知れないと、この時は思いました。

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

img要素にwidthとheightを指定しておくと画像を読み込む前に表示領域を確保します。指定しなかった場合は画像を読み込む時に表示領域を確保するので表示が遅いといわれていました。

しかし、指定しない方が表示が速かったという情報もありますので何とも言えないようです。

テキストより画像が読み込まれるのが遅いので、読み込みの途中でレイアウトの崩れが発生することは否定できません。これが、今後、ページの重要な要素になる可能性があるので、img要素にwidthとheight属性を指定することにしました。

私の作っているウェブページは表示速度がとても速いので、画像により、レイアウトの崩れがあったとしても、実際は閲覧者が困ることはないと思います。